Edit Update Binary Image using jQuery Ajax and Generic Handler in ASP.Net

Last Reply 2 months ago By pandeyism

Posted 2 months ago

how can i edit update binary image and name using jquery ajax json web method in the json table itself (with file upload and textbox as edit controls)

with below code showing name in textbox and binary image details in file upload control.

script type="text/javascript">
    $(function () {
        Getdetails();
    });
    function Getdetails() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/GetProducts",
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    var id = data.d[i].Id;
                  
                    var image = "data:image/jpg;base64," + data.d[i].ProdImage;
                    $("#ttablepdtgrid").append(
                    "<div class=trclass>" +
                    "   <tr><td class=tdcolumn>" +
                    "       <div class=tabledivprod>" +
                    "           <img class=pdtimgclnt src='" + image + "' />" +
                   
                    "           <div class=PdtID>" + id + "</div>" +
   				'<p><a class="btn" data-id="' + data.d[i].id + '" id=btnedit role="button" >edit</a></p>' +
                    "           <br /><br />" +
                    "       </div>" +
                    "   </td></tr>" +
                    "</div>");
                }
            },
            error: function (response) {
                alert("Error while Showing update data");
            }
        });
    }
</script>
 

 

<div id="ttablepdtgrid">
</div>

 

    [WebMethod]
    public List<Product> GetProducts()
    {
        List<Product> products = new List<Product>();
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT * FROM tblFiles";
        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; }
    }

 

Posted 2 months ago

Hi jochk12345,

Refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        Getdetails();
        $("body").on("click", ".btn-edit", function () {
            var id = $(this).closest(".tabledivprod").find('.PdtID')[0].innerText;
            var img = $(this).closest(".tabledivprod").find('img')[0].href;
            $(this).closest(".tabledivprod").find("#fuImage").show();
            $(this).closest(".tabledivprod").find(".PdtID").html('<input type="text" id="name" value="' + id + '" />');
            $(this).closest(".tabledivprod").find(".PdtID").prepend("<button class='btn-update'>Update</button><button class='btn-cancel'>Cancel</button>")
            $(this).hide();
        });
        $("body").on("click", ".btn-update", function () {
            var id = $(this).closest(".tabledivprod").find('.PdtID').find("#name").val();
            var img = $(this).closest(".tabledivprod").find("#fuImage").get(0);
            var files = img.files;
            var data = new FormData();
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }
            $.ajax({
                type: 'POST',
                data: data,
                url: "Handler.ashx?Id=" + id,
                cache: false,
                contentType: false,
                processData: false,
                success: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
            $(this).parents("tr").find(".btn-edit").show();
            $(this).parents("tr").find(".btn-update").remove();
            $(this).parents("tr").find(".btn-cancel").remove();
        });
    });

    function Getdetails() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/GetProducts",
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    var id = data.d[i].Id;
                    var image = "data:image/jpg;base64," + data.d[i].ProdImage;
                    $("#ttablepdtgrid").append(
                    "<div class=trclass>" +
                    "   <tr><td class=tdcolumn>" +
                    "       <div class=tabledivprod>" +
                    "           <img class= 'pdtimgclnt' height='50px' width='50px' src='" + image + "' /><br />" +
                    "           <input id='fuImage' type='file' style='display:none;' />" +
                    "           <div class='PdtID'>" + id + "</div>" +
                    "               <div><a class='btn-edit' data-id='" + id + "' href='#' id=btnedit role='button' >edit</a></div>" +
                    "           <br /><br />" +
                    "       </div>" +
                    "   </td></tr>" +
                    "</div>");
                }
            },
            error: function (response) {
                alert("Error while Showing update data");
            }
        });
    }
</script>
<div id="ttablepdtgrid">
</div>

Code

WebService.cs

using System.Configuration;
using System.Data.SqlClient;

[WebMethod]
public List<Product> GetProducts()
{
    List<Product> products = new List<Product>();
    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; }
}

WebService.vb

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService

    <WebMethod()>
    Public Function GetProducts() As List(Of Product)
        Dim products As List(Of Product) = New List(Of Product)()
        Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim query As String = "SELECT TOP 2 * FROM tblFiles WHERE ContentType = 'image/jpeg'"
        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("Id")),
                    .ProdImage = Convert.ToBase64String(CType(sdr("Data"), Byte()), 0, (CType(sdr("Data"), 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

Handler

C#

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        if (context.Request.Files.Count > 0)
        {
            string id = context.Request.QueryString["Id"];
            HttpPostedFile postedFile = context.Request.Files[0];
            string folderPath = context.Server.MapPath("~/Uploads/");
            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["constr"].ConnectionString;
            using (System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(constr))
            {
                using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand("UPDATE tblfiles SET Data = @Data WHERE Id = @Id", con))
                {
                    cmd.Parameters.AddWithValue("@Data", binaryData);
                    cmd.Parameters.AddWithValue("@Id", id);
                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                }
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

VB.Net 

<%@ WebHandler Language="VB" Class="Handler" %>

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 > 0 Then
            Dim id As String = context.Request.QueryString("Id")
            Dim postedFile As HttpPostedFile = context.Request.Files(0)
            Dim folderPath As String = context.Server.MapPath("~/Uploads/")
            Dim fileName As String = System.IO.Path.GetFileName(postedFile.FileName)
            postedFile.SaveAs(folderPath & fileName)
            Dim binaryData As Byte() = System.IO.File.ReadAllBytes(folderPath & fileName)
            Dim constr As String = System.Configuration.ConfigurationManager.ConnectionStrings("constr").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("UPDATE tblfiles SET Data = @Data WHERE Id = @Id", con)
                    cmd.Parameters.AddWithValue("@Data", binaryData)
                    cmd.Parameters.AddWithValue("@Id", 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

Screenshot