Topic: How to display image from database in ModalPopup on ListView LinkButton Click using jQuery Ajax in ASP.Net
I have this listview and a linkbutton, i want on linkbutton to pass the label1 id to and show the popup to display category name
i want to do it through jQuery
User click on linkbutton, since its listview so there are multiple records so on click get the label1 category id 3.
Show popup pass the id to category table and through jQuery it returns the categorname and image and show in popup
|
1 2 3 4 5 6 |
|
Author: KRISHNA SWAROOP
Not sure what solution is right for you?
Choose the right one for you.Get the help of the experts and find a solution that best suits your needs.
Let`s Connect
ARUNA
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
View Detail
×
Category Details
$(function () {
$('[id*=LinkButton1]').on('click', function () {
$('#MyPopup').find('[id*=lblName]').html('');
$('#MyPopup').find('[id*=imgCategory]').attr('src', '');
var categoryId = $(this).prev('[id*=Label1]').html();
$.ajax({
type: "POST",
url: "Default.aspx/GetDetails",
data: '{id: ' + categoryId + ' }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#MyPopup').find('[id*=lblName]').html(response.d[1]);
$('#MyPopup').find('[id*=imgCategory]').attr('src', response.d[0]);
$('#MyPopup').modal('show');
},
error: function (response) { alert(response.responseText); }
});
return false;
});
});
Namespaces
C#
1
2
3 using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
VB.Net
1
2
3 Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add(new System.Data.DataColumn("category_id"));
dt.Rows.Add(1);
dt.Rows.Add(2);
dt.Rows.Add(3);
ListView1.DataSource = dt;
ListView1.DataBind();
}
}
[WebMethod]
public static object[] GetDetails(int id)
{
object[] details = null;
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT Name,Data FROM tblFiles WHERE Id = @Id"))
{
cmd.Parameters.AddWithValue("@Id", id);
cmd.Connection = con;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
if (sdr.Read())
{
byte[] bytes = (byte[])sdr["Data"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
string imageUrl = "data:image/png;base64," + base64String;
string name = sdr["Name"].ToString();
details = new object[] { imageUrl, name };
}
con.Close();
}
}
return details;
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As System.Data.DataTable = New System.Data.DataTable()
dt.Columns.Add(New System.Data.DataColumn("category_id"))
dt.Rows.Add(1)
dt.Rows.Add(2)
dt.Rows.Add(3)
ListView1.DataSource = dt
ListView1.DataBind()
End If
End Sub
Public Shared Function GetDetails(ByVal id As Integer) As Object()
Dim details As Object() = Nothing
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT Name,Data FROM tblFiles WHERE Id = @Id")
cmd.Parameters.AddWithValue("@Id", id)
cmd.Connection = con
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
If sdr.Read() Then
Dim bytes As Byte() = CType(sdr("Data"), Byte())
Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
Dim imageUrl As String = "data:image/png;base64," & base64String
Dim name As String = sdr("Name").ToString()
details = New Object() {imageUrl, name}
End If
con.Close()
End Using
PARTH
Check this example. Now please take its reference and correct your code.
HTML
View Detail
×
Category Details
$(function () {
$('[id*=LinkButton1]').on('click', function () {
$('#MyPopup').find('[id*=lblName]').html('');
$('#MyPopup').find('[id*=imgCategory]').attr('src', '');
var categoryId = $(this).prev('[id*=Label1]').html();
$.ajax({
type: "POST",
url: "Default.aspx/GetDetails",
data: '{id: ' + categoryId + ' }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#MyPopup').find('[id*=lblName]').html(response.d[1]);
$('#MyPopup').find('[id*=imgCategory]').attr('src', response.d[0]);
$('#MyPopup').modal('show');
},
error: function (response) { alert(response.responseText); }
});
return false;
});
});
C#
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
VB.Net
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add(new System.Data.DataColumn("category_id"));
dt.Rows.Add(1);
dt.Rows.Add(2);
dt.Rows.Add(3);
ListView1.DataSource = dt;
ListView1.DataBind();
}
}
[WebMethod]
public static object[] GetDetails(int id)
{
object[] details = null;
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT Name,Data FROM tblFiles WHERE Id = @Id"))
{
cmd.Parameters.AddWithValue("@Id", id);
cmd.Connection = con;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
if (sdr.Read())
{
byte[] bytes = (byte[])sdr["Data"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
string imageUrl = "data:image/png;base64," + base64String;
string name = sdr["Name"].ToString();
details = new object[] { imageUrl, name };
}
con.Close();
}
}
return details;
}
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As System.Data.DataTable = New System.Data.DataTable()
dt.Columns.Add(New System.Data.DataColumn("category_id"))
dt.Rows.Add(1)
dt.Rows.Add(2)
dt.Rows.Add(3)
ListView1.DataSource = dt
ListView1.DataBind()
End If
End Sub
Public Shared Function GetDetails(ByVal id As Integer) As Object()
Dim details As Object() = Nothing
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT Name,Data FROM tblFiles WHERE Id = @Id")
cmd.Parameters.AddWithValue("@Id", id)
cmd.Connection = con
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
If sdr.Read() Then
Dim bytes As Byte() = CType(sdr("Data"), Byte())
Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
Dim imageUrl As String = "data:image/png;base64," & base64String
Dim name As String = sdr("Name").ToString()
details = New Object() {imageUrl, name}
End If
con.Close()
End Using
End Using
Return details
End Function