در این مقاله قصد داریم با استفاده از jQuery و Ajax نشان دهیم چگونه می توان دریک گرید ویو CheckBox قرار داد وآن را در دیتابیس ذخیره کرد و هنگام تغییر درCheckBox، دیتابیس نیز به روز شود.

 در این مقاله قصد داریم با استفاده از jQuery و Ajax نشان دهیم چگونه می توان دریک گرید ویو CheckBox  قرار داد وآن را در دیتابیس ذخیره کرد و هنگام تغییر درCheckBox، دیتابیس نیز به روز شود.

یک table با مشخصات زیر در دیتابیس ایجاد میکنیم.

با کد زیر هم می توانید این جدول را بسازید .

    CREATE TABLE [dbo].[ReportData]
    (    
        [id] [int] IDENTITY(1,1) NOT NULL,    
        [RName] [nvarchar](50) NULL,    
        [RDescripation] [nvarchar](50) NULL,    
        [Status] [bit] NULL,    
    CONSTRAINT [PK_ReportData] PRIMARY KEY CLUSTERED     
    (    
        [id] ASC    
    )
    WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]    
    ) ON [PRIMARY]    

در اینجا از پلاگین  jQuery بجای کنترل GridView در ASP.net  استفاده شده است  که قابلیت های زیادی را از جمله مرتب سازی ، جستجو ، صفحه بندی و... فراهم میکند و بسیار بهینه سازی شده است.

<form id="form1" runat="server">  
    <div class="col-lg-offset-4 col-md-8">  
        <h1>New Example</h1>  
    </div>  
    <br />  
    <table id="example" class="table table-hover table-striped table-bordered table-responsive">  
        <thead>  
            <tr>  
                <th>Id</th>  
                <th>Report Name</th>  
                <th>Report Description</th>  
                <th>Status</th>  
                <th>  
                    <label id="lbltext1">Update Status</label>  
                </th>  
            </tr>  
        </thead>  
        <tbody><% for (var data = 0; data < TableData.Rows.Count; data++)    
                  { %>  
            <tr>  
                <td><%=TableData.Rows[data]["id"]%>  
                </td>  
                <td><%=TableData.Rows[data]["RName"]%>  
                </td>  
                <td><%=TableData.Rows[data]["RDescripation"]%>  
                </td>  
                <td><%=TableData.Rows[data]["Status"]%>  
                </td>  
                <td><%if (TableData.Rows[data][3].ToString() == "True")    
                         { %>  
                    <input type="checkbox" class="chcktbl1" checked="checked" name="chcktbl1" data-id="  
                        <%=TableData.Rows[data]["id"]%>" /><%} %><%else    
                         { %>  
                        <input type="checkbox" class="chcktbl1" name="chcktbl1" data-id="  
                            <%=TableData.Rows[data]["id"]%>" /><%} %>  
                        </td>  
                    </tr><% } %>  
                </tbody>  
            </table>  
        </form>   

ارتباط داده ها

کد زیر Data Table  را از اطلاعات پر میکند، اطلاعاتی که از اتصال داده ها در jQuery DataTable بدست آمده است.

public DataTable TableData = new DataTable();  
        public static string Constr = ConfigurationManager.ConnectionStrings["ConStr"].ConnectionString;  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!IsPostBack)  
            {  
                GetAllData();  
            }  
        }  
        private void GetAllData() //Get all the data and bind it in HTLM Table       
        {  
            using (var con = new SqlConnection(Constr))  
            {  
                const string query = "select * from ReportData order by id desc";  
                using (var cmd = new SqlCommand(query, con))  
                {  
                    using (var sda = new SqlDataAdapter())  
                    {  
                        cmd.Connection = con;  
                        sda.SelectCommand = cmd;  
                        using (TableData)  
                        {  
                            TableData.Clear();  
                            sda.Fill(TableData);  
                        }  
                    }  
                }  
            }  
        }

کد jQuery  برای برای اتصال داده ها در  DataTable  به صورت زیر می باشد.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
 <script src="js/jquery.dataTables.min.js"></script>  
 <script type="text/javascript">  
     $(document).ready(function () {  
         $('#example').DataTable({  
         });  
     });  
 </script>  

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

به روز رسانی مقدار Checkbox در دیتابیس

کد jQuery زیر Ajax  را برای به روز رسانی رویداد checkbox صدا می زند.

<script type="text/javascript">  
        $(".chcktbl1").click(function () {  
            var rdata = $(this).attr("data-id"); // reading the id of the checkbox through data-id   
            console.log(rdata);  
            //alert(rdata);  
            $.ajax({  
                type: "Post",  
                contentType: "application/json; charset=utf-8",  
                url: "GridUpdate.aspx/UpdateIsData",  
                data: '{eid: ' + rdata + '}',  
                dataType: "json",  
                success: function (response) {  
                    if (response != 0) {  
                        alert("Data Update Successfully!!!!");  
                        location.reload();  
                    }  
                },  
                error: function (response) {  
                    if (response != 1) {  
                        alert("Error!!!!");  
                    }  
                }  
            });  
        });  
    </script>  

از ()location.reload برای بارگذاری دوباره صفحه و دیدن نتیجه تغییرات در Grid استفاده شده است.

کد زیر برای به روزرسانی رویداد checkbox در دیتابیس استفاده می شود. به دلیل استفاده از Ajax صفت [WebMethod] اضافه شده است.

[WebMethod]  
public static void UpdateIsData(int eid)  
{  
    if (eid != null)  
    {  
        try  
        {  
            string data = string.Empty;  
            var con = new SqlConnection(Constr);  
            // Chenge Staus For check  
            var q = "Select status from ReportData Where id='" + eid + "'";  
            var command = new SqlCommand(q, con);  
            con.Open();  
            SqlDataReader readData = command.ExecuteReader();  
            while (readData.Read())  
            {  
                data = readData["status"].ToString();  
                con.Close();  
                if (data == "False")  
                {  
                    using (var con2 = new SqlConnection(Constr))  
                    {  
                        var query = "update ReportData set Status='True' where id='" + eid + "'";  
                        con2.Open();  
                        var cmd = new SqlCommand(query, con2);  
                        cmd.ExecuteNonQuery();  
                        con2.Close();  
                    }  
                }  
                else  
                {  
                    using (var con1 = new SqlConnection(Constr))  
                    {  
                        var query = "update ReportData set Status='False' where id='" + eid + "'";  
                        con1.Open();  
                        var cmd = new SqlCommand(query, con1);  
                        cmd.ExecuteNonQuery();  
                        con1.Close();  
                    }  
                }  
            }  
        }  
        catch (Exception)  
        {  
        }  
    }  
}  

در پایان صفحه شما به شکل زیر نمایش داده می شود.