当前位置: 移动技术网 > IT编程>开发语言>c# > C#使用WebService结合jQuery实现无刷新翻页的方法

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

2019年07月18日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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#程序设计有所帮助。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网