<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddItemInGridViewOnButtonClick.aspx.cs" Inherits="AjaxApp.AddItemInGridViewOnButtonClick" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<title></title>
<script type="text/javascript">
var currentPageNumber = 1;
$(document).ready(function () {
loadData(currentPageNumber);
});
$(document).ready(function () {
$("#btnShow").click(function () {
currentPageNumber += 1;
loadData(currentPageNumber);
return false;
})
});
function loadData(currentPage) {
$.ajax({
url: "EmployeeService.asmx/GetEmployees",
method: 'post',
data: { pageNumber: currentPage, pageSize: 10 },
dataType: "json",
success: function (data) {
var empTable = $('#tblEmployee tbody');
$(data).each(function (index, emp) {
empTable.append('<tr><td>' + emp.PhoneID + '</td><td>' + emp.Name + '</td></tr>');
})
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%--<div id="myDiv">
<p>Static data initially rendered.</p>
</div>--%>
<h1>The data will be loaded on demand as you Button Click the page</h1>
<table id="tblEmployee">
<thead>
<tr>
<th>PhoneID</th>
<th>Name</th>
</tr>
</thead>
<tbody></tbody>
</table>
<asp:Button ID="btnShow" runat="server" Text="View Items" />
<%--<asp:GridView ID="GridView1" runat="server">
</asp:GridView>--%>
</form>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<title></title>
<script type="text/javascript">
var currentPageNumber = 1;
$(document).ready(function () {
loadData(currentPageNumber);
});
$(document).ready(function () {
$("#btnShow").click(function () {
currentPageNumber += 1;
loadData(currentPageNumber);
return false;
})
});
function loadData(currentPage) {
$.ajax({
url: "EmployeeService.asmx/GetEmployees",
method: 'post',
data: { pageNumber: currentPage, pageSize: 10 },
dataType: "json",
success: function (data) {
var empTable = $('#tblEmployee tbody');
$(data).each(function (index, emp) {
empTable.append('<tr><td>' + emp.PhoneID + '</td><td>' + emp.Name + '</td></tr>');
})
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%--<div id="myDiv">
<p>Static data initially rendered.</p>
</div>--%>
<h1>The data will be loaded on demand as you Button Click the page</h1>
<table id="tblEmployee">
<thead>
<tr>
<th>PhoneID</th>
<th>Name</th>
</tr>
</thead>
<tbody></tbody>
</table>
<asp:Button ID="btnShow" runat="server" Text="View Items" />
<%--<asp:GridView ID="GridView1" runat="server">
</asp:GridView>--%>
</form>
</body>
</html>
******************************Web Services Code********************************
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Configuration;
namespace AjaxApp
{
/// <summary>
/// Summary description for EmployeeService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class EmployeeService : System.Web.Services.WebService
{
public EmployeeService()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public void GetEmployees(int pageNumber, int pageSize)
{
List<AppCode.Employee> listEmployees = new List<AppCode.Employee>();
String strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
SqlCommand cmd = new SqlCommand("spGetEmployees", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageNumber", pageNumber);
cmd.Parameters.AddWithValue("@PageSize", pageSize);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
AppCode.Employee employee = new AppCode.Employee();
employee.PhoneID = Convert.ToInt32(dr["PhoneID"]);
employee.Name = dr["Name"].ToString();
listEmployees.Add(employee);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listEmployees));
}
}
}
*************************************Procedure *********************************
Create proc [dbo].[spGetEmployees]
(
@PageNumber int,
@PageSize int
)
as
BEGIN
Declare @StartRow int
Declare @EndRow int
Set @StartRow=((@PageNumber-1)*@PageSize)+1;
Set @EndRow=@PageNumber*@PageSize;
With Result as
(
Select *,ROW_NUMBER() over(order by [PhoneID] asc) RowNumber from [PhoneDirectory]
)
Select * from Result where RowNumber between @StartRow and @EndRow
END
No comments:
Post a Comment