Topic:   How to display image from database in ModalPopup on ListView LinkButton Click using jQuery Ajax in ASP.Net
Nov 04, 2020 04:47 2 Replies 24 Views KRISHNA SWAROOP

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

<asp:ListView ID="ListView1" runat="server">

    <ItemTemplate>

        <asp:Label ID="Label1" runat="server" Text='<%#Eval("category_id") %>' ></asp:Label>

        <asp:LinkButton ID="LinkButton1" runat="server">View Detail</asp:LinkButton>

    </ItemTemplate>

</asp:ListView>

Prev Next
Topic Replies (2)
  1. 1
    idnkx user

    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

    1
    idnkx user

    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

Leave a Reply
Guest User

Not sure what course is right for you?

Choose the right course for you.
Get the help of our experts and find a course that best suits your needs.


Let's Connect