.NET Tips: نمايش خودكار مقدار يكDropDownList با كمك jQuery

نياز بود هنگام انتخاب يك آيتم دراپ داون ليست در كل برنامه و تمامي دراپ داون‌هاي آن، مقدار آن‌ها نيز به صورت يك برچسب در كنار آن نمايش داده شود.
براي مثال در ليست زير:


 <asp:DropDownList ID="ddlActive" runat="server">
     <asp:ListItem Value="Active">فعال</asp:ListItem>
     <asp:ListItem Value="Inactive">غيرفعال</asp:ListItem>
 </asp:DropDownList>

اگر آيتم فعال انتخاب شد، مقدار active نيز كنار آن نمايش داده شود و الي آخر.

راه حل اول:
در تمام صفحات به ازاي تك تك دراپ داون‌ها يك label اضافه كنيم و همچنين كدهاي تمام قسمت‌هاي برنامه را نيز اصلاح كنيم تا اين مورد را لحاظ كند.

راه دوم:
يك كنترل دراپ داون سفارشي را با خاصيت مورد نظر (همراه بودن با يك ليبل) ايجاد كرده و سپس تمام فرم‌ها را بايد اصلاح كرد تا از اين كنترل جديد استفاده كنند.

راه سوم:
استفاده از jQuery براي اعمال اين مهم به كل برنامه بدون نياز به تغييرات اساسي در آن (و همچنين سازگاري با تمام مرورگرها):


   //فقط در اين محدوده
   $("#mainFormReq select").change(function() {
       var currentId = $(this).attr("id"); //آي دي شيء جاري
       var val = $(this).val();        //مقدار
       var text = $('#' + currentId + ' option:selected').text(); //متن
       $("#lbl" + currentId).remove();        //اگر نمونه‌ي قبلي موجود است حذف شود
       if (val && (val.length > 0) && (text != val)) {
           //اگر متن و مقدار يكي نيست نمايش داده شود
           $(this).after('<label id="lbl' + currentId + '">' + val + '</label>');
       }
   });

توضيحات:
در يك محدوده مشخص شده با ID مساوي mainFormReq (مثلا استفاده از master page ها و نسبت دادن اين ID به content آن)، به دنبال تمام select هاي موجود در آن ناحيه مي‌گرديم (اگر mainFormReq حذف شود، اين جستجو در كل صفحه صورت خواهد گرفت) و تغييرات آن‌ها را تحت نظر قرار خواهيم داد.
سپس آي دي اين كنترل انتخابي را دريافت مي‌كنيم (از اين ID براي توليد ID برچسب مورد نظر استفاده خواهيم كرد).
در ادامه مقدارهاي text و value گزينه انتخابي دريافت مي‌شوند (+).
سپس بررسي خواهيم كرد كه آيا برچسبي با ID مشخص شده ما وجود دارد (در صورت انتخاب آيتم‌هاي ديگر، نبايد برچسبي غير منحصربفرد و تكراري در صفحه ايجاد كرد)
در ادامه اگر اين مقدار null نبود و همچنين مقدار text و value هم يكي نبودند (اگر يكي بودند لزوم وجود اين برچسب بي معنا است)، با استفاده از متد after كتابخانه jQuery يك برچسب را توليد و مقدار مورد نظر را پس از محل نمايش دراپ داون خود، نمايش خواهيم داد.

بهبود كد:
صورت مساله: اكنون نياز است بجز ناحيه mainFormReq، به سه ناحيه ديگر نيز اين تغييرات اعمال گردد. آيا بايد همين مقدار كد را سه بار ديگر copy/paste كرد؟
روش صحيح انجام اينكار در jQuery ، نوشتن يك افزونه بر اساس كدهاي فوق است كه روش انجام آن به صورت زير مي‌باشد (+):


//<![CDATA[
(function($) {
   $.fn.dropdownlabel = function() {
       return this.change(function() {
           var obj = $(this);
           var currentId = obj.attr("id"); //آي دي شيء جاري
           var val = obj.val();        //مقدار
           var text = $('#' + currentId + ' option:selected').text(); //متن           
           $("#lbl" + currentId).remove();        //اگر نمونه‌ي قبلي موجود است حذف شود
           if (val && (val.length > 0) && (text != val)) {
               //اگر متن و مقدار يكي نيست نمايش داده شود
               obj.after('<label id="lbl' + currentId + '">' + val + '</label>');
           }
       });       
   };
})(jQuery);
//]]>

و در نهايت نحوه استفاده از آن (فايلي به نام jquery.dropdownlabel.js ) به صورت زير خواهد بود:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestDropdownlabel.aspx.cs"
   Inherits="testWebForms87.TestDropdownlabel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>

   <script src="jquery.min.js" type="text/javascript"></script>
   <script src="jquery.dropdownlabel.js" type="text/javascript"></script>

   <script type="text/javascript">
       $(document).ready(function() {
           $("#mainFormReq select").dropdownlabel();
       });
   </script>

</head>
<body>
   <form id="form1" runat="server">
   <div id="mainFormReq">
       <asp:DropDownList ID="ddlActive" runat="server">
           <asp:ListItem Value=""></asp:ListItem>
           <asp:ListItem Value="Active">فعال</asp:ListItem>
           <asp:ListItem Value="Inactive">غيرفعال</asp:ListItem>
       </asp:DropDownList>
   </div>
   </form>
</body>
</html>

۱۳۸۸/۰۸/۰۳

نمايش خودكار مقدار يكDropDownList با كمك jQuery