DataGridNavigator

分享于 

10分钟阅读

Web开发

  繁體

介绍

我最常用的ASP.NET 控件之一是 DataGrid。 在表格中显示数据非常简单,只有一个例外- 页面导航器。 只显示页码或者只有两个链接( 到上一页和下一页) 是不够的,对于我的客户来说是完全无法解释的。 所以我决定创建 DataGridNavigator 服务器控件,其中的主要任务是生成 DataGrid 对象的页面导航器。 导航器可以具有以下按钮:

  • 跳转到第一个/最后一页( 文本或者图像)
  • 跳转到上一页/下一页( 文本或者图像)
  • 跳转到页面。 。( 仅文本:) )

导航控件独立于 DataGrid 控件呈现,你可以将多个导航器绑定到一个 DataGrid

控件,属性和编辑器

控件从 WebControl 类( 在 ASP.NET 中,控件可以直接或者间接从 Control 或者 WebControl 基类中进行 inherit ) 继承,并在 span HTML标记。

一些属性被指定给指定的编辑器,例如 System.Web.UI.Design.ImageUrlEditor ( 对于 xxxButtonImageUrl 属性) 这里编辑器显示"选择图像"对话框窗口的( HyperLink 控件的ImageUrl 属性中使用的相同)。 我们要做的就是设置属性的EditorAttribute:

[Category("Buttons"), 
 DefaultValue(""), 
 Description("First button's image URL."), 
 [__b__]EditorAttribute(typeof(System.Web.UI.Design.ImageUrlEditor), 
 typeof(System.Drawing.Design.UITypeEditor))] publicstring FirstButtonImageUrl 
{
 get { object o = ViewState["FirstButtonImageUrl"]; 
 return (o==null)? String.Empty : (string) o; }
 set { ViewState["FirstButtonImageUrl"] = value.Trim(); } 
} 

DataGridName 属性还有一个特殊的编辑器,它显示页面上所有 DataGrid 对象的List。 你可以在 DataGridNavigatorEditor.cs 文件中找到编辑器的实现。

SelectDataGrid编辑器类

所有编辑器类都应该从 UITypeEditor 类派生。 你应该实现的方法之一是 GetEditStyle,它返回编辑器类型:

  • DropDown - 下拉对话框
  • Modal - 模式窗口
  • None - 无用户界面。

例如:

publicoverride UITypeEditorEditStyle GetEditStyle(ITypeDescriptorContext context)
{
 return UITypeEditorEditStyle.DropDown;
}

实现的下一个方法是 EditValue,在其中创建编辑器窗口/控件。 在下拉编辑器的情况下,我们可以使用 ListBox 控件。 正如你在 DataGridNavigatorEditor.cs 文件中看到的,我创建了一个抽象类 ObjectListEditor,它实现了该类编辑器的基本。 类具有 InsertItems 方法,用于使用项填充 List。 主编辑器是在 SelectDataGrid 类中实现的,该类派生自 ObjectListEditor 类。 下面是 InsertItems 方法的实现:

protectedoverridevoid InsertItems(ListBox.ObjectCollection items, 
 ComponentCollection components)
{
 // iterate thru all page's componentsfor (int i = 0; i < components.Count; i++)
 // check if component is the DataGrid. if (components[i] is System.Web.UI.WebControls.DataGrid)
 items.Add(((System.Web.UI.WebControls.DataGrid)components[i]).ID);
}

你可以看到,在页面的组件中有一个迭代循环。 每个 DataGrid 组件都添加到 List 项目 Collection 中。 如果由于某些原因,你希望添加其他组件,只需更改条件测试。

页面 Collection ( 方法参数的component )的组件由 ITypeDescriptorContext 接口( 由 Container.Components 属性精确地) 提供,你可以在 EditValue 方法实现( 在 ObjectListEditor 类中) 中看到。

要将编辑器分配给该属性,只需设置 EditorAttribute:

[Category("Data"),
 DefaultValue(""),
 Description("DataGrid name to which connect the control."),
 [__b__]Editor(typeof(mavus74.net.Editors.SelectDataGrid), 
 typeof(System.Drawing.Design.UITypeEditor))]publicstring DataGridName
{
 get { object o = ViewState["DataGridName"]; 
 return (o==null)? String.Empty : (string) o; }
 set { ViewState["DataGridName"] = value.Trim(); }
} 

postback 事件

控件的主要事件是 Command,基于 CommandEventHandler,它由按钮单击来调用。

如果控件使用 postback 事件,则应实现 IPostBackEventHandler 接口。 Command 事件属性的实现方式如下:

privatestaticreadonlyobject EventCommand = newobject();
...
[Category("Action"),
 Description("OnCommand event")]publicevent CommandEventHandler Command
{
 add { Events.AddHandler(EventCommand, value); }
 remove { Events.RemoveHandler(EventCommand, value); }
}

这里实现依赖于 C# 事件属性构造。 现在,是时候实现 IPostBackEventHandler.RaisePostBackEvent 在这里方法中,你必须确定调用了哪个事件,(。eventArgument 具有事件名称):

void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
{
 // check event, and raise OnCommand with appropriate arguments. switch (eventArgument)
 {
 case "FIRST": 
 OnCommand(new CommandEventArgs("FIRST", 0));
 return;
 case "PREV": 
 OnCommand(new CommandEventArgs("PREV", 
 (dgData.CurrentPageIndex == 0)? 0 : dgData.CurrentPageIndex - 1));
 return;
 case "NEXT": 
 OnCommand(new CommandEventArgs("NEXT", 
 (dgData.CurrentPageIndex == dgData.PageCount-1)? dgData.PageCount-1 : 
 dgData.CurrentPageIndex + 1)); 
 return;
 case "LAST": 
 OnCommand(new CommandEventArgs("LAST", dgData.PageCount - 1));
 return;
 }
 if (eventArgument.StartsWith("PAGE_"))
 {
 int i = Convert.ToInt32( eventArgument.Remove(0, 5));
 OnCommand(new CommandEventArgs("PAGE", i));
 }
}

OnCommand 实现:

protectedvirtualvoid OnCommand(CommandEventArgs e)
{
 CommandEventHandler clickHandler = (CommandEventHandler)Events[EventCommand];
 if (clickHandler!= null) clickHandler(this, e);
}

要点- 呈现 postback 事件代码。 控件呈现一组带有回发事件的HTML链接。 代码由 Page.GetPostBackClientHyperlink 方法生成,该方法获取两个参数:

  • Control - 将处理 postback的服务器控件
  • argument - 事件的参数,它传递给 RaisePostBackEvent 方法。
writer.AddAttribute(HtmlTextWriterAttribute.Href, 
 Page.GetPostBackClientHyperlink(this, "FIRST"));

GetPostBackClientHyperlink 方法调用 GetPostBackEventReferece 并追加': 'beginning开头的文字。

使用控件

首先,你需要通过 DataGridName 属性将控件与 DataGrid 绑定。 你还需要实现 Command 事件,例如:

privatevoid DataGridNavigator1_Command(object sender, 
 System.Web.UI.WebControls.CommandEventArgs e)
{
 // e.CommandArgument has new PageIndex dgDane.CurrentPageIndex = (int) e.CommandArgument;
 bindData();
}

你还可以设置按钮。图像和CSS类( ButtonsCssClass 属性)的文本。 如果不指定按钮的ImageUrl,则显示文本链接。 否则,将呈现图像按钮。 通过设置 ShowPageButtons,你可以决定呈现页码。 PageButtonCount 属性决定要渲染( 3和 21之间的值)的链接数。

Points of Interest

这里控件演示如何使用回发事件处理程序创建服务器控件,指定属性编辑器以及如何创建简单属性编辑器。

要做

  • 专用事件处理程序而不是 CommandEventHandler。 这里处理程序可以提供 2个属性: DataGrid 控件和 PageNumber ( 现在是 CommandArgument )。
  • DisabledImageUrl - 禁用链接时使用的图像。

相关文章