ورود / ثبت نام
0
0

دسترسی به مقادیر CheckBoxList سمت کلاینت با استفاده از jQuery

374 بازدید
CheckBoxList

CheckBoxList

خیلی از مواقع نیاز داریم از CheckBoxList برای دریافت اطلاعات استفاده کنیم ، میخواهیم در آموزش Value های CheckBoxList را با استفاده از jQuery در ASP.NET بدست بیاوریم.همراه من باشید.

به راستی جی کوئری یکی از تکنولوژی های بسیار جالب معرفی شده در توسعه وب در سال های اخیر می باشد. اگر شما نیز تا به حال از آن در پروژه های وب خود استفاده کرده باشید، بدون شک با ترکیب کنترل های قدرتمند سمت سرور ASP.Net با جی کوئری کارهای جالبی انجام داده اید. استفاده از جی کوئری به همراه کنترل هایی مانند button، textbox و….. بسیار ساده می باشد. اگرچه برخی از کنترل های ASP.Net به دلیل اجرا شدن آن ها توسط HTML در صفحه، کار را سخت می کنند. یکی از این کنترل ها CheckBoxList می باشد که در این مقاله نشان می دهیم چگونه برای دریافت lable های آیتم انتخاب شده از checkboxlist از جی کوئری استفاده نماییم.

CheckBoxList

برای شروع، یک پروژه وب سایت ASP.Net اضافه کرده و همان طور که در Markeup زیر مشاهده می نمایید، کنترل CheckBoxList، یک Button و دو عنصر span را روی صفحه drag می کنیم. رویداد کلیک دکمه تابع جاوااسکریپت btnShow_onclick() را فراخوانی می کند که در ادامه خواهیم دید.

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
   <asp:ListItem Text="Google" Value="1" />
   <asp:ListItem Text="Yahoo" Value="2" />
   <asp:ListItem Text="Bing" Value="3" />
</asp:CheckBoxList>
<br />
<input id="btnShow" type="button" value="Show Selected Items" 
   onclick="return btnShow_onclick()" />
<br /><br />
<span id="spnLabels"></span>
<br /><br />
<span id="spnValues"></span>
<br />

برنامه را Build کرده و اجرا کنید و کد html اجرا شده توسط CheckBoxList را با گزینه “View Source” در صفحه بررسی کنید. خواهید دید که کد زیر در صفحه تولید شده است. توجه کنید که چگونه Text Property مربوط به تگ <asp:ListItem> به صورت یک <lable> در html اجرا شده است و مقدار id مربوط به تگ های input مشابه مقدار صفت for در تگ های <lable> می باشد.

<table id="CheckBoxList1" border="0"> 
   <tr> 
      <td>
          <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" />
          <label for="CheckBoxList1_0">Google</label>
      </td> 
   </tr>
   <tr> 
      <td>
         <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" />
         <label for="CheckBoxList1_1">Yahoo</label>
      </td> 
   </tr>
   <tr> 
      <td>
         <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" />
         <label for="CheckBoxList1_2">Bing</label>
      </td> 
   </tr> 
</table>

نکته مهم دیگری که باید به آن توجه داشت، مقدار Prperty مربوط به تگ <asp:ListItem> می باشد که در کل MarkeUp اجرا نشده است. خب پس چگونه می توان مقادیر ۱، ۲ یا ۳ را در کد جی کوئری سمت کلاینت دریافت کرد؟ پاسخ این است که ما باید خودمان مقادیر را برای هر یک از آیتم های اجرا شده توسط کنترل CheckBoxList اضافه کنیم. کد زیر را در رویداد Page Load اضافه کرده و برنامه را دوباره اجرا می کنیم.

foreach (ListItem item in CheckBoxList1.Items)
{
   item.Attributes.Add("hiddenValue", item.Value);
} 

بعد از اضافه کردن حلقه بالا، برنامه را دوباره اجرا می کنیم. این بار کنترل CheckBoxList کد Markeup متفاوتی را تولید می کند و ASP.Net یک تگ <span> اضافی با صفت hiddenValue که در حلقه بالا اضافه کردیم اجرا می کند. Markeup  زیر HTML تولید شده را نشان می دهد.

<table id="CheckBoxList1" border="0">
   <tr>
      <td>
         <span hiddenValue="1">
            <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" />
            <label for="CheckBoxList1_0">Google</label>
         </span>
      </td>
   </tr>
   <tr>
      <td>
         <span hiddenValue="2">
            <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" />
            <label for="CheckBoxList1_1">Yahoo</label>
         </span>
      </td>
   </tr>
   <tr>
      <td>
         <span hiddenValue="3">
            <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" />
            <label for="CheckBoxList1_2">Bing</label>
         </span>
      </td>
   </tr>
</table>

این بار به مقادیر آیتم ها و نام هایی که توسط کنترل CheckBoxList اجرا شده اند، دسترسی داریم و با استفاده از جی کوئری می توانیم در سمت کلاینت به آن ها دسترسی داشته باشیم. رفرنس فایل اسکریپت جی کوئری را در بخش <head> صفحه اضافه می کنیم.

<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">

   function btnShow_onclick() {

      $("#spnLabels").text("");
      $("#spnValues").text("");

      var labels = "";
      var values = "";

      $("#<%= CheckBoxList1.ClientID %> input:checkbox:checked").each(function() {
         var label = $('label[for=' + this.id + ']').html();
         var value = $(this).parent().attr('hiddenValue');

         labels += label + ", ";
         values += value + ", ";
      });

      labels = labels.substring(0, labels.length - 2);
      values = values.substring(0, values.length - 2);

      $("#spnLabels").text(labels);
      $("#spnValues").text(values);
   }

</script>

تگ های span با نام spnLables و spnValues که در کد تعریف شده اند برای نمایش lable ها و مقادیر انتخاب شده در checkboxها هستند. بنابراین، دو خط اول همیشه چک می کند که وقتی کاربر روی دکمه Show Selected Items کلیک می کند، تگ های <span> خالی باشند.

$("#spnLabels").text(""); 
$("#spnValues").text("");

سپس از انتخاب گر input:checkbox:checked در جی کوئری برای دریافت هر یک از checkbox های انتخاب شده در کنترل CheckBoxList استفاده می کنیم و با استفاده از تابع each() در جی کوئری این کار را برای همه checkbox های انتخاب شده تکرار می کنیم.

$("#<%= CheckBoxList1.ClientID %> input:checkbox:checked").each(function() {
   var label = $('label[for=' + this.id + ']').html();
   var value = $(this).parent().attr('hiddenValue');

   labels += label + ", ";
   values += value + ", ";
});

در handler مربوط به تابع each()، از id تگ input برای بازیابی متن اجرا شده در هر <lable> استفاده می کنیم. همان طور که می دانید id هر تگ input با مقدار صفت for درون <lable> یکسان است و بنابراین به خوبی کار می کند.

var label = $('label[for=' + this.id + ']').html();

 

حالا از یک تابع دیگر جی کوئری به نام parent() برای دسترسی به عنصر <span> اجرا شده توسط کنترل CheckBoxList و بازیابی مقدار صفت های hiddenValues که با استفاده از حلقه foreach در رویداد Page Load صفحه اجرا می شوند، استفاده می کنیم. زمانی که ما lable و مقادیر را داشته باشیم به سادگی آن ها را با lables و values باهم ادغام می کنیم. این مقادیر را با استفاده از تابع جی کوئری text() در spnLables و spnValues  نمایش می دهیم.

$("#spnLabels").text(labels);
$("#spnValues").text(values);

 

برنامه را اجرا کرده و قبل از کلیک روی دکمه Show Selected Items آیتم های مختلفی را از کنترل CheckBoxList انتخاب می کنیم. اگر مراحل کار را تا اینجا به درستی انجام داده باشیم، تصویر خروجی مانند تصویری که در ابتدای مقاله نشان داده شد، خواهد بود.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17981
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد دسترسی به مقادیر CheckBoxList سمت کلاینت با استفاده از jQuery

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.