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

راهکار 6 - 6 : نمایش یک کادر کشویی DropDownList در هنگام ویرایش اطلاعات در کنترل GridView 

مقدمه :

کنترل GridView برای نمایش فیلدهای یک رکورد ، به صورت پیش فرض از کادرهای متن ( TextBox ) استفاده میکند . شما می توانید کنترل GridView را به گونه ای تنظیم نمایید که به جای این کادرهای متن ، لیست های کشویی نمایش دهد . این کار نیاز به هیچ کدنویسی خاصی ندارد .
مباحث مطرح شده در این راهکار عبارتند از :

  • تنظیم یک کنترل GridView برای نمایش اطلاعات پایگاه داده SQL .
  • نمایش کادرهای کشویی برای ویرایش مقادیر رکوردهای جدول بانک اطلاعاتی در کنترل GridView .

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

پیش نیازها :

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

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

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

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

مرحله دوم - ایجاد یک ارتباط ( Connection ) به یک منبع داده ای SQL :

برای شروع راهکار ، بایستی یک ارتباط ( Connection ) به پایگاه داده SQL Server  بصورت زیر ایجاد کنیم :

  1.  در برنامه ویژوال استودیو ، منوی Server Explorer را باز کرده و بر روی گزینه Data Connections کلیک راست نمایید . از منوی باز شده ، گزینه Add Connection را انتخاب نمایید .
  2.  پنجره Add Connection مطابق تصویر زیر باز می شود :

    اگر لیست Data source گزینه Microsoft SQL Server Database File (SqlClient) را نشان نمی داد ، بر روی دکمه Change کلیک کرده و در قسمت Change Data Source ، گزینه Microsoft SQL Server Database File (SqlClient) را انتخاب کنید .
    اگر صفحه Choose Data Source ظاهر شد ، در لیست Data source ، نوع منبع داده ای که می خواهید استفاده نمایید را انتخاب کنید . در این راهکار ، نوع سرور داده Microsoft SQL Server می باشد . در لیست Data provider ، گزینه .NET Framework Data Provider for SQL Server را انتخاب کرده و سپس Continue را بزنید .
  3. در فیلد Database file name ، آدرس پایگاه داده NORTHWIND را که بر روی سرور نصب کرده اید را وارد نموده و یا از طریق Browse آن را پیدا کنید .
  4. پایگاه داده Northwind.mdf را انتخاب کرده و باز کنید .
  5. گزینه Save my Password را علامت بزنید .
  6. بر روی دکمه Test Connection کلیک نمایید تا مطمئن شوید که ارتباط شما با پایگاه داده بصورت صحیح کار می کند .

تنظیم کنترل GridView برای نمایش اطلاعات پایگاه داده :

در این بخش از راهکار بصورت دینامیک کنترل GridView را به پایگاه داده متصل خواهیم کرد :

  1. فایل صفحه Default.aspx را باز کرده و به حالت Design بروید .
  2. از منوی Toolbox و در قسمت Data ، یک کنترل GridView را بر روی صفحه قرار دهید .
  3. از منوی GridView Tasks که بصورت یک فلش بر روی کنترل نمایش داده می شود ، از جعبه Choose Data Source ، گزینه <New data source> را انتخاب کنید . پنجره Data Source Configuration باز می شود .
  4. گزینه Database را انتخاب کنید . در بخش Specify an ID for the data source یک نام پیش فرض برای کنترل سرور داده به مقدار SqlDataSource1 نمایش داده می شود . آن را بدون تغییر رها کنید .
  5. گزینه OK را بزنید . کادر Configure Data Source باز می شود .
  6.  از قسمت Select or enter a database name ، یا نام پایگاه داده از کادر کشویی انتخاب کرده و یا عبارت Northwind را بنویسید .
  7.  بر روی گزینه Test connection کلیک نمایید . در صورت دریافت پیام ok ، ارتباط شما برقرار شده است . سپس مجددا پنجره <Configure Data Source - <datasourcename  باز می شود .
  8.  بر روی گزینه Next کلیک نمایید . ویزاردی باز می شود که نمایش دهنده یک صفحه است . در آن صفحه می توانید تعیین کنید که connection string در فایل web.config سایت ذخیره شود یا درون خود صفحه .
     ذخیره connection string در فایل web.config دو مزیت عمده دارد :
    1. دارای امنیت بیشتری نسبت به ذخیره در خود صفحه است .
    2. می توانید از آن connection string در صفحات دیگر نیز به دفعات استفاده نمایید .
  9.  مطمین شوید که گزینه Yes, save this connection as انتخاب شده و سپس کلید Next را بزنید . این کار connection string ، را با نام NorthwindConnectionString ، در فایل web.config ذخیره می کند . می توانید نام آن را نیز به نام دلخواه تغییر دهید .
  10. از زیر بخش Specify columns from a table or view ، در قسمت Name مقدار Employees را کلیک نمایید . همچنین از زیر بخش Columns ، گزینه های EmployeeId, LastName, FirstName, HireDate و City را علامت بزنید . به صورت زیر :
  11. ویزارد دستور SQL ای که برای اتصال به پایگاه داده استفاده خواهد شد را در پایین صفحه نمایش می دهد .
  12. گزینه Advanced را بزنید و سپس گزینه های Generate INSERT, UPDATE, and DELETE statements را علامت زده و OK نمایید . این کار باعث می شود تا برنامه دستورات لازم برای انجام عملیات های Insert, Update, and Delet را بر مبنای دستور SQL ای که در مرحله قبل تعیین نموده اید را برای کنترل SqlDataSource1 ایجاد کند .
  13. مجددا گزینه Next را زده و در صفحه جدید با کلیک دکمه Test Query ، مطمئن شوید که اطلاعات مورد نظرتان از پایگاه داده استخراج می شود .
  14. گزینه Finish را بزنید . ویزارد به اتمام میرسد . همچنین بر روی کنترل GridView کلیک راست کرده و از قسمت GridView Tasks گزینه Enable Editing را برای فراهم نمودن امکان ویرایش در کنترل ، علامت بزنید .
  15. اکنون می توانید کنترل و صفحه را تست نمایید . در هنگام اجرای صفحه ، کنترل GridView فیلدهای EmployeeId, LastName, FirstName, HireDate, and City را نمایش می دهد .
  16. لینک Edit را که کنار هر سطر ( رکورد ) قرار دارد را کلیک نمایید . فیلدهای رکورد انتخاب شده برای ویرایش ، به جز EmployeeId که فیلد کلید جدول است ، بصورت کادر متن ( TextBox ) های قابل ویرایش در می آیند .
  17. مقدار فیلدهای مورد نظرتان که می خواهید تغییر دهید را ویرایش کرده و گزینه Update را بزنید . سطر یا رکورد ویرایش شده با مقادیر جدید نمایش داده خواهد شد .
  18. مرورگر را ببندید .

نمایش کادر کشویی ( DropDownList ) در هنگام ویرایش رکوردهای کنترل GridView :

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

  1. از بخش Data ، منوی Toolbox ، یک کنترل SqlDataSource را برداشته و بر روی صفحه قرار دهید . این کنترل با id برابر SqlDataSource2 ایجاد می شود .
  2. از منوی SqlDataSource Tasks ، گزینه Configure Data Source را انتخاب نموده و در بخش Which data connection should your application use to connect to the database ، نام ارتباط ( Connection ) ای که در بخش قبل ایجاد کرده بودید را وارد نمایید . سپس Next را بزنید .
  3. از صفحه Configure the Select Statement ،گزینه Specify columns from a table or view را انتخاب کرده و روی کادر Name ، مقدار Employees را کلیک نمایید .
  4. فقط فیلد City را انتخاب کرده ، سپس گزینه Return only Unique Rows را علامت زده و گزینه Next را بزنید . مطابق تصویر زیر :
  5. گزینه Test Query را برای مشاهده و تست اطلاعات خروجی کلیک کرده و سپس Finish را بزنید .
  6. بر روی کنترل GridView کلیک راست کرده و از قسمت GridView Tasks ، گزینه Edit Columns را بزنید .
  7. از جعبه انتخابی Fields ، گزینه City را از لیست Selected fields انتخاب کرده و سپس دکمه Convert this field into a TemplateField را بزنید تا این فیلد بصورت لینک دربیاید . سپس با زدن گزینه OK ، پنجره را ببندید . مطابق تصویر زیر :
  8. مجددا بر روی کنترل GridView کلیک راست کرده و از بخش GridView Tasks گزینه Edit Templates را انتخاب کنید . گزینه EditItemTemplate را از کادر کشویی Dispaly انتخاب کنید .
  9. بر روی کنترل TextBox موجود در template راست کلیک کرده و با انتخاب گزینه Delete آن را حذف نمایید . به صورت زیر :
  10. از بخش استاندارد منوی Toolbox ، یک کنترل DropDownList را کشیده و بر روی template رها کنید .
  11. بر روی کنترل DropDownList کلیک راست کرده و از بخش Choose Data Source کنترل SqlDataSource2 را به عنوان منبع داده ای آن انتخاب کرده و OK را بزنید .
  12. از منوی DropDownList Tasks ، گزینه Edit DataBindings را انتخاب کنید . خاصیت SelectedValue کنترل DropDownList در پنجره DataBindings انتخاب شده است . گزینه رادیوی Field Binding را کلیک کرده و فیلد City را انتخاب کنید . به صورت زیر :
  13. کادر انتخابی Two-way databinding را علامت زده و OK نمایید . در آخر هم بر روی کنترل GridView کلیک راست کرده و گزینه GridView Tasks را مجددا انتخاب کرده و گزینه End Template Editing را بزنید .
  14. اکنون زمان تست نهایی پروژه است . با زدن دکمه های CTRL + F5 صفحه را اجرا نمایید . کنترل GridView فیلدهای EmployeeId, LastName, FirstName, HireDate, and City بر روی صفحه نمایش می دهد . گزینه Edit در کنار یک سطر ( رکورد ) را کلیک نمایید . فیلد City بصورت یک کادر کشویی ( drop-down list ) در می آید . نام شهر دیگری را از لیست انتخاب کرده و گزینه Update را بزنید . فیلد City را با مقدار جدید تعیین شده در لیست آپدیت می شود .

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



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


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

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

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