راهکارهای موثر در ASP.Net > راهکارهای کار با داده در ASP.Net

 راهکار 4 - 6 : نمایش ، صفحه بندی و مرتب سازی اطلاعات به وسیله کنترل ListView

مقدمه :

در این راهکار شما با کنترل ListView کار خواهید کرد که این امکان را می دهد تا اطلاعات دریافتی از پایگاه داده را در فرمت و قالب مورد نظرتان نمایش دهید . بوسیله کار کردن با قالب های این کنترل شما کنترل کاملی را بر نحوه ارایه و ظاهر نمایش اطلاعات در خروجی خواهید داشت . این کنترل بصورت کامل از ویرایش ، وارد کردن اطلاعات جدید و پاک کردن آنها به همراه صفحه بندی و مرتب سازی پشتیبانی می کند .
در این راهکار موارد زیر مطرح شده است :

  • استفاده از کنترل ListView برای نمایش اطلاعات از پایگاه داده .
  • اضافه کردن قابلیت مرتب سازی و صفحه بندی اطلاعات به کنترل ListView .

برای حمایت از این پروژه ، کتاب راهکارهای موثر در ASP.Net را دانلود نمایید ...

پیش نیازها :

برای اجرای این راهکار نیاز دارید تا برنامه های زیر بر روی سایت شما نصب شده باشد :

  1. Microsoft Visual Studio .
  2. Microsoft .NET Framework version 2.0 یا بالاتر ( همراه با ویژوال استودیو نصب می شود ) .
  3. دسترسی و اتصال به پایگاه داده NORTHWND.MDF توسط SQL Server (  فایل پایگاه داده در ضمیمه پروژه قرار دارد ) .

مرحله اول - طراحی یک سایت ASP.Net :

در مرحله اول از راهکار بایستی یک سایت ASP.Net را برای اجرای پروژه خود ایجاد نمایید . فرض بر این است که سایت را قبلا ایجاد کرده و یا با نحوه اجرای آن آشنایی دارید ، در غیر اینصورت به راهکار شماره 1-1 : نحوه ایجاد یک وب سایت ASP.Net در ویژوال استودیو بروید .

مرحله دوم - نمایش و صفحه بندی اطلاعات توسط کنترل ListView :

برای نمایش اطلاعات بر روی یک صفحه ASP.Net به موارد زیر نیاز دارید :

  1. یک اتصال به منبع داده ای مثلا پایگاه داده . در این راهکار، ما یک ارتباط را به پایگاه داده SQL Server با نام AdventureWorks ایجاد خواهیم کرد .
  2. یک کنترل سرور داده بر روی صفحه که به پایگاه داده متصل شده و اطلاعات را از آن دریافت و یا به آن ارسال می کند. در این راهکار از یک کنترل SqlDataSource برای ارتباط با پایگاه داده AdventureWorks استفاده خواهیم کرد .
  3. یک کنترل بر روی صفحه برای نمایش اطلاعات که در این راهکار از کنترل ListView استفاده خواهیم کرد .

نحوه نمایش و صفحه بندی اطلاعات توسط کنترل ListView :

  1. اگر سایت شما از قبل دارای پوشه App_Data نیست ، بر روی نام سایت کلیک راست کرده و با انتخاب گزینه Add ASP.NET Folder و سپس پوشه App_Data ،آن را به سایت اضافه کنید .
  2. در منوی Solution Explorer ، بر روی پوشه App_Data کلیک راست کرده و گزینه Add Existing Item را انتخاب کنید . پنجره Add Existing Item باز می شود .
  3. از طریق پنجره باز شده ، فایل پایگاه داده AdventureWorks_Data.mdf را که دانلود کرده اید را پیدا نموده و به پوشه اضافه نمایید .
  4. مجددا بر روی نام وب سایت در منوی Solution Explorer کلیک راست کرده و این بار گزینه Add New Item را انتخاب کنید . پنجره Add New Item باز می شود .
  5. از بخش Installed Templates ، زبان C# یا VB را انتخاب کرده و سپس یک صفحه Web Form با نام Sample.aspx را به سایت اضافه کنید .
  6. در صفحه جدید ایجاد شده به حالت Design رفته و از منوی Toolbox بخش Data ، یک کنترل ListView را بر روی صفحه قرار دهید .
  7. از بخش Common ListView Tasks ، از منوی کشویی Choose Data Source گزینه <New data source> را انتخاب کنید . مطابق تصویر زیر :
  8. پنجره Data Source Configuration باز می شود .
  9. گزینه Database را انتخاب کنید ، مطابق تصویر زیر :
  10. در بخش Specify an ID for the data source ، یک نام پیش فرض با مقدار SqlDataSource1 قرار دارد ، آن را بدون تغییر رها کنید ، سپس OK را بزنید .
  11. پنجره Configure Data Source باز می شود . از زیر بخش ? Which data connection should your application use to connect to a database  گزینه پایگاه داده AdventureWorks_Data.mdf را از لیست انتخاب کنید .
  12.  بر روی گزینه Next کلیک نمایید . ویزاردی باز می شود که نمایش دهنده یک صفحه است . در آن صفحه می توانید تعیین کنید که connection string در فایل web.config سایت ذخیره شود یا درون خود صفحه . ذخیره connection string در فایل web.config دو مزیت عمده دارد :
    1. دارای امنیت بیشتری نسبت به ذخیره در خود صفحه است .
    2. می توانید از آن connection string در صفحات دیگر نیز به دفعات استفاده نمایید .
  13.  مطمین شوید که گزینه Yes, save this connection as انتخاب شده و سپس کلید Next را بزنید . این کار connection string ، را با نام NorthwindConnectionString ، در فایل web.config ذخیره می کند . می توانید نام آن را نیز به نام دلخواه تغییر دهید .
  14. ویزارد در مرحله بعدی صفحه ای را به شما نمایش می دهد که در آن می توانید تعیین نمایید که چه اطلاعاتی را می خواهید از پایگاه داده دریافت کنید . گزینه Specify a custom SQL statement or stored procedure از میان دو گزینه موجود ، انتخاب کنید . سپس دکمه Next را بزنید . مطابق تصویر زیر :
  15. در بخش Define Custom Statements or Stored Procedures ، کد SQL زیر را وارد نمایید که اطلاعات query مورد نظرتان را از پایگاه داده  AdventureWorks دریافت می کند .
    کد SELECT [CustomerID], [CompanyName], [ContactName], [PostalCode]
    FROM [Customers]"
  16. شما همچنین می توانید از ابزار Query Builder برای ساخت یک Query ( ابزار جستجو در پایگاه داده ) استفاده نموده و دستورات کامل تری را تعیین کنید .
  17. بر روی گزینه Next کلیک کرده و سپس با کلیک بر روی گزینه Test Query مطمین شوید اطلاعاتی را که می خواهید از پایگاه داده دریافت می کنید . سپس دکمه Finish را بزنید .
  18. ویزارد در اینجا ، یک کنترل SqlDataSource را ایجاد و به صفحه اضافه می کند . کنترل ListView که بعدا در این راهکار به صفحه اضافه خواهیم نمود ، از این کنترل برای اتصال به پایگاه داده استفاده می کند .
    راهنمایی : اگر به بخش properties کنترل SqlDataSource بروید خواهید دید که برنامه بصورت اتوماتیک مقادیر لازم برای خواص ConnectionString و SelectCommand را ایجاد کرده است .
  19. بر روی کنترل ListView کلیک راست کرده و گزینه Show Smart Tag را انتخاب کنید . از منوی Common ListView Tasks، گزینه Configure ListView را انتخاب کنید . پنجره Configure ListView باز می شود . گزینه Ebable Paging را انتخاب نمایید ، این گزینه قابلیت صفحه بندی اطلاعات را به کنترل اضافه می کند .
  20. شما همچنین ممکن است بخواهید قالب خاصی را برای نمایش اطلاعات در کنترل ListView انتخاب نمایید . این کار باعث زیباتر شدن خروجی کنترل و مرور بهتر اطلاعات می شود . برای این منظور از بخش Select a Style، یک قالب را برای مثال Colorful را انتخاب نمایید . هماندد تصویر زیر :
  21. برنامه بصورت اتوماتیک ، خروجی کنترل را بر حسب قالب انتخاب شده و فیلدهای آن ، مطابق عکس زیر ایجاد می نماید .
  22. در این مرحله ، میخواهیم کنترل ListView را تست کرده از کارایی آن اطمینان حاصل کنیم . برای این منظور کنترل CTRL + F5 را فشار دهید . کنترل ListView اطلاعات فیلدهای   CustomerID, CompanyName, ContactName, PostalCode را نمایش می دهد . برای رفتن به صفحات بعدی و قبلی ، بر روی دکمه های پایین کنترل کلیک نمایید .

اضافه کردن قابلیت مرتب سازی داده ها در ListView :

برای اضافه کردن قابلیت مرتب سازی اطلاعات نمایش داده شده توسط کنترل ListView بر حسب مقادیر یک فیلد ، کارهای زیر را انجام دهید :

  1. صفحه sample.aspx را باز کرده و به نمای source کد بروید .
  2. از بخش Standard منوی Toolbox ، دو کنترل فرمان Button را بعد از عنصر table که درون المنت LayoutTemplate کنترل ListView است ، قرار دهید .
  3. در منوی Properties ، خواص زیر را در کنترل ها بصورت زیر تغییر دهید :
    برای کنترل فرمان اول ، مقدار خاصیت Text را به "Sort by Name" و مقدار خاصیت CommandName را به Sort تغییر دهید . همچنین خاصیت CommandArgument را بر روی مقدار "ContactName" تنظیم نمایید .
    برای کنترل فرمان دوم نیز ، مقدار خاصیت Text را به "Sort by ID" و مقدار خاصیت CommandName را به Sort تغییر دهید . همچنین خاصیت CommandArgument را بر روی مقدار "CustomerID" تنظیم نمایید .
    راهنمایی : تنظیم مقدار خاصیت CommandArgument کنترل دکمه فرمان ها بر روی Sort به معنای مرتب سازی تنظیم شده بوده  و عمل مرتب سازی را در کنترل ListView بر حسب فیلد تعیین شده ، انجام می دهند .
  4. فایل را ذخیره نمایید .

مرحله آخر - تست مرتب سازی داده در کنترل ListView :

  1. کلیدهای CTRL + F5 را برای اجرای صفحه فشار دهید .
  2. دکمه فرمان های Sort by Name و Sort by ID را برای مشاهده نحوه مرتب سازی اطلاعات کلیک نمایید .
  3. یک دکمه فرمان را بصورت متناوب برای تغییر جهت مرتب سازی از بالا به پایین و برعکس کلیک نمایید .

دانلود فایل عملی پروژه و نسخه PDF راهکار



راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1