استفاده از AJAX در DropDownList

DropDownList

DropdownList سفارشی از AJAX برای سکون ردن محتوای خود و اجرای الگوی ناظر جهت مشارکت در dropdownlist زنجیره ای بهره می برد. توضیحات کامل در رابطه با ایجاد DropDownList با AJAX در ادامه مطلب برایتان قرار داده شده است . با من همراه باشید …

DropDownList

DropDownList

AJAX این امکان را ایجاد کرده است که وب اپلیکیشن های پاسخگو و مناسب بیشتری بسازید، و آنها را به فرم ویندوز نزدیک تر کرده است. کاربران مایل و پیگیر انگیزه ما را جهت ایجاد این custom control بیشتر می کند. در ابتدا AjaxDropDownList را معرفی می کنیم. AjaxDropDownList یک کنترل dropdownlist با ویژگی های زیر می باشد:

اطلاعات را بدون postback به صورت ناهمگام از یک سرور منبع به background می آورد.

می تواند رویداد ها را به یک dropdownlists دیگر تغییر دهد، و بدین ترتیب یکcascading linked dropdownlist تولید می کند.

در یک کنترل تکی (single control) محصور شده است که به راحتی می تواند به یک طراحdragged and dropped شود و یا به یک سرور کد اضافه شود.

از کد های رایج برای دسترسی به selectedItem استفاده می کند، درست ماننده dropdownlist عادی، از این رو به راحتی می تواند با یک UI framework دیگر یکپارچه شود.

با اینترنت اکسپلورر ۶، موزیا فایرفاکس ۱.۰۴ و نت اسکیپ ۸.۰۲ سازگار می باشد.

هم چنین می توانیم از کنترل AjaxDropDownList استفاده کنیم، زیرا برای انتقال اطلاعات از XML استفاده نمی کند. از JSON (JavaScript Object Notation) به وسیله Douglas Crockford استفاده می کنیم که سبک تر می باشد و راحت تر توسط JavaScript تحلیل می شود.

چگونگی استفاده از کنترل

شروع از یک پروژه نمونه

پروژه را در VS.NET 2003 دانلود و باز کنید. GetLookupData.aspx.cs ویرایش کنید و connection string را به یک نقطه معتبر پایگاه داده NorthWind تغییر دهید.

زمانی که solution به طور کامل ایجاد شد، default.aspx را اجرا کنید.

نسخه آزمایشی

در این صفحه دمو، سه AjaxDropDownLists داریم: Customers(ddlCustomers)، Orders (ddlOrders) و Products (ddlProducts).

سفارش های (Orders)dropdownlist به مشتری ها (Customers) بستگی دارد. این بدین معنا می باشد که اگر ما یک انتخاب در dropdownlist مشتری ها داشته باشیم، سپس dropdownlist سفارش ها بر اساس انتخاب ما فیلتر می شود. از این گذشته محصولات نیز به سفارش ها بستگی دارند. پس بنابراین یک انتخاب در مشتری ها باعث یک تغییر در سفارش می شود و به دنبال آن یک تغییر در محصولات. توجه داشته باشید همه این اتفاقات بدون postback می باشد.

زمانی که در حال کار با dropdownlist می باشید، ممکن است با یک alert boxجاوا اسکریپت که یک پیغام خطا را نشان می دهد برخورد کنید. که می تواند معنای متفاوتی داشته باشد، اما به احتمال قوی مشکل از ارتباط با پایگاه داده می باشد.

اکنون دکمه Submit را فشار دهید و صفحه به صورت خودکار بگ postback انجام می دهد. سپس متن انتخاب شده هر dropdownlist در سمت راست نمایش داده می شود. این برای اثبات این است که یک کد استاندارد برای دسترسی به انتخاب در ASP.NET DropDownList هم چنان در AjaxDropDownList اجرا می شود.

درمورد آن سه مورد

سه بخش مهم وجود دارد:

AjaxDropDownList.cs

شامل custom control می باشد. این فایل را در یک Class Library project جدا بگذارید در نتیجه می توانیم کنترل را بدون مشکل به toolbox اضافه کنیم.

Default.aspx

یک صفحه وب ساده است که از کنترل های AjaxDropDownList استفاده می کند.کنترل ها از Toolbox به صفحه ی designer انداخته می شوند.

برای اضافه کردن AjaxDropDownList به toolbox روی پنجره toolbox کلیک راست کنید و سپس Add/Remove را انتخاب کنید. یک Customize bring up می آورد. دکمه Browse را فشار دهید و سپس CustomControl.dll را انتخاب کنید. یک لیست بزرگ از کنترل ها به همراه checkboxes ظاهر می شود. مطمئن شوید که AjaxDropDownList انتخاب شده و dialog را ببندید. کنترل در toolbox ظاهر می شود.

GetLookupData.aspx

این صفحه ای ایجاد کرد که در خواست های xmlHttp را رسیدگی می کند و JSON مناسب را ارائه می دهد. و لازم است که دو query strings را رسیدگی کند:

“id” نامی برای جستجو و مشخص کننده می باشد، مانند کشور، واحد پول، سفارش، محصول و وضعیت فاکتور.

“filter” (اختیاری) فیلتر را با اسم، مقدار و جفت مانند Customer و ALFKI توضیح می هد.

درخواست مانند :

http://localhost/GetLookupData.aspx?id=Orders&filter=Customer,ALFKI

ترجمه شده به :

http://localhost/GetLookupData.aspx?id=Orders&filter=Customer,ALFKI

چگونگی اجرای درخواست به شما بستگی دارد.

کد خرید

کنترل AjaxDropDownList از کاملا و به شدت از JavaScript استفاده می کند. کد JavaScript در کنترل جاسازی شده و وقتی که کنترل تحویل داده می شود به جریان پاسخ (response stream) تزریق می شود. برای minimize کردنHTTP payload، کد جاوا اسکریپت JavaScript Minifierminimize شده.

از این رو، در پروژه نمونه ما سورس کد را با فرمت اصلی برای شما آورده ایم.

XMLHTTP

کد جاوا اسکیریپت از xmlHttp برای ایجاد درخواست به وب سرور و همگام سازی، حتی ناهمگام سازی استفاده می کند. و درخواست بدون refresh کردن صفحه ایجاد می شود، صفحه وب بهتر و پاسخگو می شود.

Controller

هر AjaxDropDownList به عنوان یکelement<SELECT> در HTML ارائه داده می شود. هر یک از این element ها یک controller به نام AjaxDropDownController دارد. و این controller کارهای زیادی انجام می دهد:

درخواست های نا همزمان وب سرور را برای گرفتن اطلاعات اجرا می کند.

پر کردن dropdownlist.

توجه به تغییرات رویداد های dropdownlist.

مشاهده کننده و قابل مشاهده می باشد.

در client side به محتوای dropdownlist ادامه می دهد.

اجرای درخواست ناهمزمان در پس زمینه

زمانی که controller نیاز به بروز کردن dropdownlist خود دارد، load() را فرا می خواند که در برگشت به صورت getSource()می شود. در حال استفاده و فراخوانی این متد ممکن است که یک filter string را تصویب کند، که name-value جفت dropdownlist می باشد که به getSource() بستگی دارد. یک URL درخواست ساخته می شود که شامل پارامتر id و filter می باشد.

var requestUrl = baseUrl + "?id=" + self.lookupName;

if (filter != undefined && filter != "") 
{ 
            requestUrl += "&filter=" + filter; 
}

و سپس بعد از مراجعه به xmlHttp حفظ می شود، و یک درخواست ارسال می کند. به پارامتر آخر xmlHttp.open توجه داشته باشید که روی حالت true تنظیم شده و یک درخواست ناهمگام را نشان می دهد.

xmlHttp = getXMLHTTP(); 
if (xmlHttp) 
{ 
            xmlHttp.onreadystatechange = doReadyStateChange; 
            xmlHttp.open("GET", requestUrl, true); 
            xmlHttp.send();
}

به عنوان ماهیت یک درخواست ناهمگام، نمی توانیم مشخص کنیم چه زمانی پاسخ می دهد. از این رو، یک کنترل کننده رویداد doReadyStateChange به onreadystatechange اختصاص می دهیم. و این کنترل کننده رویداد هربار که جزئیات درخواست تغییر کند فرا خوانده می شود.

unction doReadyStateChange(){
if (xmlHttp.readyState == 4)
    {
if (xmlHttp.status == 200)
         {
             eval("var d=" + xmlHttp.responseText);
if (d != null)
             {
                 populateList(d);
             }
          }
else
          {
              alert("There was a problem retrieving the XML data:\n" +
                      xmlHttp.statusText);
          }
       }
   }
}

در doReadyStateChange، readyState = 4 را برسی می کنیم که به معنای کامل شدن می باشد و status= 200 که وضعیت کد HTTP را به حالت OK نشان می هد. زمانی که این عملیات به پایان رسید نوبت اجرای response stream (عملیات پاسخ) می باشد.
Processing the response stream / اجرای جریان پاسخ
همان طور که قبلا توضیح دادیم، از JavaScript Object Notation یا JSON برای انتقال اطلاعات از وب سرور به کلاینت استفاده می کنیم.
برای مثال، زمانی که یک در خواست مثل زیر ارسال می کنیم:

http://localhost/GetLookupData.aspx?id=Product&filter=Order,10280

سرور پاسخ می دهد:

[{"value":"24","name":"Guaraná Fantástica"},
{"value":"55","name":"Pâté chinois"},
{"value":"75","name":"Rhönbräu Klosterbier"}]

ما responseText را برای ایجاد یک توضیح JavaScript معتبر و اجرای آن با استفاده از evalبه یک string دیگر پیوند می زنیم.

eval("var d=" + xmlHttp.responseText);

و در نتیجه، یک سلسله مراتب in-memory object ایجاد میشود. به صورت زیر:

d +--- [0] +--- value: 24
  |        |--- name: GuaranáFantástica
  |
  +--- [۱] +--- value: 55
  |        |--- name: Pâté chinois
  |
  +--- [۲] +--- value: 75
           |--- name: RhönbräuKlosterbier

می توانیم این سلسه مراتب را به راحتی قطع کنیم.

d[0].value will return 24.

d[2].name will return RhönbräuKlosterbier.

d.length will return 3.

سپس این object به populateList() واگذار می شود، که مسئول ثبت کردن مکاتبه های <SELECT> می باشد.

Observer pattern / الگوی ناظر

AjaxDropDownController الگوی ناظر را اجرا می کند. یک نمونه AjaxDropDownControllerمی تواند هم ناظر باشد هم قابل مشاهده. هر نمونه یک لیست از مشاهده کنندگان نگه می دارد، و بنابراین مقادیر به dropdownlist متناظر تغییر پیدا می کند. Controller نیز درباره هر تغییر اخطار می دهد.

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

var observers = [];

متودها

addObserver()

تیم روش برای اضافه کردن یک observer (مشاهده کننده) به لیست به کار می رود. قبل از اضافه شدن به لیست بررسی می کند که observer قبلا در لیست نباشد، اطمینان حاصل کردن منحصر به فرد…

removeObserver()– حذف شده

پیاده سازی کامل یک الگوی متناظر به این روش نیاز دارد. این متود برای حذف کردن یک observer از لیست به کار می رود.

notify()

از این روش برای اخطار دادن به همه ی notify() درباره تغییرات dropdownlist متناظر استفاده می کنیم. این روش یک فیلتر بر اساس dropdownlistselectedIndex می سازد.

load()

زمانی که این متود فرا خوانده شود، controllergetSource را فرا می خواند برای گرفتن منبع اطلاعات ناهمگام با استفاده از xmlHttp.

Persisting content

وقتی که محتوای dropdownlist در سمت client تغییر کرد، در طول postback تغییرات به سرور نمی روند. از این رو، نمی توانیم از کد استاندارد برای دسترسی به آیتم انتخاب شده در dropdownlist استفاده کنیم و به عنوان مثال از SelectedIte یا SelectedIndex استفاده می کنیم. این امر موضوع را سخت تر می کند چرا که می خواهیم کنترل را با یک data binding framework ترکیب کنیم و نمی توانیم خودمان به صورت دستی کد آن را بنویسیم.

به همین دلیل است که محتوای dropdownlist را در سمت client نگه می داریم. برای هر AjaxDropDownList، یک

Field پنهان وجود خواهد داشت.

کاراکتر و حرف جدا کننده قابل تنظیم می باشد. از این رو اگر | را دوست ندارید، می توانید آن را تغییر دهید.

در زمان postback، مقدار delimited string خوانده می شود و موارد متناظر در dropdownlist ایجاد می شوند.

The server side

بحث در مورد کد بدون دسترسی به server کامل نمی شود چرا که اطلاعات از آنجا می آیند. دقیقا بر عکس client، کد server ساده می باشد. اساسا لازم است که درخواست فرستاده شده به xmlHttp را برسی کنیم و اطلاعات JSON را   فراهم کنیم.

نحوه گرفتن اطلاعات از دیتابیس به شما بستگی دارد. GetLookupData.aspx مثال خوبی نمی باشد و در معرض حملات SQL می باشد. در شرایط زندگی واقعی لازم است که دسترسی به اطلاعات framework را به جای متصل شدن به پایگاه داده به صورت مستقیم فرا خوانیم. هم چنین لازم است که اطلاعات را در حافظه پنهان کنید.

مسئله ای که برای client بسیار اهمیت دارد، فرمت پاسخی می باشد که شما می دهید، و باید به صورت زیر باشد:

[ {"value":"value1","name","name1"},
{"value":"value2","name","name2"},
 ...
{"value":"valueN","name","nameN"} ]

The custom control

AjaxDropDownList یک custom control می باشد که از System.Web.UI.WebControls.DropDownList به ارث برده شده است. و همه ی کد ها را در یک محفظه قرار می دهد که یک اطلاعات دینامیک از client side فراهم کند و به dropdownlist اجازه می دهد در linked dropdownlist chain شرکت کند.

چهار ویژگی عمومی اضافی در صدر ویژگی های DropDownList دارد.

Observers

یک ArrayList می باشد. وقتی یک AjaxDropDownList دیگر به آن اضافه کنید، AjaxDropDownList به DropDownList فعلی وابسته و تابع آن می شود. برای مثال :

DropDownList1.Observers.Add(DropDownList2);

DropDownList2 را تابع DropDownList1 می سازد.

SourceUrl

URL منبع اطلاعات را بدون پارامتر های id و filter و … تنظیم کنید.

http://localhost/getLookupHandler.aspx

LookupName

مشخص کننده لیست lookup به DropDownList فعلی می پیوندد. و به عنوان id در درخواست رد می شود.

http://localhost/getLookupHandler.aspx?id=Country

هم چنین برای تشکیل filter نیز به کار می رود. به تور مثال :

http://localhost/getLookupHandler.aspx?id=State&filter=Country,AU

Delimiter

یک حرف برای جدا کردن مقادیر می باشد که در hidden field ادامه می یابد. و پیش فرض آن | می باشد.

موفق باشید !

  • پسورد: www.mspsoft.com
محمد نجفی

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.