افزودن کنترل RadioButton در GridView و اعتبار سنجی آن توسط JavaScript

شنبه 12 اردیبهشت 1394

در این مقاله نحوه قرار دادن کنترل RadioButton و استفاده از آنها به همراه اعتبارسنجی با استفاده از JavaScript را شرح خواهیم داد

افزودن کنترل RadioButton در GridView و اعتبار سنجی آن توسط JavaScript

با توجه به درخواست برخی از کاربران مبنی بر اینکه چگونه میتوان کنترل RadioButton را در GridView قرار داد و با انتخاب هر کدام ، آن ردیف انتخاب شود و اطلاعات آن ردیف به سمت سرور ارسال شود ، در این مقاله با ذکر مثال می خواهیم این عملیات را انجام دهیم .همانطور که می دانید کنترل های radiobutton را میتوان با خاصیت GroupName به نحوی تغییر داد که فقط یک radiobutton را در صفحه انتخاب کنیم ، همچنین نمی توان با کلیک بر روی هر radiobutton اطلاعات مربوط به هر ردیف در gridview را استخراج کرد ، چرا که رفتار کنترل radiobutton با کنترل gridview متفاوت است .

در ابتدا یک پروژه در ویژوال استودیو ایجاد می کنیم ، سپس یک صفحه در آن قرار می دهیم .یک کنترل 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> 

سپس یک DataTable در قسمت دستورات برای نمایش اطلاعات پیش فرض در GridView اضافه میکنیم .


    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;  
    }  

سپس در متد PageLoad صفحه کنترل gridview را به جدول پیش فرضی که ساخته ایم متصل میکنیم :


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

اکنون به قسمت Design صفحه باز می گردیم و تابع اعتبار سنجی توسط JavaScript را می نویسیم .لازم به ذکر میباشد که باید کتابخانه JQuery را نیز به پروژه اضافه کنیم .


    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 انتخاب کرده ایم را نمای متفاوت به آن اختصاص میدهد .به عنوان مثال در اینجا هر ردیفی که ما انتخاب می کنیم را رنگ پس زمینه آبی به آن می دهد .سپس کنترل radiobutton که در قسمت اول در gridview  اضافه کرده ایم را خاصیت onclick را در آن فراخوانی می کنیم .


    <asp:RadioButton ID="rb" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" />  

اگر برنامه را اجرا کنید ، مشاهده خواهید کرد که به صورت پیش فرض هیج یک از radio button ها انتخاب نشده اند .پس برای رفع این مشکل باید تابعی بنویسیم که اگر کاربر هیج radio button را انتخاب نکرد و سپس بر روی دکمه کلیک کرد ، یک پیغام خطا نمایش دهد .برای این کار نیز از جاوا اسکریپت استفاده میکنیم .


    function ValidateRadioButton(sender, args)   
    {  
        var gv = document.getElementById("<%= GridView1.ClientID %>");  
        var items = gv.getElementsByTagName('input');  
        for (var i = 0; i < items.length; i++)   
        {  
            if (items[i].type == "radio")   
            {  
                if (items[i].checked)   
                {  
                    args.IsValid = true;  
                    return;  
                }  
                else   
                {  
                    args.IsValid = false;  
                }  
            }  
        }  
    }  

تابع بالا تمامی radio button ها را بررسی میکند ، اگر خاصیت یک radio button در وضعیت cheked بود سپس متد IsValid به حالت true تغییر می کند .سپس یک کنترل label برای نمایش زمان ارسال محتوای انتخاب شده از 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" />  

سپس در رویداد onClick زمان ارسال محتوا را در متن label قرار میدهیم .


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

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید