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
