This article describes the method of using WebService combined with jQuery to achieve refresh-free page turnover. Share it for your reference. The details are as follows:
1. First create a database, table Article, field ArticleId, Title
Front Desk Code
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.6." type="text/javascript"></script>
</head>
<body>
<form runat="server">
<div >
</div>
</form>
<script type="text/javascript">
var pageNo = 1; //Current page number var pageItems = 10; //The number of lines displayed on each page is consistent with the 3 in (ds, pageNo,3,"gbook"); var MaxPage = pageItems;
function showPage(m) {
if (m == -1) {
if (pageNo < 2) {
alert("It's already reached the homepage");
return;
};
MaxPage = pageItems;
}
else {
if (MaxPage < pageItems) {
alert("It's already reached the last page");
return;
};
}
pageNo += m;
getData();
}
$(document).ready(function () {
getData();
});
function getData() {
$.ajax({
type: "POST",
cache: false,
url: "/Select",
/* Note that the following name corresponds to the method name of the CS */
data: { "pageNo": (pageNo - 1) * pageItems },
/* Pay attention to the format and name of the parameters */
contentType: "application/x-www-form-urlencoded",
dataType: "xml",
error: function (result) {
alert();
},
success: function (data) {
MaxPage = $(data).find('Article').size();
/* Article is the table name output from the background and must correspond to the background */
if (MaxPage == 0) {
$("#result").html("No record"); return;
}
t = "<table border='1'>";
$(data).find('Article').each(function (index, ele) {
/* Article is the table name output from the background and must correspond to the background */
var ArticleId = $(ele).find('ArticleId').text();
var Title = $(ele).find('Title').text();
t += "<tr>";
t += "<td>" + ArticleId + "</td>";
t += "<td>" + Title + "</td>";
t += "</tr>";
})
t += "</table>";
t += "<div><a href='' onclick='showPage(-1);return false;'>Previous page</a> <a href='' onclick='showPage(1);return false;'>Next page</a></div>"
$("#result").html(t);
}
});
}
</script>
</body>
</html>
2. Background code
using ;
using ;
using System;
using ;
using ;
using ;
[WebService(Namespace = "/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow calling this web service from a script using AJAX, uncomment the downline[]
public class WebService3 :
{
[WebMethod]
public Select(int pageNo)
{
sqlCon = new SqlConnection();
= "server=.;uid=sa;pwd=sa;database=guestbook";
//Define SQL statement string SqlStr = "SELECT ArticleId,Title FROM Article ORDER BY ArticleId DESC";
//Instantiate the SqlDataAdapter object SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
DataSet ds = new DataSet();
(ds, pageNo, 10, "Article");
return ds;
}
}
I hope this article will be helpful to everyone's C# programming.