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

استفاده از Radio Button در GridView با معتبرسازی JavaScript

393 بازدید
Radio Button در GridView

Radio Button در GridView

یک برنامه نویسی پرسید چگونه یک Radio Button را زمانی که دکمه درون GridView قرار دارد انتخاب کنم. همانطور که ممکن است بدانید تنظیمات خصوصیت نام گروه یک Radio Button اگر که دکمه درون یک کنترل ارائه داده همانند یک GridView باشد , کار نمیکند. به این دلیل است که Radio Button در GridView رفتار متفاوتی از خود نشان میدهد.

از آنجا که GridView همانند یک جدول ارائه میشود , در زمان اجرا نام متفاوتی به هر یک از Radio Button ها داده میشود. از این رو شما قادر خواهید بود که چند سطر را انتخاب کنید.

در این مقاله میخواهم به شما نشان دهم که چگونه تنها یک Radio Button در یک زمان در GridView انتخاب کنید و یک معتبر کننده ی ساده با استفاده از JavaScript خالی به آن اضافه کنید. برای شروع ویژوال استودیو راشروع کنید و سپس یک برنامه ی وب / پروژه ی وبسایت جدید بسازید. یک وب فرم بیافزایید و سپس GridView را بگیرید. نشانه گذار شبیه زیر خواهد بود :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="rb" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
<asp:BoundField DataField="Col1" HeaderText="First Column" />
<asp:BoundField DataField="Col2" HeaderText="Second Column" />
</Columns>
</asp:GridView>

 

اگر متوجه شدید که من ستون templatefield را اضافه کرده ام پس ما میتوانیم Radio Button را آنجا وارد کنیم. همچنین من چند ستون BoundField را قرار داده ام و DataFields را به عنوان شماره سطر قرار داده ام , ستون ۱ و ستون ۲. این ستون ها ساختگی هستند و تنها برای ساده سازی این مثال استفاده میشوند. حال این ستون ها از کجا آمده اند ؟ این ستون ها با دست در فایل Code Behind قسمت ASPX ساخته شده اند. این هم از کد :

private DataTable FillData()   
{   
DataTable dt = new DataTable();   
DataRow dr = null;   
//Create DataTable columns   
dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));   
dt.Columns.Add(new DataColumn("Col1", typeof(string)));   
dt.Columns.Add(new DataColumn("Col2", typeof(string)));   
//Create Row for each columns   
dr = dt.NewRow();   
dr["RowNumber"] = 1;   
dr["Col1"] = "A";   
dr["Col2"] = "B";   
dt.Rows.Add(dr);   
dr = dt.NewRow();   
dr["RowNumber"] = 2;   
dr["Col1"] = "AA";   
dr["Col2"] = "BB";   
dt.Rows.Add(dr);   
dr = dt.NewRow();   
dr["RowNumber"] = 3;   
dr["Col1"] = "A";   
dr["Col2"] = "B";   
dt.Rows.Add(dr);   
dr = dt.NewRow();   
dr["RowNumber"] = 4;   
dr["Col1"] = "A";   
dr["Col2"] = "B";   
dt.Rows.Add(dr);   
dr = dt.NewRow();   
dr["RowNumber"] = 5;   
dr["Col1"] = "A";   
dr["Col2"] = "B";   
dt.Rows.Add(dr);   
return dt;   
}

و این هم از کد برای انقیاد GridView با داده ی ساختگی بالا :

protected void Page_Load(object sender, EventArgs e)   
 {   
    if (!IsPostBack)   
    {   
       GridView1.DataSource = FillData();   
       GridView1.DataBind();   
    }   
}

به همین سادگی اکنون ما یک داده GridView با یک Radio Button در هر سطر قرار میدهیم. حال بیایید ادامه دهیم و به نشانه گذار ASPX برمیگردیم. من برای معتبر سازی Radio Button از JavaScript استفاده میکنم تا یک Radio Button در یک زمان داشته باشم.( شما همچنین میتوانید از jQuery برای بهره مند شدن از مزیت jQuery selector برای دستکاری دستی آسان DOM استفاده نمایید). این هم از کد JavaScript :

function CheckOtherIsCheckedByGVID(rb)    
{   
var isChecked = rb.checked;   
var row = rb.parentNode.parentNode;   
if (isChecked)    
{   
row.style.backgroundColor = '#B6C4DE';   
row.style.color = 'black';   
}   
var currentRdbID = rb.id;   
parent = document.getElementById("<%= GridView1.ClientID %>");   
var items = parent.getElementsByTagName('input');   
for (i = 0; i < items.length; i++)   
{   
if (items[i].id != currentRdbID && items[i].type == "radio")    
{   
if (items[i].checked)   
{   
items[i].checked = false;   
items[i].parentNode.parentNode.style.backgroundColor = 'white';   
items[i].parentNode.parentNode.style.color = '#696969';   
}   
}   
}   
}

تابع بالا در طول سطر ها در GridView میچرخد و تمام Radio Button های درون آن را می یابد. سپس ویژگی Checked هر Radio Button را چک میکند. اگر یک Radio چک شده بود سپس IsValid آن را True میکند در غیر اینصورت آن را False میکند. دلیل اینکه من از IsValid استفاده میکنم این است که من از کنترل معتبر کننده ی ASP برای معتبر سازی استفاده میکنم. حال نشانه گذار زیر را در پایین اعلام کردن GridView اضافه میکنیم :

<br />
<asp:Label ID="lblMessage" runat="server" />
<br />
<asp:Button ID="btn" runat="server" Text="POST" onclick="btn_Click" ValidationGroup="GroupA" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please select row in the grid." ClientValidationFunction="ValidateRadioButton" ValidationGroup="GroupA" style="display:none"></asp:CustomValidator>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="GroupA" HeaderText="Error List:" DisplayMode="BulletList" ForeColor="Red" />

 

و سپس در رویداد کلیک دکمه این کد ساده ی زیر را برای تست کردن معتبر کننده ها وارد نمایید :

protected void btn_Click(object sender, EventArgs e)    
{   
lblMessage.Text = "Postback at: " + DateTime.Now.ToString("hh:mm:ss tt");

اجرای صفحه چیزی شبیه زیر را در جستجوگر نمایش میدهد :

زمانی که معتبر کننده فعال شود:

Radio Button در GridView زمانی که موفقیت آمیز باشد:

Radio Button در GridView

تمام شد. امیدوارم این مقاله را مفید بدانید و از آن استفاده کنید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=14224
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد استفاده از Radio Button در GridView با معتبرسازی JavaScript

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

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

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