Search (Filter) ASP.Net GridView with Image using jQuery Ajax

Question

makumbi

SOLVED CLOSED ACTIVE ANSWERED
User: makumbi
Posted: on Aug 20, 2023 10:51 PM
Forum: Data Controls
Answer: 1
Views: 1999

I would like to search and then display image in the GridView.

Please help

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="../Scripts/jquery-1.8.3.min.js"></script>
    <script src="../Scripts/ASPSnippets_Pager.min.js"></script>
    <title></title>
</head>
    <script type="text/javascript">
        $(function () {
            GetCustomers(1);
            $("body").on("keyup", "[id*=txtSearch]", function () {
                GetCustomers(parseInt(1));
            });
            $("body").on("click", ".Pager .page", function () {
                GetCustomers(parseInt($(this).attr('page')));
            });
        });
 
        function SearchTerm() {
            return jQuery.trim($("[id*=txtSearch]").val());
        };
        function GetCustomers(pageIndex) {
            $.ajax({
                type: "POST",
                url: "SearchUploadPhoto.aspx/GetCustomers",
                data: '{searchTerm: "' + SearchTerm() + '", pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
        var row;
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var customers = xml.find("Customers");
            if (row == null) {
                row = $("[id*=SearchGrid] tr:last-child").clone(true);
            }
            var footer = $("[id*=SearchGrid] tr:last-child").clone(true);
            $("[id*=SearchGrid] tr").not($("[id*=SearchGrid] tr:first-child")).remove();
            if (customers.length > 0) {
                $.each(customers, function () {
                    var customer = $(this);
                    $("td", row).eq(0).html($(this).find("ADMNO").text());
                    $("td", row).eq(1).html($(this).find("Name").text());
                    $("td", row).eq(2).html($(this).find("Class").text());
                    $("td", row).eq(3).html($(this).find("Stream").text());
                    $("td", row).eq(4).html($(this).find("SEX").text());
                    $("td", row).eq(7).html($(this).find("STATUS").text());
                    $("td", row).eq(5).html($(this).find("studenttype").text());
                    $("td", row).eq(6).html($(this).find("House").text());
                    $("td", row).eq(8).html("<a href='javascript:;' onclick='GetData(this)'>Select</a>");
                    $("[id*=SearchGrid]").append(row);
                    row = $("[id*=SearchGrid] tr:last-child").clone(true);
                });
                $("[id*=SearchGrid]").append(footer);
                var pager = xml.find("Pager");
                $(".Pager").ASPSnippets_Pager({
                    ActiveCssClass: "current",
                    PagerCssClass: "pager",
                    PageIndex: parseInt(pager.find("PageIndex").text()),
                    PageSize: parseInt(pager.find("PageSize").text()),
                    RecordCount: parseInt(pager.find("RecordCount").text())
                });
 
                $(".Name").each(function () {
                    var searchPattern = new RegExp('(' + SearchTerm() + ')', 'ig');
                    $(this).html($(this).text().replace(searchPattern, "<span class = 'highlight'>" + SearchTerm() + "</span>"));
                });
            } else {
                var empty_row = row.clone(true);
                $("td:first-child", empty_row).attr("colspan", $("td", row).length);
                $("td:first-child", empty_row).attr("align", "center");
                $("td:first-child", empty_row).html("No records found for the search criteria.");
                $("td", empty_row).not($("td:first-child", empty_row)).remove();
                $("[id*=SearchGrid]").append(empty_row);
            }
        };

        function GetData(ele) {
            var row = $(ele).closest('tr');
            var id = $("td", row).eq(0).html();
            var name = $("td", row).eq(1).html();
            var classr = $("td", row).eq(2).html();
            var streamr = $("td", row).eq(3).html();

            $('[id*=hfId]').val(id);
            $('[id*=lblId]').html(id);
            $('[id*=Namesdata]').val(name);
            $('[id*=admn]').val(id);
            $('[id*=Classstream]').val(classr+streamr);

        }
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
    <script type="text/javascript">
        function ShowPopup() {
            $(function () {
                $("#dialog").dialog({
                    title: "Original Image",
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    },
                    modal: true
                });
            });
        }
    </script>
<body style="background-color: #66CCFF">
    <form id="form1" runat="server">
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
        <hr />
        <asp:Image ID="Image1" runat="server" Height="70px" Width="86px" />
          <asp:Panel ID="Panel1" runat="server" BorderStyle="Double" Width="673px" Height="27px">
              <table class="auto-style2">
                  <tr>
                      <td class="auto-style5">
                          Search</td>
                      <td class="auto-style5">
                          <asp:TextBox ID="txtSearch" runat="server" Width="92px"></asp:TextBox>
                      </td>
                      <td class="auto-style6">Admno</td>
                      <td class="auto-style6">
                          <asp:TextBox ID="admn" runat="server" Width="111px" ReadOnly="True"></asp:TextBox>
                      </td>
                      <td class="auto-style4">Name</td>
                      <td class="auto-style7">
                          <asp:TextBox ID="Namesdata" runat="server" Width="160px" ReadOnly="True"></asp:TextBox>
                      </td>
                      <td class="auto-style3">Class</td>
                      <td class="auto-style3">
                          <asp:TextBox ID="Classstream" runat="server" Width="79px" ReadOnly="True"></asp:TextBox>
                      </td>
                  </tr>
              </table>
          </asp:Panel>
                          <asp:TextBox ID="admn0" runat="server" Width="111px" ReadOnly="True" Visible="False"></asp:TextBox>
          <br />
          <table class="auto-style9">
              <tr>
                  <td class="auto-style8">
<asp:GridView ID="SearchGrid" runat="server" AutoGenerateColumns="False" Width="864px"  OnRowDataBound="OnRowDataBound" >
    <Columns>
        <asp:TemplateField HeaderText="ADMNO">
            <EditItemTemplate>
                <asp:TextBox ID="admno" runat="server" Text='<%# Eval("ADMNO") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("ADMNO") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
         <asp:TemplateField HeaderText="Student Name">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

        <asp:TemplateField HeaderText="Class">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Class") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label3" runat="server" Text='<%# Bind("Class") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Stream">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Stream") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label4" runat="server" Text='<%# Bind("Stream") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sex">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("Sex") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label7" runat="server" Text='<%# Bind("Sex") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Student Type">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("studenttype") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label5" runat="server" Text='<%# Bind("studenttype") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Colour">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("House") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label6" runat="server" Text='<%# Bind("House") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Status">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("STATUS") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label8" runat="server" Text='<%# Bind("STATUS") %>'></asp:Label>                    
            </ItemTemplate>
                </asp:TemplateField>
          <asp:TemplateField HeaderText="Image">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" />
            </ItemTemplate>
              <ControlStyle Height="25px" Width="25px" />
        </asp:TemplateField>
           <asp:ButtonField CommandName="Select" HeaderText="Select" Text="Select" />
            <asp:ButtonField CommandName="Select" HeaderText="Select" ShowHeader="True" Text="Select" />     
    </Columns>
</asp:GridView>
        <div id="dialog" style="display: none; height: auto; width: auto" align="center">
            <asp:Image ID="Image2" runat="server" Visible="false" Height="200px" Width="200px" />
        </div>
                  </td>
                  <td>&nbsp;</td>
              </tr>
              <tr>
                  <td colspan="2"></td>
              </tr>
          </table>
          <table class="ui-accordion">
              <tr>               
                  <td>
                      <asp:TextBox ID="Names" runat="server" Width="167px"></asp:TextBox>
                  </td>
              </tr>
          </table>
    </form>
</body>
</html>

Sqlserver code

ALTER PROCEDURE [dbo].[GetCustomers_Pager2022]
      @PageIndex INT = 1
      ,@PageSize INT = 50
      ,@RecordCount INT OUTPUT,
@SearchTerm nvarchar(200)
AS
BEGIN
      SET NOCOUNT ON;
      SELECT IDENTITY(INT,1,1) AS RowNumber
      ,[ADMNO]
      ,[Name]
      ,[Class]
      ,[Stream]
      ,[House]
      ,studenttype
	  ,[STATUS]
       ,[SEX],Regno,autofield,Photo
           INTO #Results
      FROM P3P7
       WHERE  (Photo IS NOT NULL) AND    ([Name] LIKE @SearchTerm  or [Name] LIKE '%'+@SearchTerm+'%' or [Name] LIKE '%' + @SearchTerm or [Name] LIKE @SearchTerm + '%') OR @SearchTerm = '' OR @SearchTerm = ''
      SELECT @RecordCount = COUNT(*)
      FROM #Results
            
      SELECT * FROM #Results
      WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
      
      DROP TABLE #Results
END

Imports System.IO
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Public Class SearchUploadPhoto
    Inherits System.Web.UI.Page
    Dim constr As String = ConfigurationManager.ConnectionStrings("SMIS2022ConnectionString").ConnectionString
    Private Shared PageSize As Integer = 25

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindDummyRow()
            Dim constr As String = ConfigurationManager.ConnectionStrings("SMIS2022ConnectionString").ConnectionString
            Using conn As SqlConnection = New SqlConnection(constr)
                Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT * FROM P3P7 WHERE (Photo IS NOT NULL)", conn)
                    Dim dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    SearchGrid.DataSource = dt
                    SearchGrid.DataBind()
                End Using
            End Using

            '  SearchGrid.DataSource = GetData("SELECT * FROM dbo.P3P7 WHERE (Photo IS NOT NULL)")
            ' SearchGrid.DataBind()
        End If
    End Sub
    Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs) Handles btnUpload.Click
        Dim company As String = Request.Form(admn.UniqueID)
        Dim k As String = company
        Dim f As String = admn0.Text
        If String.IsNullOrEmpty(company) Then
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "askConfirmk", "alert('Please you Must Search Student and Click on Select to Upload   ... !!')", True)
            Exit Sub
        End If

        If FileUpload1.HasFile Then
            Dim fs As Stream = FileUpload1.PostedFile.InputStream
            Dim br As New BinaryReader(fs)
            Dim bytes As Byte() = br.ReadBytes(DirectCast(fs.Length, Long))
            Using Cont As New SqlConnection(constr)
                Cont.Open()
                Using cmd As New SqlCommand
                    cmd.Connection = Cont
                    cmd.CommandType = CommandType.StoredProcedure
                    cmd.CommandText = "GetPhotoinsertUPDATE"
                    cmd.Parameters.Add("@p", SqlDbType.Binary).Value = bytes
                    cmd.Parameters.AddWithValue("@ct", company)
                    cmd.ExecuteNonQuery()
                    Cont.Close()
                    'loaddata()
                    ' Exit Sub
                End Using
            End Using

            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "askConfirmk", "alert('Photo Uploaded Successfully   ... !!')", True)
            Exit Sub
        End If

        Response.Redirect(Request.Url.AbsoluteUri)
    End Sub
    Private Sub loaddata()
        Dim constr As String = ConfigurationManager.ConnectionStrings("SMIS2022ConnectionString").ConnectionString
        Using conn As SqlConnection = New SqlConnection(constr)
            Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT * FROM P3P7 WHERE (Photo IS NOT NULL)", conn)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                SearchGrid.DataSource = dt
                SearchGrid.DataBind()
            End Using
        End Using
    End Sub

    Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then

            Dim dr As DataRowView = CType(e.Row.DataItem, DataRowView)
            If Not IsDBNull(dr("Photo")) Then
                Dim imageUrl As String = "data:image/bmp;base64," & Convert.ToBase64String(CType(dr("Photo"), Byte()))
                CType(e.Row.FindControl("Image1"), Image).ImageUrl = imageUrl

            End If
        End If
    End Sub

    Private Sub BindDummyRow()
        Dim dummy As DataTable = New DataTable()
        dummy.Columns.Add("ADMNO")
        dummy.Columns.Add("Name")
        dummy.Columns.Add("Class")
        dummy.Columns.Add("Stream")
        dummy.Columns.Add("sex")
        dummy.Columns.Add("Status")
        dummy.Columns.Add("studenttype")
        dummy.Columns.Add("House")
        dummy.Columns.Add("Photo")
        dummy.Columns.Add("autofield")
        dummy.Rows.Add()
        SearchGrid.DataSource = dummy
        SearchGrid.DataBind()
        'sample()
        loaddata()
    End Sub
    <System.Web.Services.WebMethod()>
    Public Shared Function GetCustomers(ByVal searchTerm As String, ByVal pageIndex As Integer) As String
        Dim query As String = "[GetCustomers_Pager2022]"
        Dim cmd As SqlCommand = New SqlCommand(query)
        cmd.CommandType = CommandType.StoredProcedure
        cmd.Parameters.AddWithValue("@SearchTerm", searchTerm)
        cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
        cmd.Parameters.AddWithValue("@PageSize", 25)
        cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
        Return GetData(cmd, pageIndex).GetXml()

    End Function
    Private Shared Function GetData(ByVal cmd As SqlCommand, ByVal pageIndex As Integer) As DataSet
        Dim strConnString As String = ConfigurationManager.ConnectionStrings("SMIS2022ConnectionString").ConnectionString
        Using con As SqlConnection = New SqlConnection(strConnString)
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using ds As DataSet = New DataSet()
                    sda.Fill(ds, "Customers")
                    Dim dt As DataTable = New DataTable("Pager")
                    dt.Columns.Add("PageIndex")
                    dt.Columns.Add("PageSize")
                    dt.Columns.Add("RecordCount")
                    dt.Rows.Add()
                    dt.Rows(0)("PageIndex") = pageIndex
                    dt.Rows(0)("PageSize") = 10
                    dt.Rows(0)("RecordCount") = cmd.Parameters("@RecordCount").Value
                    ds.Tables.Add(dt)
                    Return ds
                End Using
            End Using
        End Using
    End Function
    Protected Sub GetOriginalImage(sender As Object, e As EventArgs)
        Dim id As String = TryCast(sender, ImageButton).ImageUrl.Split("="c)(TryCast(sender, ImageButton).ImageUrl.Split("="c).Length - 1)
        Dim text As String = (TryCast(sender, ImageButton)).ID
        If Not String.IsNullOrEmpty(id) Then
            Dim bytes As Byte() = DirectCast(GetData(Convert.ToString("SELECT Photo FROM P3P7 WHERE autofield =") & id).Rows(0)("Photo"), Byte())
            Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
            Image1.ImageUrl = Convert.ToString("data:image/bmp;base64,") & base64String
            Image1.Visible = True
        End If
        ClientScript.RegisterStartupScript(Me.[GetType](), "Popup", "ShowPopup();", True)
    End Sub


    Private Function GetData(query As String) As DataTable
        Dim dt As New DataTable()
        Dim constr As String = ConfigurationManager.ConnectionStrings("SMIS2022ConnectionString").ConnectionString
        Using con As New SqlConnection(constr)
            Using cmd As New SqlCommand(query)
                Using sda As New SqlDataAdapter()
                    cmd.CommandType = CommandType.Text
                    cmd.Connection = con
                    sda.SelectCommand = cmd
                    sda.Fill(dt)
                End Using
            End Using
            Return dt
        End Using
    End Function
End Class

Search (Filter) ASP.Net GridView with Image using jQuery Ajax

Search and Filter ASP.Net GridView with image as you type in TextBox using jQuery AJAX

Company

Explore

Follow us

Contact Us