使用 ASP+ DataGrid 控件来创建主视图/详细资料视图 (2)

Step6Page.cs:

namespace Samples {
    ...

    public class Step6Page : Page {

        // 更新当前选定的作者并重新加载与选定内容对应的书名
        // 网格
        protected void LoadTitlesGrid() {
            UpdateSelection();
            titlesGrid.DataBind();
        }

        // 处理书名网格中的 CancelCommand 事件,以
        // 不施用更改就结束编辑
        protected void OnCancelCommandTitlesGrid(object sender,
                                      DataGridCommandEventArgs e) {
            titlesGrid.EditItemIndex = -1;
            LoadTitlesGrid();
        }

        // 处理书名网格中的 EditCommand 事件,以
        // 开始编辑某一行
        protected void OnEditCommandTitlesGrid(object sender,
                                       DataGridCommandEventArgs e) {
            titlesGrid.EditItemIndex = e.Item.ItemIndex;
            LoadTitlesGrid();
        }

        // 处理书名网格中的 UpdateCommand 事件,以施用
        // 所作的更改并结束编辑
        protected void OnUpdateCommandTitlesGrid(object sender,
                                      DataGridCommandEventArgs e) {
            TextBox priceText =
                    (TextBox)e.Item.FindControl("Column3Control");
            string newPrice = priceText.Text.Substring(1);
            
            DataSet ds = GetSessionData();
            DataTable titlesTable = ds.Tables["Title"];
            
            string titleID =
                   (string)titlesGrid.DataKeys[e.Item.ItemIndex];
            DataRow[] rows = titlesTable.Select("title_id = '" +
                                                titleID + "'");
            DataRow editRow = rows[0];

            editRow.BeginEdit();
            editRow["price"] = newPrice;
            editRow.EndEdit();
            editRow.AcceptChanges();
            titlesGrid.EditItemIndex = -1;
            LoadTitlesGrid();
        }
    }
}

EditCommand 事件是在单击 Edit 按钮时引发的。只需将 DataGrid 的 EditItemIndex 属性设定为包含被单击按钮的项目的索引的属性。要防止编辑某一个别行,不采取任何动作就返回。另外,要继续进行编辑,就必须重新加载数据源并调用 DataBind。这通过调用 LoadTitlesGrid 方法来完成。

您必须处理的第二个事件就是 CancelCommand 事件。这是单击 Cancel 按钮时引发的。实施十分类似于前一处理器。如想结束编辑,则只需将 EditItemIndex 属性重置为 ?,并重新加载数据源。如果需要维持行的编辑模式,则仅需不采取任何动作就从函数返回即可。

要处理的最后一个事件就是 UpdateCommand 事件,这是单击 Update 按钮时引发的。这里是实际工作发生的地方。从存在于项目中的控件抽取新的值,然后更新数据源。一旦将新的值使用完毕,就将 EditItemIndex 重置为 ?,以返回到只读模式,并连同其数据源一起重新加载控件。对于前两个事件,您可以不采取任何动作就从该函数返回,以保持该行的编辑模式状态。

这一步又再次举例说明控件中实施的显式数据绑定模型。在这一实施情形中,只在某行的状态从只读模式更改为编辑模式或相反时才需要数据源。注意, DataGrid 自身并不更新其数据源。实质上,数据绑定是单向的。采用本模型的目的在于让您拥有对数据源更新的控制。在大多数典型的应用程序中,更新需要预处理,并且是由业务对象或已存储的过程来调用的。另外,单向数据绑定并不要求每个时间都有实时的数据源。



第 7 步: 使用模板

DataGrid 控件通过使用 TemplateColumns,支持列内模板。可以完全自由地决定与这些列相关联的单元格的内容。这一步使用 TemplateColumn 来增强首先在前一步中实施的编辑支持。

图 8. 完成第 7 步后的页面

Titles DataGrid 来自:

Step7.aspx:

<asp:DataGrid id="titlesGrid" runat="server"
    ...>
  
  <property name="Columns">
    ...
    <asp:TemplateColumn HeaderText="Price">
      <template name="ItemTemplate">
        <asp:Label runat="server"
            Text='<%# DataBinder.Eval(Container.DataItem, "price",
                                      "{0:c}") %>'/>
      </template>

      <template name="EditItemTemplate">
        <asp:RequiredFieldValidator runat="server"
            ControlToValidate="priceText" Display="Dynamic">
          <img src="Error.gif" height="16" width="16" title="Required"
              align="absmiddle">
        </asp:RequiredFieldValidator>
        <asp:RegularExpressionValidator runat="server"
            ControlToValidate="priceText" Display="Dynamic"
            ValidationExpression="/$[0-9]+(/.[0-9][0-9]?)?">
          <img src="Error.gif" height="16" width="16"
              title="Invalid currency value"
              align="absmiddle">
        </asp:RegularExpressionValidator>
        <asp:TextBox id="priceText" runat="server"
            Text='<%# DataBinder.Eval(Container.DataItem, "price",
                                      "{0:c}") %>'
            Width="45px" BorderStyle="Solid" BorderWidth="1px"
            BorderColor="Black">
        </asp:TextBox>
      </template>

      <property name="HeaderStyle">
        <asp:TableItemStyle Width="50px"/>
      </property>
      <property name="ItemStyle">
        <asp:TableItemStyle HorizontalAlign="Right"/>
      </property>
    </asp:TemplateColumn>
  </property>
  ...
</asp:DataGrid>

控件的声明展示将 TemplateColumn 添加到 Columns 集合,以替代价格字段的 BoundColumnTemplateColumns 是 DataGrid 的另一扩展机制。可以将其用于对 DataGrid 所创建的表格式布局内所表现的 UI 进行完全定制。 TemplateColumn 还提供模板属性,比如 ItemTemplateEditItemTemplate,从而您可以指定应当用于与列相关联的单元格内的控件。

在本例中, ItemTemplate 包含一个 Label 控件,其 Text 属性绑定到价格字段。这实质上在模仿 BoundColumn 的功能。

有意思的是, EditItemTemplate 模板用于处于编辑模式中的单元格。样例将一个 TextBox 放入已绑定到价格字段的模板中。这样就提供了与 BoundColumn 相同的功能。

模板包含各种各样的增强性能。首先,该模板允许对 TextBox 进行更大的控制,从而您可以创建在视觉上更有魅力的编辑 UI。其次,允许您放置验证控件,从而可以进行原地验证。在本样例中, RequiredFieldValidator 确保 TextBox 总是包含一个值,而 RegularExpressionValidator 确保文本包含一个有效的货币值。该功能的最令人兴奋的一个方面就是自动进行客户机端验证。 ASP+ 验证控件自动进行客户机端验证,并开启功能丰富的浏览器客户机上的错误指示器,从而无须往返过程和回落到为下级客户机进行服务器端验证。

Step7Page.cs:

namespace Samples {
    ...

    public class Step7Page : Page {

        // 处理书名网格中的 UpdateCommand 事件,以施用
        // 所作的更改并结束编辑 (当页面处于有效状态时)
        protected void OnUpdateCommandTitlesGrid(object sender,
                                      DataGridCommandEventArgs e) {
 if (IsValid) {
                TextBox priceText =
                        (TextBox)e.Item.FindControl("priceText");
                string newPrice = priceText.Text.Substring(1);
            
                DataSet ds = GetSessionData();
                DataTable titlesTable = ds.Tables["Title"];
            
                string titleID =
                       (string)titlesGrid.DataKeys[e.Item.ItemIndex];
                DataRow[] rows = titlesTable.Select("title_id = '" +
                                                    titleID + "'");
                DataRow editRow = rows[0];

                editRow.BeginEdit();
                editRow["price"] = newPrice;
                editRow.EndEdit();
                editRow.AcceptChanges();
                titlesGrid.EditItemIndex = -1;
                LoadTitlesGrid();
            }
        }
    }
}

对支持代码的唯一变更与继续对数据源进行更新之前检查页面的有效性有关。验证控件会自动更新页面的 IsValid 属性。

检查有效性是在 UpdateCommand 事件处理器中完成的。如第 6 步中所述,不采取任何动作就从事件处理器返回,会保持行的编辑模式。因此,当,且仅当页面处于有效状态时,才会执行所有的更新逻辑。

证实控件还会在无效时自动显示其错误消息,且无需编写任何补充代码。



第 8 步: 定制列

正如到目前您所看到的, DataGrid 控件支持标准的列集,诸如 BoundColumnButtonColumnTemplateColumn。该控件还允许您用自己的列类型对控件进行扩展。这些新的列提供了高度的灵活性。这一步实施一个名为 ImageColumn 的定制列,该列用于在单元格中,为带有图象 URL 数据绑定的每行显示一个图象。

图 9. 完成第 8 步后的页面

Titles DataGrid 以及 ImageColumn 的声明来自:

Step8.aspx:Step8.aspx:

<%@ Register TagPrefix="s" Namespace="Samples"%>
...
<asp:DataGrid id="titlesGrid" runat="server"
    ...>

  <property name="Columns">
    <s:ImageColumn ImageField="title_id"
       ImageFormatString="images/Title-{0}.gif"/>
  </property>
  ...
</asp:DataGrid>

本页面包含一个寄存器指令,用于映射 <s:ImageColumn> 标记,以表示 Samples.ImageColumn 类。

DataGrid 的声明展示添加到 DataGrid 的 Columns 集合的 ImageColumn。 还展示 ImageFieldImageFormatString 集,因而图象是以包含与特定行相关联的标题 ID 的 URL 为依据的。其工作原理与第 2 步中所使用的 HyperLinkColumn 十分类似。

ImageColumn.cs:

namespace Samples {
    ...

    public class ImageColumn : Column {

        private PropertyDescriptor imageFieldDesc;

        public ImageColumn() {
        }

        public string ImageField {
            get {
                object o = State["ImageField"];
                return (o != null) ? (string)o : String.Empty;
            }
            set {
                State["ImageField"] = value;
            }
        }

        public string ImageFormatString {
            get {
                object o = State["ImageFormatString"];
                return (o != null) ? (string)o : String.Empty;
            }
            set {
                State["ImageFormatString"] = value;
            }
        }

        // 在与该列相关联的单元格中创建
        // 控件
        public override void InitializeCell(TableCell cell,
                                            int columnIndex,
                                            ListItemType itemType) {
            base.InitializeCell(cell, columnIndex, itemType);

            if ((itemType == ListItemType.Item) ||
                (itemType == ListItemType.AlternatingItem) ||
                (itemType == ListItemType.SelectedItem) ||
                (itemType == ListItemType.EditItem)) {
                Image image = new Image();
                image.ID = Column.GetColumnControlID(columnIndex, -1);
                cell.Controls.Add(image);

                if (ImageField.Length != 0) {
                    image.AddOnDataBind(new
                          EventHandler(this.OnDataBindColumn));
                }
            }
        }

        // 将数据载入在 InitializeCell 中创建的控件
        private void OnDataBindColumn(object sender, EventArgs e) {
            Image boundImage = (Image)sender;
            DataGridItem item = (DataGridItem)boundImage.NamingContainer;
            object dataItem = item.DataItem;

            if (IsFirstDataBind()) {
                string imageField = ImageField;
                imageFieldDesc =
                  TypeDescriptor.GetProperties(dataItem)[imageField];

                if (imageFieldDesc == null) {
                    throw new Exception("Invalid property: '" +
                                        imageField + "'");
                }
                OnFirstDataBindHandled();
            }

            object data = imageFieldDesc.GetValue(dataItem);

            if (data != null) {
                string format = ImageFormatString;

                if (format.Length != 0) {
                    boundImage.ImageUrl = String.Format(format, data);
                }
                else {
                    boundImage.ImageUrl = data.ToString();
                }
            }
        }
    }
}

DataGrid 控件所使用的每一列均由抽象的 Column 类派生而来。 列类型实施各种各样的属性 (诸如 HeaderText) 以及所有列类型所公用的样式。

ImageColumn 类用于添加针对其具体功能的属性,诸如 ImageFieldImageFormatString 属性。实施这些属性,是通过将各值存入列的 State 中实现的。列的状态,在 DataGrid 控件的往返过程中自动得到保持。

每列所超控的最为重要的虚拟方法就是 InitializeCell 方法。 DataGrid 促使每列初始化与该列相关联的单元格。实施本方法时,列创建其所需要的控件,并将它们添加为单元格的子单元格。所创建的控件可能会随 itemType 参数的不同而不同,该参数指示包含单元格的列的 ItemType 属性。 Column 类自身包含用于产生标头和标尾的逻辑。 ImageColumn 在进行自我实施时,只是创建一个 Image 控件。它还向 Image 的 DataBind 属性添加一个事件处理器。

一旦将列创建完毕, DataGrid 就对其进行数据绑定。在该进程中,允许列借助与列相关联的数据对其在 InitializeCell 中创建的控件进行定制。 ImageColumn 检索其所绑定的字段的值,使用用户所指定的格式生成一个 URL,然后使用结果字符串来设定图象的 ImageUrl 属性。



结论

DataGrid 控件简化了多个常见 Web 应用情形,其中包括只读报表到交互式应用程序 UI。该控件优于传统的 ASP 编程。它将转换对象模型操作和数据绑定所需的逻辑封装进与浏览器无关的 HTML 表现功能。还将处理回传数据以及转换客户机事件的详细资料封状进服务器事件。

该控件设计用于无须作出太多开发努力就可以表现您的数据。随着应用要求的改变,以及您开始使用 DataGrid 的各种功能,您可以逐步添加其它功能。

现在 Microsoft® .NET SDK 和 Framework 中就已提供该控件。 SDK 还包含补充文档和多个样例,可用于快速启动;两者均实施本文中所提供的材料。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值