آموزش طراحی وب ASP.Net 4
برنامه نویسی وب سرور دات نت

---

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

 راهکار 2 - 6 : ساخت صفحات داده ای گسترده تر در ASP.Net

مقدمه :

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

• اتصال یک کنترل کشویی drop-down list به پایگاه داده و نمایش اطلاعات .
• ایجاد فیلترهایی برای داده در SQL به وسیله عبارت های WHERE clause .
• نمایش اطلاعات فیلتر شده بر مبنای گزینه انتخابی کاربر در کنترل drop-down list .
• نمایش جزئیات اطلاعات یک رکورد تنها توسط کنترل DetailsView .
• انتخاب یک رکورد در صفحه اول و نمایش اطلاعات رکورد مرتبط با آن در صفحه دوم .

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

پیش نیازها :

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

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

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

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

مرحله دوم - اتصال به پایگاه داده SQL Server :

برای کار با داده ها ، در مرحله اول شما باید به پایگاه داده متصل شوید . در این راهکار ، شما یک ارتباط ( Connection ) مستقل از صفحات و کنترل های پروژه ، ایجاد خواهید کرد .

نحوه ایجاد اتصال به SQL Server :

1. کلیدهای  CTRL + ALT + S را همزمان فشار دهید تا پنجره Database Explorer باز شود . در پنجره باز شده ، بر روی گزینه Data Connections کلیک راست کرده و گزینه Add Connection را انتخاب نمایید . پنجره Change Data Source باز می شود . در این پنجره گزینه Microsoft SQL Server را انتخاب کرده و OK را بزنید .
   
   
2. در پنجره Add Connection ، کارهای زیر را انجام دهید :
   • نام کامپیوتر سرور مورد نظر برای اتصال را مستقیما وارد کرده یا از کادر کشویی موجود انتخاب نمایید . برای کامپیوتر خودتان ، عبارت ( local ) را وارد کنید .
   • گزینه Use SQL Server Authentication یا Use Windows Server Authentication را انتخاب کنید .
   • در صورت انتخاب گزینه Use SQL Server Authentication یک نام کاربری و رمز عبور مورد نظرتان را وارد کنید ، سپس با انتخاب گزینه Save my password ، آن را ذخیره کنید .
   • گزینه Northwind را به عنوان نام پایگاه داده انتخاب کنید .
3. بر روی Test Connection ، کلیک کرده و با دیدن عبارت OK مطمئن شوید که ارتباط شما درست کار می کند .

اکنون ارتباط ( Connection ) شما به Server اضافه شده است .

مرحله سوم - استفاده از یک کادر کشویی ( drop-down list ) :

1.  به صفحه Default.aspx سایت رفته و به حالت Design بروید .
2.  عبارت Select Products By Category را به عنوان هدر صفحه تعیین کنید .
3.  از قسمت Standard منوی ToolBox ،یک کنترل DropDownList را بر روی صفحه قرار دهید .
4.  از لیست DropDownList Tasks ،گزینه Enable AutoPostBack را علامت بزنید . این کار باعث می شود تا با هربار تغییر آیتم کنترل DropDownList ، صفحه به سرور Post شود .
5.  مجددا از لیست DropDownList Tasks ، گزینه Choose Data Source را انتخاب نمایید . پنجره Choose Data Source باز می شود .
   
   
6.  از لیست Select a data source ، گزینه <New Data Source> را انتخاب نموده ، پنجره Data Source Configuration Wizard باز می شود . از پنجره باز شده گزینه Database را انتخاب کنبد . انتخاب این گزینه تعیین می کند که شما می خواهید اطلاعات لازم برای کنترل را از یک پایگاه داده که دستورات SQL را پشتیبانی می کند مثل SQL Server ، دریافت نمایید .
   در قسمت Specify an ID for the data source ،یک نام پیش فرض برای کنترل داده ( SqlDataSource ) نمایش داده شده . آن را بدون تغییر رها کنید .
   
   
   
   
7.  OK را کلیک نمایید . ویزارد صفحه Configure Data Source - SqlDataSource1 را به شما نمایش می دهد که از طریق آن می توانید یک Data Connection را انتخاب نمایید . از کادر کشویی موجود ، نام پایگاه داده ،Northwind را که قبلا در همین راهکار ساختیم را انتخاب کنید . گزینه Next را بزنید .
8.  ویزارد اکنون صفحه ای را به شما نشان می دهد که باید تعیین نمایید تا connection string در فایل web.config  سایت ذخیره شود . مطمئن شوید که گزینه Yes, save this connection as انتخاب شده و گزینه Next را بزنید . اکنون ویزارد صفحه ای دیگر را نمایش می دهد که بوسیله آن می توانید اطلاعاتی که می خواهید از پایگاه داده دریافت کنید را تعیین کنید .
9.  از کادر Name در زیر لیست Table or View Options ،گزینه Categories را انتخاب کنید .
10.  از جعبه Columns ، گزینه های CategoryID ، CategoryName را انتخاب کرده و گزینه Next را بزنید .
11.  با زدن دکمه Test Query ، مطمئن شوید اطلاعات مورد نظرتان در خروجی می آید . سپس گزینه Finish را بزنید .
12.  پنجره Data Source Configuration Wizard با نام کنترل سرور داده ( Data Source ) که تنظیم کرده اید ، نمایش داده می شود . از کادر Select a data field to display in the DropDownList ، گزینه CategoryName را انتخاب کنید . این کار تعیین می کند که اطلاعات فیلد CategoryName به عنوان متن آیتم های کادر کشویی کنترل DropDownList نمایش داده شود .
13. همچنین از گزینه Select a data field for the value of the DropDownList ، گزینه CategoryID را انتخاب کنید . این کار باعث می شود که اطلاعات فیلد CategoryID به عنوان مقدار آیتم های کادر کنترل DropDownList ، استفاده شود . در نهایت گزینه OK را بزنید .

استفاده از یک کنترل GridView برای نمایش اطلاعات :

اکنون می توانید یک کنترل GridView را به صفحه اضافه نمایید تا اطلاعات جدول را نمایش دهد . هدف این است که هنگامیکه کاربر دسته ای از محصولات را در کادر کشویی کنترل drop-down list انتخاب می کند ، کنترل GridView اطلاعات آن دسته از محصولات در پایگاه داده را نمایش دهد .
نحوه استفاده از کنترل GridView برای نمایش اطلاعات مورد نظر :

1. مجددا صفحه Default.apsx را باز کرده و به نمای Design بروید .
2. از بخش کنترل های Data منوی Toolbox ، یک کنترل GridView را بر روی صفحه قرار دهید .
3. از منوی GridView Tasks که بصورت یک فلش بر روی کنترل GridView است ، گزینه <New Data Source> را از کادر انتخابی Choose Data Source انتخاب کنید . پنجره Data Source Configuration Wizard باز می شود .
4. گزینه Database را انتخاب نمایید . در بخش Specify an ID for the data source ، یک کنترل سرور داده بصورت پیش فرض با نام ( SqlDataSource2 ) قرار داده شده است ، آن را همانطور رها کنید .
5. از کادر کشویی connections ، ارتباط ( NorthwindConnectionString ) که قبلا در همین راهکار ساخته اید را انتخاب کنید . بر روی گزینه Next کلیک نمایید .
6. ویزارد صفحه Configure Data Source - SqlDataSource2 را برای شما باز می کند که در آن می توانید یک دستور SQL را تعیین نمایید .
7. از لیست Name ،گزینه Products را انتخاب نمایید . همچنین از جعبه Columns ، گزینه های ProductID, ProductName و CategoryID را انتخاب نمایید .
8. گزینه WHERE را کلیک نمایید . پنجره Add WHERE Clause باز می شود .
9. از لیست Column ، گزینه CategoryID را انتخاب نمایید . از لیست عملگرها ( Operator ) ، عملگر = را انتخاب کنید.
10. از لیست Source ، گزینه Control را انتخاب کنید . در قسمت Parameter Properties ، از لیست Control ID ، کنترل DropDownList1 را انتخاب کنید . دو مرحله آخری که انجام دادیم ، تعیین می کند که query ، مقدار فیلد search را از کنترل DropDownList1 ، که قبلا به صفحه اضافه کردیم ، دریافت می کند . گزینه Add و سپس OK را بزنید تا پنجره Add WHERE Clause بسته شود . در نهایت پنجره WHERER به این صورت می شود :
    
    
11. بر روی گزینه Next کلیک نمایید . در صفحه ای که باز می شود گزینه Test Query را کلیک نمایید . پنجره ای باز می شود که از شما می خواهد مقداری را در کادر متن عبارت WHERE clause وارد نمایید .
12. مقدار 4 را وارد کرده ، گزینه OK را بزنید . کنترل محصولات مرتبط با گروه 4 را نمایش می دهد .
13. با زدن دکمه Finish ، ویزارد را تمام کنید . سپس با زدن دکمه های CTRL + F5 صفحه را تست نمایید .

نمایش اطلاعات Master/Detail در یک صفحه :

در این بخش از راهکار ، شما اطلاعاتی را از جداول مرتبط به هم در یک صفحه نمایش خواهید داد . جدول اصلی ( master ) در یک کنترل GridView که کاربر در آن می تواند سطرها ، را بصورت تکی انتخاب نماید ، نمایش داده می شود .
وقتی وی کار فوق را انجام می دهد ، اطلاعات مرتبط با گزینه یا گزینه های انتخابی ، در یک کنترل قابل اسکرول در جایی بر روی صفحه نمایش داده خواهد شد . برای این منظور در پایگاه داده ، از جدول Categories به عنوان جدول اصلی یا مستر و از جدول Products به عنوان جدول جزئیات ( details table ) استفاده خواهیم کرد .

نحوه نمایش رکوردهای اصلی :

1. یک صفحه جدید با نام MasterDetails2.aspx  را به پروژه وب سایت اضافه نمایید .
2. در صفحه جدید به حالت Design رفته و عبارت Master/Detail Page را در بالای آن در قسمت عنوان تایپ کنید .
3. از بخش Data ، منوی Toolbox یک کنترل GridView را بر روی صفحه قرار دهید .
4. از قسمت GridView Tasks که بصورت یک فلش بر روی کنترل دیده می شود ، لیست Choose Data Source را انتخاب کرده ، سپس بر روی گزینه <New Data Source> کلیک نمایید تا منبع داده ای لازم را برای کنترل GridView تعیین کنید . مراحل زیر را انجام دهید :
   • گزینه Database را انتخاب کرده و گزینه OK را بزنید .
   • از لیست کشویی connection ، ارتباط NorthwindConnectionString ای که قبلا در همین راهکار ایجاد و ذخیره کرده بودید را انتخاب نمایید .
   • بر روی گزینه Next کلیک نمایید . از لیست Name ، گزینه Categories را انتخاب نمایید .
   • از جعبه Columns ، گزینه های CategoryName و CategoryID را انتخاب کنید .
   • گزینه Next و سپس Finish را فشار دهید .
5. مجددا کنترل GridView را انتخاب کرده و از بخش GridView Tasks گزینه Edit Columns را انتخاب کنید . کادر Fields نمایش داده می شود .
6. در زیر بخش Available Fields ، گره گزینه Command Field را باز کرده ، Select را انتخاب کرده و گزینه Add را کلیک نمایید تا آن به لیست Selected Fields اضافه شود .
7. در لیست Selected Fields ، گزینه Select را انتخاب کرده سپس در خاصیت CommandField کنترل GridView ، مقدار خاصیت SelectText را به Details تغییر دهید .
8. دکمه OK را زده و پنجره Fields را ببندید . یک ستون جدید به نام Details با یک کنترل لینک به جدول GridView اضافه خواهد شد .
9. کنترل GridView را انتخاب کرده و مطمئن شوید مقدار خاصیت DataKeyNames آن بر روی CategoryID تنظیم شده است . این کار مشخص می کند هنگامی که یک سطر یا رکورد را در کنترل GridView انتخاب می کنید ، ASP.NET می تواند کلید رکورد Categories که در حال حاضر در حال نمایش است را پیدا کند .
   کنترل GridView این امکان را به شما می دهد تا یک category مستقل را انتخاب کنید . مرحله بعدی اضافه کردن یک کنترل DetailsView است که اطلاعات هر رکورد را بصورت جزئیات نمایش خواهد داد . ( محصولات مرتبط با category انتخاب شده ) . کنترل DetailsView ، از یک دستور و کنترل دیگر SQL برای انجام کارهای خود استفاده می کند که در مرحله بعدی آن را شرح خواهیم داد .

مرحله - تعیین دستور SQL لازم برای نمایش رکوردهای مربوطه :

1. در زیر کنترل SqlDataSource1 ، دکمه Enter را بزنید تا فاصله لازم برای قرار دادن کنترل های جدید فراهم شود .
2. از بخش Data منوی Toolbox یک کنترل DetailsView را بر روی صفحه قرار دهید .
3. کنترل DetailsView را برای استفاده از یک کنترل سرور داده دوم بصورت زیر تنظیم نمایید .
   • از لیست Choose Data Source ، گزینه <New Data Source> را انتخاب کنید .
   • گزینه Database را انتخاب کرده و سپس گزینه OK را بزنید .
   • در لیست کشویی connection ارتباط NorthwindConnectionString که قبلا در همین راهکار ایجاد کرده بودید را انتخاب نموده . گزینه Next را بزنید .
   • از لیست Name که زیر قسمت Table or View Options قرار دارد ، گزینه Products را انتخاب کنید .
   • از جعبه Columns ، کادرهای ProductID, ProductName و CategoryID را انتخاب کنید .
   • گزینه WHERE را فشار دهید . پنجره محاوره ای Add WHERE Clause باز می شود .
   • از لیست Column ، گزینه CategoryID را انتخاب کنید .
   • از لیست عملگرها یا Operator علامت = و از لیست Source نیز گزینه Control را .
   • همچنین از لیست ControlID که در زیر بخش Parameter Properties قرار دارد گزینه GridView1 را انتخاب کنید . این کد باعث می شود تا کنترل DetailsView پارامتر خود را از المنت انتخاب شده در کنترل GridView دریافت کند .
4. گزینه Add و سپس OK را بزنید تا پنجره Add WHERE Clauses بسته شود . سپس Next را بزنید .
5. در صفحه بعدی بر روی گزینه Test Query. کلیک نمایید . ویزارد صفحه ای را برای شما نشان می دهد و از شما می خواهد تا مقداری را برای عبارت WHERE clause در کادر متن مربوطه وارد نمایید .
6. درون کادر گفته شده ، مقدار 4 را وارد کرده و دکمه Ok را بزنید . محصولات ( products ) مرتبط با Category تعیین شده ، نمایش داده خواهد شد . بر روی Finish کلیک نمایید .
7. از قسمت DetailsView Tasks که بصورت یک فلش بر روی کنترل قابل مشاهده است ، گزینه Enable Paging را علامت بزنید . این کار کنترل را صفحه بندی کرده و به شما این امکان را می دهد تا در بین محصولات حرکت نمایید .
8. ترجیحا می توانید به قسمت Properties کنترل DetailView رفته و مقدار خاصیت PagerSettings آن را به مقدار دیگری تغییر دهید . بصورت پیش فرض برای حرکت بین رکوردهای کنترل باید بر روی شماره صفحات کلیک نمایید . اما می توانید کاری کنید تا کنترل دارای دکمه های next و previous باشد.

نمایش اطلاعات اصلی و فرعی ( Master/Detail Data ) در صفحات جداگانه :

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

1.  یک صفحه جدید به نام MasterCustomers.aspx را به سایت اضافه نمایید .
2.  به حالت Design رفته و عبارت Customers را در بالای صفحه تایپ کنید .
3.  از بخش Data منوی Toolbox برنامه یک کنترل GridView را روی صفحه قرار دهید .
4.  از بخش GridView Tasks کنترل GridView ، گزینه <New Data Source> را از لیست Choose Data Source برای انجام امور زیر انتخاب کنید .
   • گزینه Database را انتخاب نمایید .
   • به پایگاه داده Northwind وصل شوید ( با اتصال NorthwindConnectionString )
   • فیلدهای CustomerID و CompanyName و City را از جدول Customers انتخاب کنید .
5.  بصورت دلخواه از منوی GridView Tasks ، عبارت Enable paging را تیک بزنید .
6.  مجددا از بخش GridView Tasks ، گزینه Edit Columns را انتخاب نمایید . کادر محاوره ای Fields باز می شود .
7.  علامت گزینه Auto-Generate Fields را بردارید .
8.  از زیربخش Available Fields ،گزینه HyperLink Field را انتخاب کرده و برای افزودن ویژگی های زیر ، گزینه Add را فشار دهید :
   

   Value	Property
   Details	Text
   CustomerID این خاصیت تعتین می کندکه کنترل HyperLink بایستی مقدار خود را از فیلد CustomerID دریافت نماید	DataNavigateUrlFields
   {DetailsOrders.aspx?custid={0 این کد لینکی که را می سازد که به صفحه DetailsOrders.aspx رفته و همراه با آن یک پارامتر یا query string نیز فرستاده می شود که CustID نام داشته و مقدار فیلد و خاصیت DataNavigateUrlFields را به صفحه مقصد ارسال می کند .	DataNavigateUrlFormatString

9.  گزینه OK را برای پایان جعبه Fields انتخاب نمایید .

حال شما می توانید صفحه دوم یا ( details page ) را طراحی نمایید که مقدار خود را از صفحه اصلی یا ( master page ) دریافت می کند .

ساخت صفحه مقصد ( details page ) :

1. صفحه ای جدید DetailsOrders.aspx را به سایت اضافه کرده و به نمای Design بروید . سپس در بالای صفحه عبارت DetailsOrders را قرار دهید .
2. از بخش Data ، منوی Toolbox یک کنترل GridView بر روی صفحه قرارد دهید .
3. از بخش GridView Tasks که بصورت یک فلش بر روی کنترل قرار دارد ، گزینه <New Data Source> را از لیست Choose Data Source انتخاب کنید .
4. در لیست Select a data source type ، گزینه Database را انتخاب کرده و سپس OK نمایید .
5. از لیست connection ، connection ای که قبلا در همین راهکار ساخته بوده اید را انتخاب کنید .( NorthwindConnectionString ) سپس گزینه Next را بزنید .
6. ویزارد صفحه ای را به شما نشان می دهد که از طریق آن می توانید یک دستور جدید SQL بسازید .
7. از لیست Name ، گزینه Orders را انتخاب کنید . همچنین از جعبه Columns ، گزینه های OrderID, CustomerID, and OrderDate را تیک بزنید .
8. عبارت WHERE را کلیک کنید . از لیست Columns گزینه CustomerID را و از لیست Operator علامت = را انتخاب کنید .
9. همچنین از لیست Source ، گزینه QueryString را انتخاب کنید . انتخاب این گزینه تعیین می کند کخ مقادیر رکوردهای نمایش داده شده بر مبنای اطلاعات دریافتی از QueryString ( اطلاعات ارسالی از صفحه قبل ) باشد .
10. در زیر قسمت Parameter Properties ، در کادر QueryString field عبارت custid را تایپ کنید . این کار باعث می شود تا Query  این صفحه ، مقدار Custumer ID را از مقدار query string که از کلیک بر روی گزینه Details   کنترل GridView  تولید شده است را دریافت کند .
11. گزینه Add و سپس OK را برای بسته شدن پنجره Add WHERE Clause بزنید .
12. از قسمت Standard منوی Toolbox ، یک کنترل Hyperlink را روی صفحه قرار داده و مقدار خاصیت های Text آن را روی Return to Customers و مقدار خاصیت NavigateUrl را به MasterCustomers.aspx تغییر دهید .
13. اکنون می توانید صفحه های master-detail را تست کنید .

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

---

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

---

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

آیا مطالب این صفحه برای شما مناسب و مفید بوده است : بلهخیر نام :                  آدرس Email :       نظر شما :     سوال امنیتی : پایتخت ایران ؟