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#程序设计有所帮助。

时间: 2015-04-19

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

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

WPF自定义选择年月控件详解

本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下 封装了一个选择年月的控件,XAML代码: <UserControl x:Class="SunCreate.CombatPlatform.Client.DateMonthPicker" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.micr

Android ToolBar控件详解及实例

ToolBar控件详解 在Activity中添加ToolBar 1.添加库 dependencies { ... compile "com.android.support:appcompat-v7:18.0.+" } 2.Activity要继承AppCompatActivity 3.设置主题 使用ToolBar,要将系统默认的ActionBar隐藏掉 <application android:theme="@style/Theme.AppCompat.Light.NoA

Android Tab 控件详解及实例

Android Tab 控件详解及实例 在桌面应用中Tab控件使用得非常普遍,那么我们经常在Android中也见到以Tab进行布局的客户端.那么Android中的Tab是如何使用的呢? 1.Activity package com.wicresoft.activity; import com.wicresoft.myandroid.R; import android.app.TabActivity; import android.os.Bundle; import android.util.Lo

Android实现自定义轮播图片控件详解

首先上效果图 实现原理 要完成一个轮播图片,首先想到的应该是使用ViewPager来实现.ViewPager已经有了滑动的功能,我们只要让它自己滚动.再加上下方的小圆点就行了.所以我们本次的自定义控件就是由ViewPager和LinearLayout叠加起来组成的. 一.创建一个自定义的ViewPager 先上完整的代码 package com.kcode.autoscrollviewpager.view; import android.content.Context; import andro

bootstrap daterangepicker双日历时间段选择控件详解

双日历时间段选择插件 - daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定.我们项目里用到的Bootstrap版本是2.3.1,所以我把daterangepicker与Bootstrap-2.3.1进行了整合. 一.需要引入的css与js  <link href="bootstrap.min.css" rel="stylesheet&q

微信小程序 input输入框控件详解及实例(多种示例)

微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

iOS开发之UIScrollView控件详解

一.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 二.UIScrollView的简单使用 (

ASP.NET数据绑定控件详解

ListBox.GridView.Repeater这三个数据绑定控件的"高效分页",ListBox和GridView内置的有分页,但是其效率太低了,少量的数据还可以,大量的数据根本就没法用,Repeater控件本身不提供分页,但是在实际的开发中可能也会有用到分页,所以也会给大家讲一下,Repeater的分页. 好了,现在开始进入正题,先从比较常用的控件说起. 一.GridView控件 主要特点:支持删.改,排序.分页.外观设置.自定义显示数据 缺 点:影响程序性能.不支持插入操作 这个

Javascript 遍历页面text控件详解

以下函数实现了列出页面中所有html控件类型为text的控件ID 复制代码 代码如下: function Texts()         {              //var els= document.getElementsByTagName("*");   //els得到页面所有控件              var els= document.getElementsByTagName("INPUT"); //上面的也可,这样可以减少循环