柠檬铺

立即咨询

柠檬铺

简单的ASP.NET无刷新分页

前段时间做个留言板的功能，业务要求需要对留言列表的查看翻页无刷新，所以做了以下的无刷新分页功能，虽然比较简单，但是涉及到的知识面蛮多的，我记录一下制作的步骤与心得，仅供参考。如有哪里不足，希望大家指出，有更好的方法，也可以提出来，大家一起学习。
1、新建一个分页存储过程：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

<pre class="brush:html;toolbar:false;">CREATE procedure [dbo].[P_Pager] 

(@PageNumber int, 

@PageSize int) 

as

 declare @sql nvarchar(4000) 

    set @sql = 'select top ' + Convert(varchar, @PageSize)   + ' * from T_Test where

[type]=1 and id not in (select top ' + Convert(varchar, (@PageNumber - 1) * @PageSize)

 + ' id from T_Test order by id desc) order by id desc'

 exec sp_executesql @sql 

GO</pre><p>

</p>

 

　2、设置Ajax控件
想要实现无刷新，肯定会用到Ajax，首先是要放入必不可少的：

双击代码全选

1

2

<asp:ScriptManager ID="ScriptManager1" runat="server"> 

</asp:ScriptManager>

 

接着把Repeater控件嵌入到UpdatePanel里面去：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<pre class="brush:js;toolbar:false;"><asp:UpdatePanel ID="UpdatePanel1" runat="server"> 

           <ContentTemplate> 

                   <ul> 

                       <asp:Repeater ID="Repeater1" runat="server"> 

                           <ItemTemplate> 

                               <li> 

                                   <p> 

                                       <span><%#Eval("username") %>：

</span><%#Eval("content").ToString())) %></p> 

                                   <p> 

                                       <em>发表时间： 

                                           <%#Eval("addtime") %> 

                                       </em> 

                                   </p> 

                               </li> 

                           </ItemTemplate> 

                       </asp:Repeater> 

                   </ul> 

                   <p> 

                           总记录：<asp:Literal ID="ltlCount" runat="server">

</asp:Literal></p> 

                       <p> 

                           <webdiyer:AspNetPager ID="AspNetPager1" runat="server"

AlwaysShow="true" PageIndexBoxType="DropDownList" > 

                           </webdiyer:AspNetPager> 

                       </p> 

                   </div> 

           </ContentTemplate> 

       </asp:UpdatePanel></pre><p>

</p>

 

3、AspNetPager分页控件
可以看到以上的代码有个分页控件，我相信这个分页控件大家都不陌生了，我就不多介绍。必须有AspNetPager.dll，然后在项目中引用，在头部引入这一段代码：

双击代码全选

1

2

<pre class="brush:js;toolbar:false;"><%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %></pre><p>

</p>

 

这时候分页控件应该就可以使用了。最后在后台绑定一下数据，同时也要绑定AspNetPager控件，完整的后台代码如下：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

using System; 

using System.Collections.Generic; 

using System.Web; 

using System.Web.UI; 

using System.Web.UI.WebControls; 

using System.Data; 

using Wuqi.Webdiyer; 

using System.Data.SqlClient; 

       

public partial class AjaxPager : System.Web.UI.Page 

{ 

    int currentPageNumber;//当前页号  

    int pageSize = 5;//每页显示记录条数 

    protected void Page_Load(object sender, EventArgs e) 

    { 

        if (!IsPostBack) 

        { 

            currentPageNumber = 1; 

            ViewState["currentPageNumber"] = currentPageNumber; 

            BindData(); 

        } 

        AspNetPager1.PageChanged += new EventHandler(AspNetPager1_PageChanged);  //定义控件分页事件 

    } 

       

    //获取记录总数 

    private int GetCount() 

    { 

        string sql = "select COUNT(*) from T_Test"; 

        DataTable dt = GetTable(sql, CommandType.Text, values); 

        if (dt.Rows.Count > 0) 

        { 

            return Convert.ToInt32(dt.Rows[0][0]); 

        } 

        else

        { 

            return 0; 

        } 

    } 

           

    //绑定数据 

    private void BindData() 

    { 

        ltlCount.Text = GetCount().ToString(); 

        currentPageNumber = Convert.ToInt32(ViewState["currentPageNumber"]); 

        SqlParameter[] values = { new SqlParameter("@PageNumber", currentPageNumber), new SqlParameter("@PageSize", pageSize) }; 

               

        DataTable dt = GetTable("P_Pager", CommandType.StoredProcedure, values);  //调用存储过程 

        if (dt.Rows.Count > 0) 

        { 

            AspNetPager1.PageSize = pageSize; 

            AspNetPager1.RecordCount = GetCount(); 

            AspNetPager1.CurrentPageIndex = currentPageNumber; 

            this.Repeater1.DataSource = dt.DefaultView; 

            this.Repeater1.DataBind(); 

        } 

    } 

       

    //分页事件  

    void AspNetPager1_PageChanged(object sender, EventArgs e) 

    { 

        currentPageNumber = AspNetPager1.CurrentPageIndex; 

        ViewState["currentPageNumber"] = currentPageNumber; 

        BindData(); 

    } 

           

     // 读取存储过程返回table 

    private DataTable GetTable(string sql, CommandType t, params SqlParameter[] values) 

    { 

        using (SqlConnection conn = new SqlConnection("Data Source=127.0.0.1;Initial Catalog=testDB;Persist Security Info=True;User ID=sa;Password=123456")) 

        { 

            SqlCommand comm = new SqlCommand(sql, conn); 

            comm.CommandType = t; 

            if (values != null && values.Length > 0) 

                comm.Parameters.AddRange(values); 

            SqlDataAdapter da = new SqlDataAdapter(comm); 

            DataSet ds = new DataSet(); 

            try

            { 

                conn.Open(); 

                da.Fill(ds); 

                return ds.Tables[0]; 

            } 

            catch (Exception) 

            { 

                return null; 

            } 

            finally

            { 

                conn.Close(); 

                conn.Dispose(); 

            } 

        } 

    } 

}

 

至此，基本大功告成，虽然比较简单，但是涉及到存储过程，Ajax，分页控件等知识点，还是蛮值得收藏和学习的，希望我的这篇文章是抛砖引玉，让大家提供更好的方法，才是我学习的动力。求知若饥，虚心若愚。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku

Subscribe Now