راهکارهای موثر در ASP.Net > راهکارهای کار با داده در ASP.Net
راهکار 2 - 6 : ساخت صفحات داده ای گسترده تر در ASP.Net
مقدمه :
بسیاری از صفحات و برنامه های تحت وب ، اطلاعات را در راه های مختلف و از منابع گوناگون
مثل جداول مرتبط به هم نمایش می دهند . این راهکار ، راه های کار با کنترل های چندگانه
داده ای ، استخراج اطلاعات از چندین جدول و یا ارسال اطلاعات به صفحه ای دیگر را نمایش
می دهد . در این راهکار ، امور زیر آموزش داده شده است :
- اتصال یک کنترل کشویی drop-down list به پایگاه داده و نمایش اطلاعات .
- ایجاد فیلترهایی برای داده در SQL به وسیله عبارت های WHERE clause .
- نمایش اطلاعات فیلتر شده بر مبنای گزینه انتخابی کاربر در کنترل drop-down list .
- نمایش جزئیات اطلاعات یک رکورد تنها توسط کنترل DetailsView .
- انتخاب یک رکورد در صفحه اول و نمایش اطلاعات رکورد مرتبط با آن در صفحه دوم .
برای حمایت از این پروژه ، کتاب
راهکارهای موثر در ASP.Net را دانلود نمایید ...
پیش نیازها :
برای اجرای این راهکار نیاز دارید تا برنامه های زیر بر روی سایت شما نصب شده باشد
:
- Microsoft Visual Studio .
- Microsoft .NET Framework version 2.0 یا بالاتر ( همراه با ویژوال استودیو نصب می
شود ) .
- دسترسی و اتصال به پایگاه داده Northwind توسط SQL Server ( فایل پایگاه داده
در ضمیمه پروژه قرار دارد ) .
مرحله اول - طراحی یک سایت ASP.Net :
در مرحله اول از راهکار بایستی یک سایت ASP.Net را برای اجرای پروژه خود ایجاد نمایید
. فرض بر این است که سایت را قبلا ایجاد کرده و یا با نحوه اجرای آن آشنایی دارید ،
در غیر اینصورت به راهکار شماره 1-1 : نحوه ایجاد یک وب سایت ASP.Net در ویژوال استودیو
بروید .
مرحله دوم - اتصال به پایگاه داده SQL Server :
برای کار با داده ها ، در مرحله اول شما باید به پایگاه داده متصل شوید . در این راهکار
، شما یک ارتباط ( Connection ) مستقل از صفحات و کنترل های پروژه ، ایجاد خواهید کرد
.
نحوه ایجاد اتصال به SQL Server :
- کلیدهای CTRL + ALT + S را همزمان فشار دهید تا پنجره Database Explorer باز
شود . در پنجره باز شده ، بر روی گزینه Data Connections کلیک راست کرده و گزینه Add
Connection را انتخاب نمایید . پنجره Change Data Source باز می شود . در این پنجره
گزینه Microsoft SQL Server را انتخاب کرده و OK را بزنید .
- در پنجره Add Connection ، کارهای زیر را انجام دهید :
- نام کامپیوتر سرور مورد نظر برای اتصال را مستقیما وارد کرده یا از کادر کشویی موجود
انتخاب نمایید . برای کامپیوتر خودتان ، عبارت ( local ) را وارد کنید .
- گزینه Use SQL Server Authentication یا Use Windows Server Authentication را انتخاب
کنید .
- در صورت انتخاب گزینه Use SQL Server Authentication یک نام کاربری و رمز عبور مورد
نظرتان را وارد کنید ، سپس با انتخاب گزینه Save my password ، آن را ذخیره کنید .
- گزینه Northwind را به عنوان نام پایگاه داده انتخاب کنید .
- بر روی Test Connection ، کلیک کرده و با دیدن عبارت OK مطمئن شوید که ارتباط شما درست
کار می کند .
اکنون ارتباط ( Connection ) شما به Server اضافه شده است .
مرحله سوم - استفاده از یک کادر کشویی ( drop-down list ) :
- به صفحه Default.aspx سایت رفته و به حالت Design بروید .
- عبارت Select Products By Category را به عنوان هدر صفحه تعیین کنید .
- از قسمت Standard منوی ToolBox ،یک کنترل DropDownList را بر روی صفحه قرار دهید
.
- از لیست DropDownList Tasks ،گزینه Enable AutoPostBack را علامت بزنید . این
کار باعث می شود تا با هربار تغییر آیتم کنترل DropDownList ، صفحه به سرور Post شود
.
- مجددا از لیست DropDownList Tasks ، گزینه Choose Data Source را انتخاب نمایید
. پنجره Choose Data Source باز می شود .
- از لیست Select a data source ، گزینه <New Data Source> را انتخاب نموده
، پنجره Data Source Configuration Wizard باز می شود . از پنجره باز شده گزینه Database
را انتخاب کنبد . انتخاب این گزینه تعیین می کند که شما می خواهید اطلاعات لازم برای
کنترل را از یک پایگاه داده که دستورات SQL را پشتیبانی می کند مثل SQL Server ، دریافت
نمایید .
در قسمت Specify an ID for the data source ،یک نام پیش فرض برای کنترل داده ( SqlDataSource
) نمایش داده شده . آن را بدون تغییر رها کنید .
- OK را کلیک نمایید . ویزارد صفحه Configure Data Source - SqlDataSource1 را
به شما نمایش می دهد که از طریق آن می توانید یک Data Connection را انتخاب نمایید
. از کادر کشویی موجود ، نام پایگاه داده ،Northwind را که قبلا در همین راهکار ساختیم
را انتخاب کنید . گزینه Next را بزنید .
- ویزارد اکنون صفحه ای را به شما نشان می دهد که باید تعیین نمایید تا connection
string در فایل web.config سایت ذخیره شود . مطمئن شوید که گزینه Yes, save this
connection as انتخاب شده و گزینه Next را بزنید . اکنون ویزارد صفحه ای دیگر را نمایش
می دهد که بوسیله آن می توانید اطلاعاتی که می خواهید از پایگاه داده دریافت کنید را
تعیین کنید .
- از کادر Name در زیر لیست Table or View Options ،گزینه Categories را انتخاب
کنید .
- از جعبه Columns ، گزینه های CategoryID ، CategoryName را انتخاب کرده و گزینه
Next را بزنید .
- با زدن دکمه Test Query ، مطمئن شوید اطلاعات مورد نظرتان در خروجی می آید .
سپس گزینه Finish را بزنید .
- پنجره Data Source Configuration Wizard با نام کنترل سرور داده ( Data Source
) که تنظیم کرده اید ، نمایش داده می شود . از کادر Select a data field to display
in the DropDownList ، گزینه CategoryName را انتخاب کنید . این کار تعیین می کند که
اطلاعات فیلد CategoryName به عنوان متن آیتم های کادر کشویی کنترل DropDownList نمایش
داده شود .
- همچنین از گزینه Select a data field for the value of the DropDownList ، گزینه CategoryID
را انتخاب کنید . این کار باعث می شود که اطلاعات فیلد CategoryID به عنوان مقدار آیتم
های کادر کنترل DropDownList ، استفاده شود . در نهایت گزینه OK را بزنید .
استفاده از یک کنترل GridView برای نمایش اطلاعات :
اکنون می توانید یک کنترل GridView را به صفحه اضافه نمایید تا اطلاعات جدول را نمایش
دهد . هدف این است که هنگامیکه کاربر دسته ای از محصولات را در کادر کشویی کنترل drop-down
list انتخاب می کند ، کنترل GridView اطلاعات آن دسته از محصولات در پایگاه داده را
نمایش دهد .
نحوه استفاده از کنترل GridView برای نمایش اطلاعات مورد نظر :
- مجددا صفحه Default.apsx را باز کرده و به نمای Design بروید .
- از بخش کنترل های Data منوی Toolbox ، یک کنترل GridView را بر روی صفحه قرار دهید
.
- از منوی GridView Tasks که بصورت یک فلش بر روی کنترل GridView است ، گزینه <New
Data Source> را از کادر انتخابی Choose Data Source انتخاب کنید . پنجره Data Source
Configuration Wizard باز می شود .
- گزینه Database را انتخاب نمایید . در بخش Specify an ID for the data source ، یک
کنترل سرور داده بصورت پیش فرض با نام ( SqlDataSource2 ) قرار داده شده است ، آن را
همانطور رها کنید .
- از کادر کشویی connections ، ارتباط ( NorthwindConnectionString ) که قبلا در همین
راهکار ساخته اید را انتخاب کنید . بر روی گزینه Next کلیک نمایید .
- ویزارد صفحه Configure Data Source - SqlDataSource2 را برای شما باز می کند که در
آن می توانید یک دستور SQL را تعیین نمایید .
- از لیست Name ،گزینه Products را انتخاب نمایید . همچنین از جعبه Columns ، گزینه های
ProductID, ProductName و CategoryID را انتخاب نمایید .
- گزینه WHERE را کلیک نمایید . پنجره Add WHERE Clause باز می شود .
- از لیست Column ، گزینه CategoryID را انتخاب نمایید . از لیست عملگرها ( Operator
) ، عملگر = را انتخاب کنید.
- از لیست Source ، گزینه Control را انتخاب کنید . در قسمت Parameter Properties ، از
لیست Control ID ، کنترل DropDownList1 را انتخاب کنید . دو مرحله آخری که انجام دادیم
، تعیین می کند که query ، مقدار فیلد search را از کنترل DropDownList1 ، که قبلا
به صفحه اضافه کردیم ، دریافت می کند . گزینه Add و سپس OK را بزنید تا پنجره Add WHERE
Clause بسته شود . در نهایت پنجره WHERER به این صورت می شود :
- بر روی گزینه Next کلیک نمایید . در صفحه ای که باز می شود گزینه Test Query را کلیک
نمایید . پنجره ای باز می شود که از شما می خواهد مقداری را در کادر متن عبارت WHERE
clause وارد نمایید .
- مقدار 4 را وارد کرده ، گزینه OK را بزنید . کنترل محصولات مرتبط با گروه 4 را نمایش
می دهد .
- با زدن دکمه Finish ، ویزارد را تمام کنید . سپس با زدن دکمه های CTRL + F5 صفحه را
تست نمایید .
نمایش اطلاعات Master/Detail در یک صفحه :
در این بخش از راهکار ، شما اطلاعاتی را از جداول مرتبط به هم در یک صفحه نمایش خواهید
داد . جدول اصلی ( master ) در یک کنترل GridView که کاربر در آن می تواند سطرها ،
را بصورت تکی انتخاب نماید ، نمایش داده می شود .
وقتی وی کار فوق را انجام می دهد ، اطلاعات مرتبط با گزینه یا گزینه های انتخابی ،
در یک کنترل قابل اسکرول در جایی بر روی صفحه نمایش داده خواهد شد . برای این منظور
در پایگاه داده ، از جدول Categories به عنوان جدول اصلی یا مستر و از جدول Products
به عنوان جدول جزئیات ( details table ) استفاده خواهیم کرد .
نحوه نمایش رکوردهای اصلی :
- یک صفحه جدید با نام MasterDetails2.aspx را به پروژه وب سایت اضافه نمایید .
- در صفحه جدید به حالت Design رفته و عبارت Master/Detail Page را در بالای آن در قسمت
عنوان تایپ کنید .
- از بخش Data ، منوی Toolbox یک کنترل GridView را بر روی صفحه قرار دهید .
- از قسمت GridView Tasks که بصورت یک فلش بر روی کنترل دیده می شود ، لیست Choose Data
Source را انتخاب کرده ، سپس بر روی گزینه <New Data Source> کلیک نمایید تا
منبع داده ای لازم را برای کنترل GridView تعیین کنید . مراحل زیر را انجام دهید :
- گزینه Database را انتخاب کرده و گزینه OK را بزنید .
- از لیست کشویی connection ، ارتباط NorthwindConnectionString ای که قبلا در همین راهکار
ایجاد و ذخیره کرده بودید را انتخاب نمایید .
- بر روی گزینه Next کلیک نمایید . از لیست Name ، گزینه Categories را انتخاب نمایید
.
- از جعبه Columns ، گزینه های CategoryName و CategoryID را انتخاب کنید .
- گزینه Next و سپس Finish را فشار دهید .
- مجددا کنترل GridView را انتخاب کرده و از بخش GridView Tasks گزینه Edit Columns را
انتخاب کنید . کادر Fields نمایش داده می شود .
- در زیر بخش Available Fields ، گره گزینه Command Field را باز کرده ، Select را انتخاب
کرده و گزینه Add را کلیک نمایید تا آن به لیست Selected Fields اضافه شود .
- در لیست Selected Fields ، گزینه Select را انتخاب کرده سپس در خاصیت CommandField
کنترل GridView ، مقدار خاصیت SelectText را به Details تغییر دهید .
- دکمه OK را زده و پنجره Fields را ببندید . یک ستون جدید به نام Details با یک کنترل
لینک به جدول GridView اضافه خواهد شد .
- کنترل GridView را انتخاب کرده و مطمئن شوید مقدار خاصیت DataKeyNames آن بر روی CategoryID
تنظیم شده است . این کار مشخص می کند هنگامی که یک سطر یا رکورد را در کنترل GridView
انتخاب می کنید ، ASP.NET می تواند کلید رکورد Categories که در حال حاضر در حال نمایش
است را پیدا کند .
کنترل GridView این امکان را به شما می دهد تا یک category مستقل را انتخاب کنید .
مرحله بعدی اضافه کردن یک کنترل DetailsView است که اطلاعات هر رکورد را بصورت جزئیات
نمایش خواهد داد . ( محصولات مرتبط با category انتخاب شده ) . کنترل DetailsView ،
از یک دستور و کنترل دیگر SQL برای انجام کارهای خود استفاده می کند که در مرحله بعدی
آن را شرح خواهیم داد .
مرحله - تعیین دستور SQL لازم برای نمایش رکوردهای مربوطه :
- در زیر کنترل SqlDataSource1 ، دکمه Enter را بزنید تا فاصله لازم برای قرار دادن کنترل
های جدید فراهم شود .
- از بخش Data منوی Toolbox یک کنترل DetailsView را بر روی صفحه قرار دهید .
- کنترل 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 دریافت کند .
- گزینه Add و سپس OK را بزنید تا پنجره Add WHERE Clauses بسته شود . سپس Next را بزنید
.
- در صفحه بعدی بر روی گزینه Test Query. کلیک نمایید . ویزارد صفحه ای را برای شما نشان
می دهد و از شما می خواهد تا مقداری را برای عبارت WHERE clause در کادر متن مربوطه
وارد نمایید .
- درون کادر گفته شده ، مقدار 4 را وارد کرده و دکمه Ok را بزنید . محصولات ( products
) مرتبط با Category تعیین شده ، نمایش داده خواهد شد . بر روی Finish کلیک نمایید
.
- از قسمت DetailsView Tasks که بصورت یک فلش بر روی کنترل قابل مشاهده است ، گزینه Enable
Paging را علامت بزنید . این کار کنترل را صفحه بندی کرده و به شما این امکان را می
دهد تا در بین محصولات حرکت نمایید .
- ترجیحا می توانید به قسمت Properties کنترل DetailView رفته و مقدار خاصیت PagerSettings
آن را به مقدار دیگری تغییر دهید . بصورت پیش فرض برای حرکت بین رکوردهای کنترل باید
بر روی شماره صفحات کلیک نمایید . اما می توانید کاری کنید تا کنترل دارای دکمه های
next و previous باشد.
نمایش اطلاعات اصلی و فرعی ( Master/Detail Data ) در صفحات جداگانه :
در بخش پایانی راهکار ، ما گونه ای دیگراز نمایش اطلاعات را خواهیم ساخت . در این حالت
شما اطلاعات اصلی و فرعی را در صفحات جداگانه نمایش خواهید داد . اطلاعات اصلی و اولیه
در یک کنترل GridView که دارای یک لینک برای هر سطر بوده نمایش داده می شود . هنگامیکه
کاربر روی لینک های آن کلیک می کند ، به صفحه دومی راهنمایی می شود که در آن یک کنترل
DetailsView ، اطلاعات کامل محصول کلیک شده را نمایش می دهد .
نحوه نمایش اطلاعات اصلی :
- یک صفحه جدید به نام MasterCustomers.aspx را به سایت اضافه نمایید .
- به حالت Design رفته و عبارت Customers را در بالای صفحه تایپ کنید .
- از بخش Data منوی Toolbox برنامه یک کنترل GridView را روی صفحه قرار دهید .
- از بخش GridView Tasks کنترل GridView ، گزینه <New Data Source> را از
لیست Choose Data Source برای انجام امور زیر انتخاب کنید .
- گزینه Database را انتخاب نمایید .
- به پایگاه داده Northwind وصل شوید ( با اتصال NorthwindConnectionString )
- فیلدهای CustomerID و CompanyName و City را از جدول Customers انتخاب کنید .
- بصورت دلخواه از منوی GridView Tasks ، عبارت Enable paging را تیک بزنید .
- مجددا از بخش GridView Tasks ، گزینه Edit Columns را انتخاب نمایید . کادر محاوره
ای Fields باز می شود .
- علامت گزینه Auto-Generate Fields را بردارید .
- از زیربخش Available Fields ،گزینه HyperLink Field را انتخاب کرده و برای افزودن
ویژگی های زیر ، گزینه Add را فشار دهید :
Value
|
Property
|
Details
|
Text
|
CustomerID
این خاصیت تعتین می کندکه کنترل HyperLink بایستی مقدار خود را از فیلد CustomerID
دریافت نماید
|
DataNavigateUrlFields
|
{DetailsOrders.aspx?custid={0
این کد لینکی که را می سازد که به صفحه DetailsOrders.aspx رفته و همراه با آن یک پارامتر
یا query string نیز فرستاده می شود که CustID نام داشته و مقدار فیلد و خاصیت DataNavigateUrlFields
را به صفحه مقصد ارسال می کند .
|
DataNavigateUrlFormatString
|
- گزینه OK را برای پایان جعبه Fields انتخاب نمایید .
حال شما می توانید صفحه دوم یا ( details page ) را طراحی نمایید که مقدار خود را از
صفحه اصلی یا ( master page ) دریافت می کند .
ساخت صفحه مقصد ( details page ) :
- صفحه ای جدید DetailsOrders.aspx را به سایت اضافه کرده و به نمای Design بروید . سپس
در بالای صفحه عبارت DetailsOrders را قرار دهید .
- از بخش Data ، منوی Toolbox یک کنترل GridView بر روی صفحه قرارد دهید .
- از بخش GridView Tasks که بصورت یک فلش بر روی کنترل قرار دارد ، گزینه <New Data
Source> را از لیست Choose Data Source انتخاب کنید .
- در لیست Select a data source type ، گزینه Database را انتخاب کرده و سپس OK نمایید
.
- از لیست connection ، connection ای که قبلا در همین راهکار ساخته بوده اید را انتخاب
کنید .( NorthwindConnectionString ) سپس گزینه Next را بزنید .
- ویزارد صفحه ای را به شما نشان می دهد که از طریق آن می توانید یک دستور جدید SQL بسازید
.
- از لیست Name ، گزینه Orders را انتخاب کنید . همچنین از جعبه Columns ، گزینه های
OrderID, CustomerID, and OrderDate را تیک بزنید .
- عبارت WHERE را کلیک کنید . از لیست Columns گزینه CustomerID را و از لیست Operator
علامت = را انتخاب کنید .
- همچنین از لیست Source ، گزینه QueryString را انتخاب کنید . انتخاب این گزینه تعیین
می کند کخ مقادیر رکوردهای نمایش داده شده بر مبنای اطلاعات دریافتی از QueryString
( اطلاعات ارسالی از صفحه قبل ) باشد .
- در زیر قسمت Parameter Properties ، در کادر QueryString field عبارت custid را تایپ
کنید . این کار باعث می شود تا Query این صفحه ، مقدار Custumer ID را از مقدار
query string که از کلیک بر روی گزینه Details کنترل GridView تولید
شده است را دریافت کند .
- گزینه Add و سپس OK را برای بسته شدن پنجره Add WHERE Clause بزنید .
- از قسمت Standard منوی Toolbox ، یک کنترل Hyperlink را روی صفحه قرار داده و مقدار
خاصیت های Text آن را روی Return to Customers و مقدار خاصیت NavigateUrl را به MasterCustomers.aspx
تغییر دهید .
- اکنون می توانید صفحه های master-detail را تست کنید .
دانلود فایل عملی پروژه و نسخه PDF راهکار
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :