Hi makumbi,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="ASPSnippets_Pager.min.js"></script>
<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: "Default.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("CustomerID").text());
$("td", row).eq(1).html($(this).find("ContactName").text());
$("td", row).eq(2).html($(this).find("City").text());
$("td", row).eq(3).html($(this).find("Country").text());
$("td", row).eq(4).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 city = $("td", row).eq(2).html();
var country = $("td", row).eq(3).html();
$('[id*=lblId]').html(id);
$('[id*=txtName]').val(name);
$('[id*=txtCity]').val(city);
$('[id*=txtCountry]').val(country);
$('[id*=myModal]').modal('show');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server" Style="background-color: #FFFFFF" Height="600px" BorderColor="#6699FF" BorderStyle="Double" Font-Size="Medium">
<table class="auto-style1">
<td class="auto-style32" style="background-color: #FFFFFF">
<asp:GridView ID="SearchGrid" runat="server" AutoGenerateColumns="False" ItemStyle-Width="Auto" PageSize="25"
ShowFooter="True" ShowHeaderWhenEmpty="True" Width="877px" Height="274px">
<Columns>
<asp:TemplateField HeaderText="CustomerId">
<EditItemTemplate>
<asp:TextBox ID="txtCustomerId" runat="server" Text='<%# Bind("CustomerId") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblCustomerId" runat="server" Text='<%# Bind("CustomerId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<EditItemTemplate>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtContactName" runat="server" Text='<%# Eval("ContactName") %>' Width="335px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City">
<EditItemTemplate>
<asp:TextBox ID="txtCity" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblCity" runat="server" Text='<%# Bind("City") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country">
<EditItemTemplate>
<asp:TextBox ID="txtCountry" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblCountry" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField CommandName="Staff" HeaderText="Select" Text="Select" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
<div class="Pager"></div>
<div id="myModal" class="modal fade" style="width: auto;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button style="padding: 0px" type="button" data-dismiss="modal">×</button>
<h4>Customers's Details</h4>
</div>
<div class="modal-body">
<div>
<div class="form-group">
<asp:Label ID="lblId" runat="server"></asp:Label>
</div>
<div class="form-group">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">
Close</button>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn btn-success" OnClick="Submit" />
</div>
</div>
</div>
</div>
</asp:Panel>
</form>
</body>
</html>
Namespaces
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Code
C#
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
BindDummyRow();
}
}
[System.Web.Services.WebMethod()]
public static string GetCustomers(string searchTerm, int pageIndex)
{
string query = "[GetCustomersPageWiseSearch]";
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@SearchTerm", searchTerm);
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", 10);
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
return GetData(cmd, pageIndex).GetXml();
}
private static DataSet GetData(SqlCommand cmd, int pageIndex)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Customers");
DataTable dt = 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;
}
}
}
}
private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("CustomerId");
dummy.Columns.Add("ContactName");
dummy.Columns.Add("City");
dummy.Columns.Add("Country");
dummy.Rows.Add();
SearchGrid.DataSource = dummy;
SearchGrid.DataBind();
}
protected void Submit(object sender, EventArgs e)
{
int id = int.Parse(lblId.Text);
string name = txtName.Text;
string city = txtCity.Text;
string country = txtCountry.Text;
// Update code.
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
BindDummyRow()
End If
End Sub
<System.Web.Services.WebMethod()>
Public Shared Function GetCustomers(ByVal searchTerm As String, ByVal pageIndex As Integer) As String
Dim query As String = "[GetCustomersPageWiseSearch]"
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", 10)
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("constr").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
Private Sub BindDummyRow()
Dim dummy As DataTable = New DataTable()
dummy.Columns.Add("CustomerId")
dummy.Columns.Add("ContactName")
dummy.Columns.Add("City")
dummy.Columns.Add("Country")
dummy.Rows.Add()
SearchGrid.DataSource = dummy
SearchGrid.DataBind()
End Sub
Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
Dim id As Integer = Integer.Parse(lblId.Text)
Dim name As String = txtName.Text
Dim city As String = txtCity.Text
Dim country As String = txtCountry.Text
End Sub
Screenshot
