This example below show the Asp.net example with jquery and boostrap.
Created Aspx Page i.e FetchCustomerData.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FetchCustomerData.aspx.cs"
Inherits="WebAppAjaxCallDemo.FetchCustomerData" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="jquery.twbsPagination.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: '<%=ResolveUrl("~/FetchCustomerData.aspx/GetCustomerData") %>',
data: "{ }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var $pagination = $('#pagination'),
totalRecords = 0,
records = [],
displayRecords = [],
recPerPage = 10,
page = 1,
totalPages = 0;
var table = "";
var data = $.parseJSON(data.d);
records = data;
debugger;
//console.log(records);
totalRecords = records.length;
totalPages = Math.ceil(totalRecords / recPerPage);
$pagination.twbsPagination
({
totalPages: totalPages,
visiblePages: 6,
onPageClick: function (event, page) {
displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
endRec = (displayRecordsIndex) + recPerPage;
displayRecords = records.slice(displayRecordsIndex, endRec);
generate_table();
}
});
function generate_table() {
var tr;
$('#customer_body').html('');
for (var i = 0; i < displayRecords.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + displayRecords[i].ContactName + "</td>");
tr.append("<td>" + displayRecords[i].ContactTitle + "</td>");
tr.append("<td>" + displayRecords[i].Country + "</td>");
$('#customer_body').append(tr);
}
}
},
error: function (result) {
alert("Error");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<table id="customer" class="table table-bordered table table-hover" cellspacing="0" width="100%">
<colgroup>
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Contact Name</th>
<th>Contact Title</th>
<th>Country</th>
</tr>
</thead>
<tbody id="customer_body">
</tbody>
</table>
<div id="pager">
<ul id="pagination" class="pagination-sm"></ul>
</div>
</div>
</form>
</body>
</html>
Calling the WebMethod with Json Data Return in FetchCustomerData.cs Page :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using Newtonsoft.Json;
using System.Data.SqlClient;
using System.Configuration;
namespace WebAppAjaxCallDemo
{
public partial class FetchCustomerData : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetCustomerData()
{
string JSONresult = string.Empty;
string Sqlquery = string.Empty;
DataTable dt = new DataTable();
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ToString());
if (con != null && con.State == ConnectionState.Closed)
{
con.Open();
}
try
{
SqlCommand cmd = new SqlCommand("select * from dbo.customers",con);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(dt);
con.Close();
if (dt.Rows.Count > 0)
{
JSONresult = JsonConvert.SerializeObject(dt);
//return_object.return_data = JsonConvert.SerializeObject(companytbl, Formatting.Indented);
}
else
{
JSONresult = JsonConvert.SerializeObject(dt);
}
}
catch (Exception)
{
throw;
}
//Response.Write(JSONresult);
return JSONresult;
}
}
}
good example helpful.
ReplyDeleteThanks 🙏
Delete