ASP.NET Ajax 實現無刷新分頁

時間 2019-11-19

標籤 asp.net asp ajax 實現刷新分頁欄目 ASP 简体版

原文原文鏈接

使用Ajax的UpdatePanel控件和DataList控件實現的無刷新分頁。

詳細過程：css

1.1. 啓動sqlserver,建立數據庫ajax數據庫中建立sale表，點擊新建查詢，寫入代碼：
create table sale
(
   sid char(5) primary key,   --銷售編號
   pid char(5),       --商品編號
   pname varchar(50),   --商品名稱
   unit varchar(4),   --單位
   number int,       --銷售數量
   price decimal,       --單價
   sdate datetime,       --銷售日期
   people varchar(20)   --經手人
)
go
2.1 點擊文件-新建-網站，命名WebAjax，點擊肯定按鈕。

2.2.在默認項目中添加個web窗體，命名爲Default

2.3.在Default頁面中，拖入一個ScriptManager控件，再拖入一個UpdatePanel控件

2.4.在UpdatePanel中拖入一個DataList控件，用來顯示和分頁數據庫中的商品數據；

2.5.寫好DataList中數據模版和模版樣式

2.6.拖入三個個Lable控件，Lable1用來顯示當前頁，Lable2用來顯示總頁數，Lable3存儲當前頁碼

。
2.7.拖入四個Button控件，Button1用來控制顯示首頁數據，Button2用來控制顯示上一頁數據，

Button3用來控制顯示下一頁數據，Button4用來控制顯示尾頁數據，

2.8，寫後臺cs代碼，調試併成功。
html

1.前臺：
web

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>Ajax實驗</title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

            <ContentTemplate>
                <asp:DataList ID="DataList1" runat="server" BackColor="White" 
                    BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" 
                    GridLines="Horizontal">
                    <AlternatingItemStyle BackColor="#F7F7F7" />
                    <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                    <ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                    <HeaderTemplate>
                    <table class="style1">
                            <tr>
                                                        <tr>
                                <td>
                                    銷售編號</td>
                                <td>
                                    商品編號</td>
                                    <td>
                                    商品名稱</td>
                                    <td>
                                    單位</td>
                                    <td>
                                    銷售數量</td>
                                    <td>
                                    單價</td>
                                    <td>
                                    銷售日期</td>
                                    <td>
                                    經手人</td>
                            </tr>
                            </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                            <tr>
                                <td>
                                    <%# DataBinder.Eval(Container.DataItem, "sid")%></td>
                                <td>
                                    <%# DataBinder.Eval(Container.DataItem, "pid")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "pname")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "unit")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "number")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "price")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "sdate")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "people")%></td>
                            </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                    </table>
                    </FooterTemplate>
                    <SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                </asp:DataList>
          <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
          <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="首頁" onclick="Button1_Click" />
                <asp:Button ID="Button2" runat="server" Text="上一頁" onclick="Button2_Click" />
                <asp:Button ID="Button3" runat="server" Text="下一頁" onclick="Button3_Click" />
                <asp:Button ID="Button4" runat="server" Text="尾頁" onclick="Button4_Click" />
                <br />
                <asp:Label ID="Label3" runat="server" Text="1"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
    
</body>
</html>

2.後臺

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    SqlConnection sqlcon = new SqlConnection(@"server=.\sqlexpress;database=ajax;integrated security=SSPI");
    public string strsql = "SELECT * FROM sale";
    PagedDataSource page = new PagedDataSource();
    protected void Page_Load(object sender, EventArgs e)
    {
        BindList(1);
    }

    private void BindList(int index)
    {
        SqlDataAdapter adp = new SqlDataAdapter(strsql, sqlcon);
        sqlcon.Open();
        DataSet dst = new DataSet();
        adp.Fill(dst, "table");
        DataTable tab = new DataTable();
        tab = dst.Tables["table"];
        page.DataSource = tab.DefaultView;
        //分頁實現
        page.PageSize = 3;
        page.AllowPaging = true;

        page.CurrentPageIndex = index - 1;
        this.Label1.Text = index.ToString();
        this.Label2.Text = page.PageCount.ToString();
        DataList1.DataSource = page;
        DataList1.DataBind();
        sqlcon.Close();
    }


    protected void Button1_Click(object sender, EventArgs e)
    {
        BindList(1);
        Label3.Text = "1";
    }
    protected void Button2_Click(object sender, EventArgs e)//上一頁
    {
        if (Convert.ToInt32(Label3.Text) == 1)
        {
            BindList(1);
            Label3.Text = "1";
        }
        else
        {
            BindList(Convert.ToInt32(Label3.Text)-1);
            Label3.Text = (Convert.ToInt32(Label3.Text)-1).ToString();
        }
    }
    protected void Button3_Click(object sender, EventArgs e)//下一頁
    {
        if (Convert.ToInt32(Label3.Text) == (page.PageCount - 1))
        {
            BindList(page.PageCount);
            Label3.Text = page.PageCount.ToString();
        }
        else
        {
            BindList(Convert.ToInt32(Label3.Text) + 1);
            Label3.Text = (Convert.ToInt32(Label3.Text) + 1).ToString();
        }
    }
    protected void Button4_Click(object sender, EventArgs e)
    {
        BindList(page.PageCount);
        Label3.Text = page.PageCount.ToString();
    }
}