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> </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
