C#使用WebService结合jQuery实现无刷新翻页的方法

本文实例讲述了C#使用WebService结合jQuery实现无刷新翻页的方法。分享给大家供大家参考。具体如下：

1. 首先创建数据库、表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; //每页显示的行数，这个数字与da.Fill(ds,pageNo,3,"gbook");里面的3保持一致
 var MaxPage = pageItems;
 function showPage(m) {
 if (m == -1) {
 if (pageNo < 2) {
  alert("已经到了首页");
  return;
 };
 MaxPage = pageItems;
 }
 else {
 if (MaxPage < pageItems) {
  alert("已经到了末页");
  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 },
 /* 注意参数的格式和名称 */
 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 从脚本中调用此 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#程序设计有所帮助。

赞 (0)

相关推荐

  • C# winform自定义翻页控件详解

    C# winform自定义翻页控件详解

    C#  winform中自定义的翻页控件,自己设计,供大家参考,具体内容如下 1.主要是使用控件绑定点击事件   用到的控件分别为picturebox   lable  上一页pbPage_Prev    下一页 pbPage_Next  首页 pbPage_Begin   尾页pbPage_End  是picturebox控件加背景图 "第  页/ 共  页" 是一个lable "labPageInfo"    在lable上面加了一个隐藏的textbox 控件

  • C#使用WebService结合jQuery实现无刷新翻页的方法

    本文实例讲述了C#使用WebService结合jQuery实现无刷新翻页的方法.分享给大家供大家参考.具体如下: 1. 首先创建数据库.表Article,字段ArticleId,Title 前台代码 <%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • C#使用jQuery实现无刷新评论提交的方法

    本文实例讲述了C#使用jQuery实现无刷新评论提交的方法.分享给大家供大家参考.具体分析如下: 首先在数据库中就建三个字段的表用来存储用户名和评论信息,Id只是为了设置唯一标示,所以设置成整型自增字段就行了. 再建一个HTML页面,只需简单的拉几个html控件出来摆着就行,注意在页面顶部有个标签用来占位输出评论内容. Html页面代码就这样简单就行了: <body><table id="room"> </table> <div> 用户名

  • 通过pjax实现无刷新翻页(兼容新版jquery)

    pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html 目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com 等网站已经使用. pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术. 同时支持了缓存和本地存储,下次访问的时候直接读取本地

  • asp.net 无刷新翻页就是这么简单

    个人喜欢用Repeater,因其简洁,此AjaxPager定向为Repeater! 一步一步看来: 代码 复制代码 代码如下: [DefaultProperty("TotalRecord"), ToolboxData("<{0}:AjaxPager runat=server></{0}:AjaxPager>")] public class AjaxPager : WebControl,ICallbackEventHandler { publi

  • asp.net+jquery ajax无刷新登录的实现方法

    因为工作需要研究了一下 js的ajax,下面是成果.主要是三部分:一.js部分 友情提示注意js部分中的 $("#btn_login")中的return false:这个可以阻止回转服务器不然还是会刷新 复制代码 代码如下: $(document).ready(function () {    $("#btn_login").click(function () {        postlogin();        return false;    });});

  • jquery实现无刷新验证码的简单实例

    1. 思路: 页面上的验证码图片是servlet,采用jquery实现异步校验信息 2. 所用到的文件 VerifyCodeServlet.java   --用于生成图片的servlet ResultServlet.java          --用于校验验证码正确性的servlet verifyCode.js                  --校验的js文件 jquery.js                         --jquery包里的源文件 verifyCode.jsp   

  • jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

    jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

    理由:jquery简单,兼容性好且容易封装.废话不多说,马上开始我们的Jquery插件编写吧.应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式. 需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现). 使用到技术:asp.net2.0, jquery,css 首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷. 复制代码 代码如下: $.ajax({ type

  • jquery学习笔记 用jquery实现无刷新登录

    好了,唠嗑就到这里,现在看如何用jquery实现无刷新登录. 首先先创建html的部分 复制代码 代码如下: <table> <tr> <td> 用户名: </td> <td> <input type="text" id="username" /> </td> </tr> <tr> <td> 密码: </td> <td> &

  • php+ajax无刷新上传图片的实现方法

    php+ajax无刷新上传图片的实现方法

    本文实例讲述了php+ajax无刷新上传图片的实现方法.分享给大家供大家参考,具体如下: 1.引入文件 <!--图片上传begin--> <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript" src="/js/uploadImg.js">&l

  • asp.net中Timer无刷新定时器的实现方法

    本文实例讲述了asp.net中Timer无刷新定时器的实现方法.Timer控件要实现无刷新,得用到ajax技术,这里使用VS2008自带的ajax技术.    首先得添加一个ScriptManager控件,然后再添加一个UpdatePanel用于存放Timer控件内容的,就可以实现无刷新了.下面是详细的内容: 一.前台代码如下: <form id="form1" runat="server"> <asp:ScriptManager ID="

随机推荐