به روزرسانی دیتابیس هنگام تغییر CheckBox با استفاده از jQuery

شنبه 2 آبان 1394

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

به روزرسانی دیتابیس هنگام تغییر CheckBox با استفاده از jQuery

 در این مقاله قصد داریم با استفاده از 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)  
        {  
        }  
    }  
}  

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

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

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

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

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

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