简单 GridView AJAX 局部刷新分页例子@孟宪会

最新推荐文章于 2021-08-06 10:21:26 发布

转载最新推荐文章于 2021-08-06 10:21:26 发布 · 1.1k 阅读

文章标签：

#ajax #dataset #xhtml #import #sql #server

本文介绍了一个使用ASP.NET和AJAX实现的简单分页示例，通过C#和Access数据库展示了如何进行数据分页及局部刷新。该示例包括了从数据库中读取数据并展示在GridView控件上的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  int PageIndex = 1;
  private String ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|MengXianHui.mdb;";
  public int TotalCount = 0;
  public int PageItem = 5;
  System.Data.DataView CreateDataSourceByXianhuiMeng()
  {
    Int32.TryParse(Request.QueryString["Page"], out PageIndex);
    OleDbCommand cmd;
    String sql;
    OleDbConnection cn = new OleDbConnection(ConnectionString);
    cn.Open();
    // 由于是 Access 数据库，我们只进行简单的分页。对于性能要求较高的地方，请自行采取其他方法，比如存储过程等。
    sql = "SELECT COUNT(*) FROM [Document]";
    cmd = new OleDbCommand(sql, cn);

    // 总的记录数
    TotalCount = Convert.ToInt32(cmd.ExecuteScalar());
    //当前页的序号
    if (PageIndex < 1) PageIndex = 1;
    int PageCount = (int)Math.Ceiling((double)(TotalCount) / PageItem);
    if (PageIndex > PageCount) PageIndex = PageCount;
    int startRecord = (PageIndex - 1) * PageItem;

    sql = "SELECT DocumentId,DocumentGuid,Title,CreateDate FROM [Document] ORDER BY [DocumentId] DESC";

    OleDbDataAdapter da = new OleDbDataAdapter(sql, cn);
    DataSet ds = new DataSet();
    da.Fill(ds, startRecord, PageItem, "Document");
    cn.Close();
    return ds.Tables[0].DefaultView;
  }

  protected void Page_Load(object sender, EventArgs e)
  {
    if (String.IsNullOrEmpty(Request.QueryString["Page"]))
    {
      //首次加载显示页面内容，并进行初始化参数。
      CreateDataSourceByXianhuiMeng();
      Page.ClientScript.RegisterStartupScript(Page.GetType(), "js", "Pager(1)", true);
    }
    else
    {
      Response.ClearContent();
      GridView1.DataSource = CreateDataSourceByXianhuiMeng();
      GridView1.DataBind();
      System.Text.StringBuilder sb = new System.Text.StringBuilder();
      System.IO.StringWriter sw = new System.IO.StringWriter(sb);
      HtmlTextWriter htw = new HtmlTextWriter(sw);
      GridView1.RenderControl(htw);
      Response.Write(sb.ToString());
      Response.End();
    }

  }
  /// 添加这个override void VerifyRenderingInServerForm(Control control)，是为了避免出现
  /// 类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内。
  /// 的异常
  public override void VerifyRenderingInServerForm(Control control)
  { }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>简单 AJAX 局部刷新分页例子</title>
<script type="text/javascript">
  function GetData(p) {
    var h = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
    h.open("GET", '<%=Request.FilePath %>?Page=' + p + "&" + Date.parse(new Date()), true);
    h.onreadystatechange = function() {
     if (h.readyState == 4) {
       if (h.status == 200) {
         document.getElementById("_Containter").innerHTML = h.responseText;
        }
      }
     }
    h.send(null);
  }

  ///
  /// 具有分页功能的函数。
  ///
  function Pager(CurrentPage) {
    GetData(CurrentPage);
    var TotalRows = <%=TotalCount %>;
    var Step = 3;
    var PageItem = <%=PageItem %>;

    if (TotalRows < 1) {
      TotalPage = 0;
    }
    else {
      TotalPage = Math.ceil(TotalRows / PageItem)
    }
    var PagerContent = "共 " + TotalPage + " 页每页 " + PageItem + " 条 ";
    var leftStep = CurrentPage - Step;
    var rightStep = CurrentPage + Step;
    if (leftStep < 1) leftStep = 1;
    if (rightStep > TotalPage) rightStep = TotalPage;
    if (CurrentPage > 1) PagerContent += "<a href='#' onclick='Pager(1);return false;'>首页</a> <a href='' onclick='Pager(" + (CurrentPage - 1) + ");return false;'>上一页</a> "
    for (var i = leftStep; i <= rightStep; i++) {
      if (i == CurrentPage) {
        PagerContent += " <strong style='color:red'>" + i + "</strong>"
      }
      else {
        PagerContent += " <a href='#' onclick='Pager(" + i + ");return false;'>" + i + "</a> "
      }
    }

    if (rightStep < TotalPage) PagerContent += "<a href='' onclick='Pager(" + (CurrentPage + 1) + ");return false;'>下一页</a> <a href='' onclick='Pager(" + TotalPage + ");return false;'>末页</a>  "
    document.getElementById("_Pager1").innerHTML= document.getElementById("_Pager2").innerHTML = PagerContent;
  }
  alert("页面首次加载弹出的标记。")
</script>

</head>
<body>
  <form id="form1" runat="server">
  <div id="_Pager1" style="padding: 10px; text-align: center"></div>
    <div id="_Containter">
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="80%">
        <HeaderStyle BackColor="#EEEEEE" />
        <Columns>
          <asp:BoundField DataField="DocumentId" />
          <asp:HyperLinkField HeaderText="文章标题" DataNavigateUrlFields="DocumentGuid" DataTextField="Title"
            DataNavigateUrlFormatString="http://dotnet.aspx.cc/article/{0}/read.aspx" />
          <asp:BoundField HeaderText="发布时间" DataField="CreateDate" />
        </Columns>
      </asp:GridView>
    </div>
    <div id="_Pager2" style="padding: 10px; text-align: center"></div>
  </form>
</body>
</html>