使用RedControls控件RadAjaxPanel、AjaxLoadingPanel实现GridView无刷新翻页和排序
一、本文中涉及到的控件
1、标准控件:GridView
2、RadControls控件:RadAjaxPanel和AjaxLoadingPanel
二、页面布局
建立ASP.NET应用程序或网站,在aspx页面分别防置一个RadAjaxPanel、AjaxLoadingPanel和GridView控件(将GridView嵌套在RadAjaxPanel控件内部)。
然后将RadAjaxPanel的LoadingPanelID属性设置为AjaxLoadingPanel控件的ID值便OK。
下面只需要做好后台的程序工作,一个使用RadControls控件的Ajax功能就完成了。
三、编写程序构造数据及实现排序和分页功能
1、创建数据
1 private ICollection CreateDataSource()
2 {
3 DataTable dt = new DataTable();
4 DataRow dr;
5 Random Rand_Num = new Random();
6
7 dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
8 dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
9 dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
10
11 for (int i = 0; i < 50; i++)
12 {
13 dr = dt.NewRow();
14
15 dr[0] = i;
16 dr[1] = "Item " + i.ToString();
17 dr[2] = 1.23 * Rand_Num.Next(1, 15);
18
19 dt.Rows.Add(dr);
20 }
21
22 DataView dv = new DataView(dt);
23 if (SortExpression != string.Empty && SortExpression != null)
24 {
25 dv.Sort = SortExpression + SortDirection;
26 SwapSortDirection();
27 }
28
29 return dv;
30 }
2 {
3 DataTable dt = new DataTable();
4 DataRow dr;
5 Random Rand_Num = new Random();
6
7 dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
8 dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
9 dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
10
11 for (int i = 0; i < 50; i++)
12 {
13 dr = dt.NewRow();
14
15 dr[0] = i;
16 dr[1] = "Item " + i.ToString();
17 dr[2] = 1.23 * Rand_Num.Next(1, 15);
18
19 dt.Rows.Add(dr);
20 }
21
22 DataView dv = new DataView(dt);
23 if (SortExpression != string.Empty && SortExpression != null)
24 {
25 dv.Sort = SortExpression + SortDirection;
26 SwapSortDirection();
27 }
28
29 return dv;
30 }
2、绑定数据
1 string SortExpression;
2
3 protected void Page_Load(object sender, EventArgs e)
4 {
5 if (!IsPostBack)
6 {
7 if (SortExpression == "" || SortExpression == null)
8 {
9 SortExpression = "IntegerValue";
10 }
11 GridView1.DataSource = CreateDataSource();
12 GridView1.DataBind();
13 }
14 }
2
3 protected void Page_Load(object sender, EventArgs e)
4 {
5 if (!IsPostBack)
6 {
7 if (SortExpression == "" || SortExpression == null)
8 {
9 SortExpression = "IntegerValue";
10 }
11 GridView1.DataSource = CreateDataSource();
12 GridView1.DataBind();
13 }
14 }
3、编写排序方式属性
1 private string SortDirection
2 {
3 get
4 {
5 if (ViewState["SortDirection"] != null)
6 {
7 return (string)ViewState["SortDirection"];
8 }
9 else
10 {
11 return string.Empty;
12 }
13 }
14 set
15 {
16 ViewState["SortDirection"] = value;
17 }
18 }
19
20 private void SwapSortDirection()
21 {
22 if (SortDirection == string.Empty || SortDirection == " ASC")
23 {
24 SortDirection = " DESC";
25 }
26 else
27 {
28 SortDirection = " ASC";
29 }
30 }
2 {
3 get
4 {
5 if (ViewState["SortDirection"] != null)
6 {
7 return (string)ViewState["SortDirection"];
8 }
9 else
10 {
11 return string.Empty;
12 }
13 }
14 set
15 {
16 ViewState["SortDirection"] = value;
17 }
18 }
19
20 private void SwapSortDirection()
21 {
22 if (SortDirection == string.Empty || SortDirection == " ASC")
23 {
24 SortDirection = " DESC";
25 }
26 else
27 {
28 SortDirection = " ASC";
29 }
30 }
4、编写排序功能代码
1 protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
2 {
3 Thread.Sleep(2000);
4 GridView gv = sender as GridView;
5 SortExpression = e.SortExpression;
6 gv.DataSource = CreateDataSource();
7 gv.DataBind();
8 }
2 {
3 Thread.Sleep(2000);
4 GridView gv = sender as GridView;
5 SortExpression = e.SortExpression;
6 gv.DataSource = CreateDataSource();
7 gv.DataBind();
8 }
5、编写分页功能代码
1 protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
2 {
3 Thread.Sleep(2000);
4 this.GridView1.PageIndex = e.NewPageIndex;
5 GridView1.DataSource = CreateDataSource();
6 GridView1.DataBind();
7 }
2 {
3 Thread.Sleep(2000);
4 this.GridView1.PageIndex = e.NewPageIndex;
5 GridView1.DataSource = CreateDataSource();
6 GridView1.DataBind();
7 }
四、类似控件
RadControls系列控件的RadAjaxPanel和AjaxLoadingPanel主要是用来实现局部刷新及Loading状态,提高用户体验的目的。除此之外我们也可以使用别的技术和控件来实现,ASP.NET AJAX所提供的UpdatePanel和UpdateProgress便是。