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 Binary Image using jQuery Ajax and Generic Handler in ASP.Net<p>Hi <a class="username" rel="jochk12345">jochk12345</a>,</p> <p>Refer below sample.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { Getdetails(); $(&#34;body&#34;).on(&#34;click&#34;, &#34;.btn-edit&#34;, function () { var id = $(this).closest(&#34;.tabledivprod&#34;).find(&#39;.PdtID&#39;)[0].innerText; var img = $(this).closest(&#34;.tabledivprod&#34;).find(&#39;img&#39;)[0].href; $(this).closest(&#34;.tabledivprod&#34;).find(&#34;#fuImage&#34;).show(); $(this).closest(&#34;.tabledivprod&#34;).find(&#34;.PdtID&#34;).html(&#39;&lt;input type=&#34;text&#34; id=&#34;name&#34; value=&#34;&#39; + id + &#39;&#34; /&gt;&#39;); $(this).closest(&#34;.tabledivprod&#34;).find(&#34;.PdtID&#34;).prepend(&#34;&lt;button class=&#39;btn-update&#39;&gt;Update&lt;/button&gt;&lt;button class=&#39;btn-cancel&#39;&gt;Cancel&lt;/button&gt;&#34;) $(this).hide(); }); $(&#34;body&#34;).on(&#34;click&#34;, &#34;.btn-update&#34;, function () { var id = $(this).closest(&#34;.tabledivprod&#34;).find(&#39;.PdtID&#39;).find(&#34;#name&#34;).val(); var img = $(this).closest(&#34;.tabledivprod&#34;).find(&#34;#fuImage&#34;).get(0); var files = img.files; var data = new FormData(); for (var i = 0; i &lt; files.length; i++) { data.append(files[i].name, files[i]); } $.ajax({ type: &#39;POST&#39;, data: data, url: &#34;Handler.ashx?Id=&#34; + id, cache: false, contentType: false, processData: false, success: function (r) { alert(r.d); }, error: function (r) { alert(r.d); } }); $(this).parents(&#34;tr&#34;).find(&#34;.btn-edit&#34;).show(); $(this).parents(&#34;tr&#34;).find(&#34;.btn-update&#34;).remove(); $(this).parents(&#34;tr&#34;).find(&#34;.btn-cancel&#34;).remove(); }); }); function Getdetails() { $.ajax({ type: &#34;POST&#34;, contentType: &#34;application/json; charset=utf-8&#34;, url: &#34;WebService.asmx/GetProducts&#34;, dataType: &#34;json&#34;, success: function (data) { for (var i = 0; i &lt; data.d.length; i++) { var id = data.d[i].Id; var image = &#34;data:image/jpg;base64,&#34; + data.d[i].ProdImage; $(&#34;#ttablepdtgrid&#34;).append( &#34;&lt;div class=trclass&gt;&#34; + &#34; &lt;tr&gt;&lt;td class=tdcolumn&gt;&#34; + &#34; &lt;div class=tabledivprod&gt;&#34; + &#34; &lt;img class= &#39;pdtimgclnt&#39; height=&#39;50px&#39; width=&#39;50px&#39; src=&#39;&#34; + image + &#34;&#39; /&gt;&lt;br /&gt;&#34; + &#34; &lt;input id=&#39;fuImage&#39; type=&#39;file&#39; style=&#39;display:none;&#39; /&gt;&#34; + &#34; &lt;div class=&#39;PdtID&#39;&gt;&#34; + id + &#34;&lt;/div&gt;&#34; + &#34; &lt;div&gt;&lt;a class=&#39;btn-edit&#39; data-id=&#39;&#34; + id + &#34;&#39; href=&#39;#&#39; id=btnedit role=&#39;button&#39; &gt;edit&lt;/a&gt;&lt;/div&gt;&#34; + &#34; &lt;br /&gt;&lt;br /&gt;&#34; + &#34; &lt;/div&gt;&#34; + &#34; &lt;/td&gt;&lt;/tr&gt;&#34; + &#34;&lt;/div&gt;&#34;); } }, error: function (response) { alert(&#34;Error while Showing update data&#34;); } }); } &lt;/script&gt; &lt;div id=&#34;ttablepdtgrid&#34;&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;"><strong>Code</strong></span></p> <p><strong>WebService.cs</strong></p> <pre class="brush: csharp">using System.Configuration; using System.Data.SqlClient; [WebMethod] public List&lt;Product&gt; GetProducts() { List&lt;Product&gt; products = new List&lt;Product&gt;(); string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString; string query = "SELECT TOP 2 * FROM tblFiles WHERE ContentType = 'image/jpeg'"; using (SqlConnection con = new SqlConnection(conString)) { SqlCommand cmd = new SqlCommand(query, con); con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { products.Add(new Product { Id = Convert.ToInt32(sdr["Id"]), ProdImage = Convert.ToBase64String((byte[])sdr["Data"], 0, ((byte[])sdr["Data"]).Length) }); } con.Close(); } return products; } public class Product { public int Id { get; set; } public string ProdImage { get; set; } }</pre> <p><strong>WebService.vb</strong></p> <pre class="brush: vb">Imports System.Web Imports System.Web.Services Imports System.Web.Services.Protocols Imports System.Data.SqlClient &#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 &lt;WebMethod()&gt; Public Function GetProducts() As List(Of Product) Dim products As List(Of Product) = New List(Of Product)() Dim conString As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Dim query As String = &#34;SELECT TOP 2 * FROM tblFiles WHERE ContentType = &#39;image/jpeg&#39;&#34; Using con As SqlConnection = New SqlConnection(conString) Dim cmd As SqlCommand = New SqlCommand(query, con) con.Open() Dim sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() products.Add(New Product With { .Id = Convert.ToInt32(sdr(&#34;Id&#34;)), .ProdImage = Convert.ToBase64String(CType(sdr(&#34;Data&#34;), Byte()), 0, (CType(sdr(&#34;Data&#34;), Byte())).Length) }) End While con.Close() End Using Return products End Function Public Class Product Public Property Id As Integer Public Property ProdImage As String End Class End Class</pre> <p><span style="text-decoration: underline;"><strong>Handler</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">&lt;%@ WebHandler Language=&#34;C#&#34; Class=&#34;Handler&#34; %&gt; using System; using System.Web; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { if (context.Request.Files.Count &gt; 0) { string id = context.Request.QueryString[&#34;Id&#34;]; HttpPostedFile postedFile = context.Request.Files[0]; string folderPath = context.Server.MapPath(&#34;~/Uploads/&#34;); string fileName = System.IO.Path.GetFileName(postedFile.FileName); postedFile.SaveAs(folderPath + fileName); byte[] binaryData = System.IO.File.ReadAllBytes(folderPath + fileName); string constr = System.Configuration.ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(constr)) { using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(&#34;UPDATE tblfiles SET Data = @Data WHERE Id = @Id&#34;, con)) { cmd.Parameters.AddWithValue(&#34;@Data&#34;, binaryData); cmd.Parameters.AddWithValue(&#34;@Id&#34;, id); con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } } } public bool IsReusable { get { return false; } } }</pre> <p><strong>VB.Net</strong>&nbsp;</p> <pre class="brush: vb">&lt;%@ WebHandler Language=&#34;VB&#34; Class=&#34;Handler&#34; %&gt; Imports System Imports System.Web Public Class Handler : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest If context.Request.Files.Count &gt; 0 Then Dim id As String = context.Request.QueryString(&#34;Id&#34;) Dim postedFile As HttpPostedFile = context.Request.Files(0) Dim folderPath As String = context.Server.MapPath(&#34;~/Uploads/&#34;) Dim fileName As String = System.IO.Path.GetFileName(postedFile.FileName) postedFile.SaveAs(folderPath &amp; fileName) Dim binaryData As Byte() = System.IO.File.ReadAllBytes(folderPath &amp; fileName) Dim constr As String = System.Configuration.ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Using con As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(constr) Using cmd As System.Data.SqlClient.SqlCommand = New System.Data.SqlClient.SqlCommand(&#34;UPDATE tblfiles SET Data = @Data WHERE Id = @Id&#34;, con) cmd.Parameters.AddWithValue(&#34;@Data&#34;, binaryData) cmd.Parameters.AddWithValue(&#34;@Id&#34;, id) con.Open() cmd.ExecuteNonQuery() con.Close() End Using End Using End If End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><img src="https://imgur.com/gMTKewG.gif" alt="" width="342" height="294" /></p>https://www.aspforums.net:443/Threads/900127/Edit-Update-Binary-Image-using-jQuery-Ajax-and-Generic-Handler-in-ASPNet/https://www.aspforums.net:443/Threads/900127/Edit-Update-Binary-Image-using-jQuery-Ajax-and-Generic-Handler-in-ASPNet/Mon, 10 Jun 2019 07:03:25 GMT