راهکارهای موثر در ASP.Net > راهکارهای کار با داده در ASP.Net
راهکار 4 - 6 : نمایش ، صفحه بندی و مرتب سازی اطلاعات به وسیله کنترل ListView
مقدمه :
در این راهکار شما با کنترل ListView کار خواهید کرد که این امکان را می دهد تا اطلاعات
دریافتی از پایگاه داده را در فرمت و قالب مورد نظرتان نمایش دهید . بوسیله کار کردن
با قالب های این کنترل شما کنترل کاملی را بر نحوه ارایه و ظاهر نمایش اطلاعات در خروجی
خواهید داشت . این کنترل بصورت کامل از ویرایش ، وارد کردن اطلاعات جدید و پاک کردن
آنها به همراه صفحه بندی و مرتب سازی پشتیبانی می کند .
در این راهکار موارد زیر مطرح شده است :
- استفاده از کنترل ListView برای نمایش اطلاعات از پایگاه داده .
- اضافه کردن قابلیت مرتب سازی و صفحه بندی اطلاعات به کنترل ListView .
برای حمایت از این پروژه ، کتاب
راهکارهای موثر در ASP.Net را دانلود نمایید ...
پیش نیازها :
برای اجرای این راهکار نیاز دارید تا برنامه های زیر بر روی سایت شما نصب شده باشد
:
- Microsoft Visual Studio .
- Microsoft .NET Framework version 2.0 یا بالاتر ( همراه با ویژوال استودیو نصب می
شود ) .
- دسترسی و اتصال به پایگاه داده NORTHWND.MDF توسط SQL Server ( فایل پایگاه داده
در ضمیمه پروژه قرار دارد ) .
مرحله اول - طراحی یک سایت ASP.Net :
در مرحله اول از راهکار بایستی یک سایت ASP.Net را برای اجرای پروژه خود ایجاد نمایید
. فرض بر این است که سایت را قبلا ایجاد کرده و یا با نحوه اجرای آن آشنایی دارید ،
در غیر اینصورت به راهکار شماره 1-1 : نحوه ایجاد یک وب سایت ASP.Net در ویژوال استودیو
بروید .
مرحله دوم - نمایش و صفحه بندی اطلاعات توسط کنترل ListView :
برای نمایش اطلاعات بر روی یک صفحه ASP.Net به موارد زیر نیاز دارید :
- یک اتصال به منبع داده ای مثلا پایگاه داده . در این راهکار، ما یک ارتباط را به پایگاه
داده SQL Server با نام AdventureWorks ایجاد خواهیم کرد .
- یک کنترل سرور داده بر روی صفحه که به پایگاه داده متصل شده و اطلاعات را از آن دریافت
و یا به آن ارسال می کند. در این راهکار از یک کنترل SqlDataSource برای ارتباط با
پایگاه داده AdventureWorks استفاده خواهیم کرد .
- یک کنترل بر روی صفحه برای نمایش اطلاعات که در این راهکار از کنترل ListView استفاده
خواهیم کرد .
نحوه نمایش و صفحه بندی اطلاعات توسط کنترل ListView :
- اگر سایت شما از قبل دارای پوشه App_Data نیست ، بر روی نام سایت کلیک راست کرده و
با انتخاب گزینه Add ASP.NET Folder و سپس پوشه App_Data ،آن را به سایت اضافه کنید
.
- در منوی Solution Explorer ، بر روی پوشه App_Data کلیک راست کرده و گزینه Add Existing
Item را انتخاب کنید . پنجره Add Existing Item باز می شود .
- از طریق پنجره باز شده ، فایل پایگاه داده AdventureWorks_Data.mdf را که دانلود کرده
اید را پیدا نموده و به پوشه اضافه نمایید .
- مجددا بر روی نام وب سایت در منوی Solution Explorer کلیک راست کرده و این بار گزینه
Add New Item را انتخاب کنید . پنجره Add New Item باز می شود .
- از بخش Installed Templates ، زبان C# یا VB را انتخاب کرده و سپس یک صفحه Web Form
با نام Sample.aspx را به سایت اضافه کنید .
- در صفحه جدید ایجاد شده به حالت Design رفته و از منوی Toolbox بخش Data ، یک کنترل
ListView را بر روی صفحه قرار دهید .
- از بخش Common ListView Tasks ، از منوی کشویی Choose Data Source گزینه <New data
source> را انتخاب کنید . مطابق تصویر زیر :
- پنجره Data Source Configuration باز می شود .
- گزینه Database را انتخاب کنید ، مطابق تصویر زیر :
- در بخش Specify an ID for the data source ، یک نام پیش فرض با مقدار SqlDataSource1
قرار دارد ، آن را بدون تغییر رها کنید ، سپس OK را بزنید .
- پنجره Configure Data Source باز می شود . از زیر بخش ? Which data connection should
your application use to connect to a database گزینه پایگاه داده AdventureWorks_Data.mdf
را از لیست انتخاب کنید .
- بر روی گزینه Next کلیک نمایید . ویزاردی باز می شود که نمایش دهنده یک صفحه
است . در آن صفحه می توانید تعیین کنید که connection string در فایل web.config سایت
ذخیره شود یا درون خود صفحه . ذخیره connection string در فایل web.config دو مزیت
عمده دارد :
- دارای امنیت بیشتری نسبت به ذخیره در خود صفحه است .
- می توانید از آن connection string در صفحات دیگر نیز به دفعات استفاده نمایید .
- مطمین شوید که گزینه Yes, save this connection as انتخاب شده و سپس کلید Next
را بزنید . این کار connection string ، را با نام NorthwindConnectionString ، در
فایل web.config ذخیره می کند . می توانید نام آن را نیز به نام دلخواه تغییر دهید
.
- ویزارد در مرحله بعدی صفحه ای را به شما نمایش می دهد که در آن می توانید تعیین نمایید
که چه اطلاعاتی را می خواهید از پایگاه داده دریافت کنید . گزینه Specify a custom
SQL statement or stored procedure از میان دو گزینه موجود ، انتخاب کنید . سپس دکمه
Next را بزنید . مطابق تصویر زیر :
- در بخش Define Custom Statements or Stored Procedures ، کد SQL زیر را وارد نمایید
که اطلاعات query مورد نظرتان را از پایگاه داده AdventureWorks دریافت می کند
.
|
کد
|
SELECT [CustomerID], [CompanyName], [ContactName], [PostalCode]
FROM [Customers]"
|
- شما همچنین می توانید از ابزار Query Builder برای ساخت یک Query ( ابزار جستجو در
پایگاه داده ) استفاده نموده و دستورات کامل تری را تعیین کنید .
- بر روی گزینه Next کلیک کرده و سپس با کلیک بر روی گزینه Test Query مطمین شوید اطلاعاتی
را که می خواهید از پایگاه داده دریافت می کنید . سپس دکمه Finish را بزنید .
- ویزارد در اینجا ، یک کنترل SqlDataSource را ایجاد و به صفحه اضافه می کند . کنترل
ListView که بعدا در این راهکار به صفحه اضافه خواهیم نمود ، از این کنترل برای اتصال
به پایگاه داده استفاده می کند .
راهنمایی : اگر به بخش properties کنترل SqlDataSource بروید خواهید دید که برنامه
بصورت اتوماتیک مقادیر لازم برای خواص ConnectionString و SelectCommand را ایجاد کرده
است .
- بر روی کنترل ListView کلیک راست کرده و گزینه Show Smart Tag را انتخاب کنید . از
منوی Common ListView Tasks، گزینه Configure ListView را انتخاب کنید . پنجره Configure
ListView باز می شود . گزینه Ebable Paging را انتخاب نمایید ، این گزینه قابلیت صفحه
بندی اطلاعات را به کنترل اضافه می کند .
- شما همچنین ممکن است بخواهید قالب خاصی را برای نمایش اطلاعات در کنترل ListView انتخاب
نمایید . این کار باعث زیباتر شدن خروجی کنترل و مرور بهتر اطلاعات می شود . برای این
منظور از بخش Select a Style، یک قالب را برای مثال Colorful را انتخاب نمایید . هماندد
تصویر زیر :
- برنامه بصورت اتوماتیک ، خروجی کنترل را بر حسب قالب انتخاب شده و فیلدهای آن ، مطابق
عکس زیر ایجاد می نماید .
- در این مرحله ، میخواهیم کنترل ListView را تست کرده از کارایی آن اطمینان حاصل کنیم
. برای این منظور کنترل CTRL + F5 را فشار دهید . کنترل ListView اطلاعات فیلدهای
CustomerID, CompanyName, ContactName, PostalCode را نمایش می دهد . برای رفتن به
صفحات بعدی و قبلی ، بر روی دکمه های پایین کنترل کلیک نمایید .
اضافه کردن قابلیت مرتب سازی داده ها در ListView :
برای اضافه کردن قابلیت مرتب سازی اطلاعات نمایش داده شده توسط کنترل ListView بر حسب
مقادیر یک فیلد ، کارهای زیر را انجام دهید :
- صفحه sample.aspx را باز کرده و به نمای source کد بروید .
- از بخش Standard منوی Toolbox ، دو کنترل فرمان Button را بعد از عنصر table که درون
المنت LayoutTemplate کنترل ListView است ، قرار دهید .
- در منوی Properties ، خواص زیر را در کنترل ها بصورت زیر تغییر دهید :
برای کنترل فرمان اول ، مقدار خاصیت Text را به "Sort by Name" و مقدار خاصیت CommandName
را به Sort تغییر دهید . همچنین خاصیت CommandArgument را بر روی مقدار "ContactName"
تنظیم نمایید .
برای کنترل فرمان دوم نیز ، مقدار خاصیت Text را به "Sort by ID" و مقدار خاصیت CommandName
را به Sort تغییر دهید . همچنین خاصیت CommandArgument را بر روی مقدار "CustomerID"
تنظیم نمایید .
راهنمایی : تنظیم مقدار خاصیت CommandArgument کنترل دکمه فرمان ها
بر روی Sort به معنای مرتب سازی تنظیم شده بوده و عمل مرتب سازی را در کنترل
ListView بر حسب فیلد تعیین شده ، انجام می دهند .
- فایل را ذخیره نمایید .
مرحله آخر - تست مرتب سازی داده در کنترل ListView :
- کلیدهای CTRL + F5 را برای اجرای صفحه فشار دهید .
- دکمه فرمان های Sort by Name و Sort by ID را برای مشاهده نحوه مرتب سازی اطلاعات کلیک
نمایید .
- یک دکمه فرمان را بصورت متناوب برای تغییر جهت مرتب سازی از بالا به پایین و برعکس
کلیک نمایید .
دانلود فایل عملی پروژه و نسخه PDF راهکار
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :