به روزرسانی دیتابیس هنگام تغییر CheckBox با استفاده از jQuery
شنبه 2 آبان 1394در این مقاله قصد داریم با استفاده از 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) { } } }
در پایان صفحه شما به شکل زیر نمایش داده می شود.
- ASP.net
- 2k بازدید
- 5 تشکر