ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Edit Update row in jQuery DataTables using Ajax JSON and WebService in ASP.Net<p>Hi jovceka,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Database</span></strong></p> <p>For this example&nbsp;i have used table named&nbsp;<u>tblFiles</u>&nbsp;whose schema is defined as follows.</p> <p><img src="https://www.aspsnippets.com/Handlers/DownloadFile.ashx?File=4ebbac64-598a-4fed-9c6d-739c716bfb57.png" alt="" /></p> <p>For save record in databse refer below article.</p> <h1 class="header"><a href="https://www.aspsnippets.com/Articles/Save-and-Retrieve-images-from-database-in-ASPNet.aspx">Save and Retrieve images from database in ASP.Net</a></h1> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-1.11.1.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { $.ajax({ url: &#39;&lt;%= Page.ResolveUrl(&#34;~/WebServiceCS.asmx/GetFiles&#34;)%&gt;&#39;, method: &#39;post&#39;, dataType: &#39;json&#39;, success: function (data) { $(&#39;#datatable&#39;).dataTable({ paging: true, sort: true, pageLength: 3, searching: true, data: data, columns: [ { &#39;data&#39;: &#39;Id&#39; }, { &#39;data&#39;: &#39;Name&#39; }, { &#39;data&#39;: &#39;Data&#39;, &#39;sortable&#39;: false, &#39;searchable&#39;: false, &#39;render&#39;: function (Data) { if (!Data) { return &#39;N/A&#39;; } else { var img = &#39;data:image/png;base64,&#39; + Data; return &#39;&lt;img src=&#34;&#39; + img + &#39;&#34; height=&#34;50px&#34; width=&#34;50px&#34; /&gt;&#39;; } } }, { &#34;data&#34;: null, &#34;defaultContent&#34;: &#39;&lt;input type=&#34;button&#34; id=&#34;btnEdit&#34; class=&#34;btn btn-primary&#34; value=&#34;Edit&#34; /&gt;&#39; } ] }); }, error: function (response) { alert(response.responseText); } }); $(&#39;body&#39;).on(&#39;click&#39;, &#39;[id*=btnEdit]&#39;, function () { var data = $(this).parents(&#39;tr&#39;).find(&#39;td&#39;); $(&#39;[id*=tbtUpdate]&#39;).show(); var id = data.eq(0).html(); var name = data.eq(1).html(); $(&#39;[id*=txtId]&#39;).val(id); $(&#39;[id*=txtName]&#39;).val(name); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body style=&#34;font-family: Arial&#34;&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;table id=&#34;tbtUpdate&#34; style=&#34;display: none;&#34; class=&#34;table&#34;&gt; &lt;tr&gt; &lt;td&gt;Id&lt;/td&gt; &lt;td&gt;&lt;asp:TextBox ID=&#34;txtId&#34; runat=&#34;server&#34;&gt;&lt;/asp:TextBox&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Name&lt;/td&gt; &lt;td&gt;&lt;asp:TextBox ID=&#34;txtName&#34; runat=&#34;server&#34;&gt;&lt;/asp:TextBox&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Image&lt;/td&gt; &lt;td&gt;&lt;asp:FileUpload ID=&#34;fuUpload&#34; runat=&#34;server&#34; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align=&#34;center&#34;&gt;&lt;asp:Button Text=&#34;Update&#34; runat=&#34;server&#34; OnClick=&#34;Update&#34; class=&#34;btn btn-primary&#34; /&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br /&gt; &lt;div style=&#34;width: 100%; border: 1px solid black; padding: 3px&#34;&gt; &lt;table id=&#34;datatable&#34;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Image&lt;/th&gt; &lt;th&gt;Edit&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Image&lt;/th&gt; &lt;th&gt;Edit&lt;/th&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;/table&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><span style="text-decoration: underline;"><strong>WebService</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Script.Serialization; using System.Web.Services; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public class File { public int Id { get; set; } public string Name { get; set; } public string Data { get; set; } } [WebMethod] public void GetFiles() { string cs = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; List&lt;File&gt; files = new List&lt;File&gt;(); using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand(&#34;SELECT id,Name,Data FROM tblFiles WHERE ContentType = &#39;image/jpeg&#39;&#34;, con); cmd.CommandType = CommandType.Text; con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { File file = new File(); file.Id = Convert.ToInt32(rdr[&#34;id&#34;]); file.Name = rdr[&#34;Name&#34;].ToString(); file.Data = Convert.ToBase64String((byte[])rdr[&#34;Data&#34;]); files.Add(file); } } JavaScriptSerializer js = new JavaScriptSerializer(); Context.Response.Write(js.Serialize(files)); } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Web Imports System.Collections.Generic Imports System.Configuration Imports System.Data Imports System.Data.SqlClient Imports System.Web.Script.Serialization Imports System.Web.Services Imports System.Web.Services.Protocols &#39; To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. &lt;System.Web.Script.Services.ScriptService()&gt; _ &lt;WebService(Namespace:=&#34;http://tempuri.org/&#34;)&gt; _ &lt;WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)&gt; _ &lt;Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()&gt; _ Public Class WebService Inherits System.Web.Services.WebService Public Class File Public Property Id As Integer Public Property Name As String Public Property Data As String End Class &lt;WebMethod()&gt; _ Public Sub GetFiles() Dim cs As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Dim files As List(Of File) = New List(Of File)() Using con As SqlConnection = New SqlConnection(cs) Dim cmd As SqlCommand = New SqlCommand(&#34;SELECT id,Name,Data FROM tblFiles WHERE ContentType = &#39;image/jpeg&#39;&#34;, con) cmd.CommandType = CommandType.Text con.Open() Dim rdr As SqlDataReader = cmd.ExecuteReader() While rdr.Read() Dim file As File = New File() file.Id = Convert.ToInt32(rdr(&#34;id&#34;)) file.Name = rdr(&#34;Name&#34;).ToString() file.Data = Convert.ToBase64String(CType(rdr(&#34;Data&#34;), Byte())) files.Add(file) End While End Using Dim js As JavaScriptSerializer = New JavaScriptSerializer() Context.Response.Write(js.Serialize(files)) End Sub End Class</pre> <p><strong><span style="text-decoration: underline;">Namespaces </span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Configuration; using System.Data.SqlClient; using System.IO;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Configuration Imports System.Data.SqlClient Imports System.IO</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">protected void Update(object sender, EventArgs e) { string contentType = fuUpload.PostedFile.ContentType; using (Stream fs = fuUpload.PostedFile.InputStream) { using (BinaryReader br = new BinaryReader(fs)) { byte[] bytes = br.ReadBytes((Int32)fs.Length); using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString)) { using (SqlCommand cmd = new SqlCommand(&#34;UPDATE tblFiles SET Name=@Name, ContentType=@ContentType, Data=@Data WHERE id=@Id&#34;)) { cmd.Parameters.AddWithValue(&#34;@Id&#34;, txtId.Text.Trim()); cmd.Parameters.AddWithValue(&#34;@Name&#34;, txtName.Text.Trim()); cmd.Parameters.AddWithValue(&#34;@ContentType&#34;, contentType); cmd.Parameters.AddWithValue(&#34;@Data&#34;, bytes); cmd.Connection = con; con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } } } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Protected Sub Update(ByVal sender As Object, ByVal e As EventArgs) Dim contentType As String = fuUpload.PostedFile.ContentType Using fs As Stream = fuUpload.PostedFile.InputStream Using br As BinaryReader = New BinaryReader(fs) Dim bytes As Byte() = br.ReadBytes(CType(fs.Length, Int32)) Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString) Using cmd As SqlCommand = New SqlCommand(&#34;UPDATE tblFiles SET Name=@Name, ContentType=@ContentType, Data=@Data WHERE id=@Id&#34;) cmd.Parameters.AddWithValue(&#34;@Id&#34;, txtId.Text.Trim()) cmd.Parameters.AddWithValue(&#34;@Name&#34;, txtName.Text.Trim()) cmd.Parameters.AddWithValue(&#34;@ContentType&#34;, contentType) cmd.Parameters.AddWithValue(&#34;@Data&#34;, bytes) cmd.Connection = con con.Open() cmd.ExecuteNonQuery() con.Close() End Using End Using End Using End Using End Sub</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/7Z6GRHI.gif" alt="" width="472" height="445" /></span></strong></p>https://www.aspforums.net:443/Threads/171159/Edit-Update-row-in-jQuery-DataTables-using-Ajax-JSON-and-WebService-in-ASPNet/https://www.aspforums.net:443/Threads/171159/Edit-Update-row-in-jQuery-DataTables-using-Ajax-JSON-and-WebService-in-ASPNet/Mon, 01 Jul 2019 03:48:41 GMT