• 使用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(115);
    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 }

         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 }

         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 }

         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     }

    四、类似控件

         RadControls系列控件的RadAjaxPanel和AjaxLoadingPanel主要是用来实现局部刷新及Loading状态,提高用户体验的目的。除此之外我们也可以使用别的技术和控件来实现,ASP.NET AJAX所提供的UpdatePanel和UpdateProgress便是。

  • 相关阅读:
    【重点突破】—— Vue1.0到Vue2.0的变化
    【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)
    【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(二)
    【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一)
    【重点突破】—— Vue2.0 transition 动画Demo实践填坑
    【重点突破】—— 当better-scroll 遇见Vue
    【数据售卖平台】—— Vue2.0入门学习项目爬坑
    【温故知新】——BABYLON.js学习之路·前辈经验(二)
    【前端GUI】—— 前端设计稿切图通用性标准
    【开发总结】—— BABYLON 项目开发必备系列
  • 原文地址:https://www.cnblogs.com/beniao/p/1291224.html
Copyright © 2020-2023  润新知