C#使用WebService結(jié)合jQuery實現(xiàn)無刷新翻頁的方法

更新時間：2015年04月22日 14:13:16 作者：songguo

這篇文章主要介紹了C#使用WebService結(jié)合jQuery實現(xiàn)無刷新翻頁的方法,涉及C#中WebService與jQuery操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了C#使用WebService結(jié)合jQuery實現(xiàn)無刷新翻頁的方法。分享給大家供大家參考。具體如下：

1. 首先創(chuàng)建數(shù)據(jù)庫、表Article，字段ArticleId,Title

前臺代碼

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="result">
 </div>
 </form>
 <script type="text/javascript">
 var pageNo = 1; //當前頁號
 var pageItems = 10; //每頁顯示的行數(shù)，這個數(shù)字與da.Fill(ds,pageNo,3,"gbook");里面的3保持一致
 var MaxPage = pageItems;
 function showPage(m) {
 if (m == -1) {
 if (pageNo < 2) {
  alert("已經(jīng)到了首頁");
  return;
 };
 MaxPage = pageItems;
 }
 else {
 if (MaxPage < pageItems) {
  alert("已經(jīng)到了末頁");
  return;
 };
 }
 pageNo += m;
 getData();
 }
 $(document).ready(function () {
 getData();
 });
 function getData() {
 $.ajax({
 type: "POST",
 cache: false,
 url: "WebService3.asmx/Select",
 /* 注意后面的名字對應CS的方法名稱 */
 data: { "pageNo": (pageNo - 1) * pageItems },
 /* 注意參數(shù)的格式和名稱 */
 contentType: "application/x-www-form-urlencoded",
 dataType: "xml",
 error: function (result) {
  alert(result.responseText);
 },
 success: function (data) {
  MaxPage = $(data).find('Article').size();
 /* Article是后臺輸出的表名稱,要與后臺對應 */
  if (MaxPage == 0) {
  $("#result").html("沒有記錄");
  return;
  }
  t = "<table border='1'>";
  $(data).find('Article').each(function (index, ele) {
 /* Article是后臺輸出的表名稱,要與后臺對應 */
  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;'>上一頁</a> <a href='' onclick='showPage(1);return false;'>下一頁</a></div>"
  $("#result").html(t);
 }
 });
 }
 </script>
</body>
</html>

2. 后臺代碼

using System.Data;
using System.Data.SqlClient;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務，請取消對下行的注釋
[System.Web.Script.Services.ScriptService]
public class WebService3 : System.Web.Services.WebService
{
 [WebMethod]
 public System.Data.DataSet Select(int pageNo)
 {
 System.Data.SqlClient.SqlConnection sqlCon = new SqlConnection();
 sqlCon.ConnectionString = "server=.;uid=sa;pwd=sa;database=guestbook";
 //定義SQL語句
 string SqlStr = "SELECT ArticleId,Title FROM Article ORDER BY ArticleId DESC";
 //實例化SqlDataAdapter對象
 SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
 DataSet ds = new DataSet();
 da.Fill(ds, pageNo, 10, "Article");
 return ds;
 }
}

希望本文所述對大家的C#程序設計有所幫助。

您可能感興趣的文章: