تبلیغات متنی و بنر

آموزش PHP
سون لرن

پرشین آی تی

آموزش اندروید استودیو - خانه اندروید

طراحی سایت
پیام آوا

طراحی سایت
اکسین وب

طراحی سایت
زفره مدیا

طراحی سایت تهران

آموزش برنامه نویسی اندروید ، آموزش اندروید
wiadevelopers

آموزش برنامه نویسی
سورس سرا

آموزشگاه برنامه نویسی
esfandune.ir

کلاس آموزش طراحی وب سایت در مشهد

طراحی سایت
 سایت سازان

طراحی سایت
www.signwebdesign.ir

طراحی سایت
sitedp.com

طراحی سایت

طراحی سایت حرفه ای
activeidea

طراحی سایت
gowebsite.ir

طراحی سایت
www.webone.co

فروشگاه عصرصنعت
فروش آنلاین لوازم تاسیسات

فروش پمپ گراندفوس آبتین UPS

تهران تکنیک
نمایندگی فروش هانیول

راهکارهای موثر در 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 :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1