常见 Datagrid 错误

Marcie Robillard
DatagridGirl.com

2003 年 11 月

适用于:
    Microsoft® ASP.NET

摘要:学习如何避免在使用 ASP.NET Datagrid 控件进行开发时可能发生的一些常见错误(本文包含一些指向英文站点的链接)。

Datagrid 控件是 Microsoft® ASP.NET 中功能最强、用途最广的 Web 控件之一,这一点已经得到了 ASP.NET 权威人士的认同。虽然 Datagrid 控件易于使用,但同样易于给使用者带来麻烦。以下是许多人所犯的一些错误,这些人包括从初学者到富有经验的 .NET 专家。您可以看到许多苦闷的使用者在 ASP.NET 新闻组和论坛就这些错误提出问题。遵循本文概述的相当简单的步骤,可以帮助您避免这些错误,并节约大量的开发时间。

可以使用 Datagrid 创建列表数据而没有使用
我知道您不会再使用如下所示的代码,但 ASP.NET 领域中许多守旧的用户仍在继续使用它们:

Response.Write("<table>")
While MyDataReader.Read()
Response.Write("<tr>")
Response.Write("<td>")
Response.Write(MyDataReader(0))
Response.Write("</td>")
Response.Write("</tr>")
Loop
Response.Write("</table>")

可以对以上代码进行简化,使其仅为:

<asp:datagrid runat="server" datasource="MyDataReader"/>,并调用 .DataBind() 方法。即使需要对 HTML 输出进行特殊的控制,您也可以在用户界面上记录集的内容重复出现的情况下,使用某个数据 Web 控件。

忘记在 Page_Load 事件中检查 IsPostBack
最常见的错误之一是忘记在数据绑定之前检查页面的 IsPostBack 条件。例如,Datagrid 处于“Edit”(编辑)模式时,忽略该项检查将导致已编辑的值被数据源中的原始值覆盖。然而,该规则至少有一个主要的例外,请参阅持续使用大型 ViewState。

以下是包含 IsPostBack 检查的一个典型 Page_Load 事件。BindGrid() 是一个例程,用于导入并设置 Datagrid 的数据源,并调用 DataBind() 方法。

Sub Page_Load
  If Not IsPostBack Then
    BindGrid()
  End If
End Sub

需要更大的灵活性时,仍坚持使用自动生成的列
如果 Datagrid 所处的环境需要任何一种特殊格式,或是需要使用 Datagrid 中的其他任何 Web 控件,那么必须关闭 AutoGenerateColumns。将 AutoGenerateColumns 属性的设置保持为“True”(默认设置)的做法,仅在最简单的 Datagrid 方案中有效。但对几乎所有实际的应用程序,必须将该属性设置为“False”,并在 Datagrid 声明的 <columns></columns> 段中明确地指定列。Microsoft Visual Studio® .NET 用户可以使用属性生成器以图形化的方式创建这些列。

注意:如果将 AutoGenerateColumns 的设置保持为“True”,并且在 Datagrid 的 <columns> 段中指定了列,那么最终将得到对列的重复设置。系统将首先显示特别声明的列,随后是所有自动生成的列。
尝试仅使用控件 ID 来引用 Datagrid 项目中的控件
许多人没有认识到,对于 Datagrid 的 TemplateColumn 下的 ItemTemplate 中的控件(例如带有“MyTextBox”ID 的 TextBox 控件),不能在后面的代码或是在 ASPX 页面的 <script> 段中用如下所示的代码来直接调用该控件:

Dim MyValue As String = MyTextBox.Text

该代码将导致可怕的“名称‘MyTextBox’没有声明”错误。

因为 Datagrid 是由多个行(项目)组成的,所以数据源中的每一行实际都会有一个单独的“MyTextBox”实例。ASP.NET 在每个控件的 ID 前面加上该控件层次结构中每个命名容器的 ID,这样 Textbox 将具有唯一的 ID,与页面中所有其他控件的 ID 都不相同。例如,如果 MyTextBox 处于 DataGrid1 中,那么生成的 ID 将是 DataGrid1:_ctl2:MyTextBox。“_ctl2”代表 MyTextBox 所处的当前行。页面中其他 MyTextBox 实例的 ID 可能是 DataGrid1:_ctl3:MyTextBox、DataGrid1:_ctl4:MyTextBox 等等。要检索需要查找的“MyTextBox”值,需要对适当的 DataGridItem 调用 FindControl 方法。该 DataGridItem 用作 TextBox 的父命名容器。

HTML:

<asp:Datagrid runat="server" id="Datagrid1">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:TextBox runat="server" id="MyTextBox"/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>

代码:

Sub DataGrid1_UpdateCommand(sender As Object, _
    e As DataGridCommandEventArgs)
  Dim MyValue As String = _
    CType(e.Item.FindControl("MyTextBox"), TextBox).Text
  '对 MyValue 执行操作
End Sub

对 FindControl 调用的结果调用 CType,将会把返回值由 Object 类型强制转换成 TextBox 类型,以访问 .Text 属性。

可以(或应该)使用分页而没有使用
用户未必希望在单个页面上滚动查看成千上万条记录。请确保您的应用程序设计合理,能够处理可能会返回大量记录的情况。有关如何在 Datagrid 中实现分页的信息,请参阅 Paging in DataGrid QuickStart Tutorial。在 Scott Mitchell 的文章 Creating a Pageable, Sortable DataGrid 中可以找到更多的信息。

忘记在每个 Datagrid 事件中执行 .DataBind() 调用,从而导致回发
一个常见的问题是:“当我点击 Datagrid 某一行中的 Edit(编辑)链接时,页面回发,且不包含任何数据。这是什么错误?”问题在于数据仅在页面第一次被调用时绑定到网格。在每个 Datagrid 事件(Edit、Update、Cancel、Page 或 Sort)中,请确保设置了 Datagrid 的 Datasource 属性(除非已经在 <asp:Datagrid> 声明中通过声明的方式进行了设置),并对 Datagrid 调用了 DataBind() 方法。

运行时不必要地在 Datagrid 中动态创建 Datagrid 控件或列
在某些业务和技术方案中,在运行时创建 ASP.NET 控件是必要的,也是完全合适的。例如,有时需要在选择其他页面选项后,才能在运行时确定用户界面。或是要创建一个复合服务器控件,其中的每个子控件都需要动态创建,因为无法以声明的方式创建这些子控件。如果遇到这些情况,请注意,提交页面时不要保留这些动态控件。必须在页面生命周期的早期,在每次回发时重新创建动态控件(例如在 Page_Init 事件中)。警言:创建控件要早,创建控件要勤。有关如何动态创建控件的详细信息,请参阅 Microsoft Knowledge Base 文章 HOW TO:Dynamically Create Controls in ASP.NET with Visual Basic .NET。

然而,如果 Datagrid 应用程序中不是一定需要动态创建控件,请避免使用该技术,以免遇到麻烦。尽管可能创建动态 Datagrid,但它们会引发各种事件,这通常都会令人头疼。换句话说,不要动态创建控件,以避免因为创建控件使 ASPX 文件变得散乱。

持续使用大型 ViewState
Datagrid 控件会在页面中添加大量的 ViewState,这一点令人讨厌,因为这会导致呈现给用户的页面的总体大小急剧增加。要使页面大小不增加,最简单的方法是无论对整个页面,还是单独对某些特定的控件,都禁用 ViewState。例如,如果页面不产生回发,那么对整个页面禁用 ViewState 是安全的。否则,请对两次回发之间状态信息不会发生更改的各个控件禁用 ViewState,或者对不需要隐藏字段来跟踪自身状态的那些控件禁用 ViewState。

对 Datagrid 控件或包含 Datagrid 的页面禁用 ViewState 时,如果 Datagrid 会启动回发事件,那么需要执行一些特殊的步骤。首先,必须在每次回发时在 Page_Load 中重新绑定 Datagrid。这有违常规做法(以及上述第二个问题中的描述)。但如果禁用 ViewState,该步骤是必需的,这样在执行 Page_Load 后可以正确地引发其他 Datagrid 事件。如果要处理以下 Datagrid 事件中的任何一部分(或全部),那么还需要在 ViewState 中手动存储一些 Datagrid 属性。例如,在禁用了 ViewState 的 Datagrid 中进行编辑时,只要是在 Page_Load 中第一次绑定 Datagrid 之前重新存储 EditItemIndex,且 Datagrid 处于编辑模式,那么只需将 EditItemIndex 储存到 ViewState 就够了(请参阅示例代码)。

表 1:Datagrid 事件与 ViewState 的依赖关系

事件 是否依赖于 ViewState? 要存储在 ViewState 中的字段
ItemCreated   无
ItemDataBound   无
SortCommand 是 SortExpression
EditCommand 是 EditItemIndex
PageIndexChanged 是 CurrentPageIndex
SelectedIndexChanged   无

清单 1:启用编辑、排序和分页,但禁用 ViewState 的 Datagrid 的示例代码。

Sub Page_Load
If Not ViewState("EditItemIndex") Is Nothing Then
    Datagrid1.EditItemIndex = ViewState("EditItemIndex")
  End If
  If Not ViewState("CurrentPageIndex") Is Nothing Then
    Datagrid1.CurrentPageIndex = ViewState("CurrentPageIndex")
  End If
  BindGrid()
End Sub

Sub BindGrid()
  Dim DV As DataView
  DV = GetDataSource()
  DV.Sort = ViewState("SortExpression")
  Datagrid1.DataSource = DV
  Datagrid1.DataBind()
End Sub

Sub Datagrid1_SortCommand(s As Object, _
    e As DataGridSortCommandEventArgs)
  ViewState("SortExpression") = e.SortExpression
  BindGrid()
End Sub

Sub Datagrid1_EditCommand(s As Object, _
    e As DatagridCommandEventArgs)
  Datagrid1.EditItemIndex = e.Item.ItemIndex
  ViewState("EditItemIndex") = e.Item.ItemIndex
  BindGrid()
End Sub

Sub Datagrid1_PageIndexChanged(s as Object, _
    e As DataGridPageChangedEventArgs)
  Datagrid1.CurrentPageIndex = e.NewPageIndex
  ViewState("CurrentPageIndex") = e.NewPageIndex
  BindGrid()
End Sub

使用 ItemDataBound 或 ItemCreated 事件时,忘记检查适当的 ListItemType
Datagrid 控件对每个数据行引发两个事件。首次将每行添加到 Datagrid 时将引发 ItemCreated 事件,将数据绑定到每行时将引发 ItemDataBound 事件。添加单元格到 Datagrid 的表格输出时,这些事件可以用于控制每个单元格的外观或内容。例如,可以基于数值的范围修改单元格的背景颜色。但关键是要记住,这些事件的引发针对的是所有 Datagrid 项目类型,包括页眉、页脚和分页程序项目。如果执行 ItemDataBound 事件期间,没有在引用项目的数据之前仔细检查项目类型,第一个项目(通常是标题行)就将发生错误。如果 Datagrid 启用了分页,且将其设置为在顶端显示,那么第一个项目就会成为分页程序项目。以下示例代码显示如何在引用项目数据之前进行正确的 ListItemType 检查。不要忘了 AlternatingItem!

Sub DataGrid1_ItemDataBound(source As Object, _
    e As DataGridItemEventArgs)
      If (e.Item.ItemType = ListItemType.Item Or _
    e.Item.ItemType = ListItemType.AlternatingItem) Then
        If e.Item.DataItem("ForumDate") < DateTime.Today Then
          e.Item.Cells(1).BackColor =
          System.Drawing.Color.FromName("#ffccff")
     End If
      End If
End Sub

需要对生成的 HTML 有更多的控制时,过多地使用了 Datagrid(Repeater 也许是更好的选择)
如果懒散的程序员喜欢 Datagrid 控件(因为 Datagrid 控件为他们完成了很多工作),那么有着极强控制欲的程序员必定喜欢 Repeater 控件。如果需要或希望完全控制创建的所有 HTML,请使用 Repeater 控件,它能帮助您完成该任务。Repeater 控件在性能上也略占优势,因为它不像 Datagrid 控件的所有内置功能那样占用系统资源。也可以考虑使用折衷的 DataList 控件,它具备编辑和排序功能,同时还具有在一行内重复显示记录的功能。

参考资料
DotNetJohn 网站上的 Viewstate
Datagrid QuickStart Tutorials
有关 DataGrid Web 服务器控件的重要问题
Creating a Pageable, Sortable DataGrid

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白的知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的各自承担的工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现前端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格的批量化操作等等,所有的功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大的亮点在于前后端做了分离,真正理解前后端的各自承担的工作。前端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础的朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
<div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;">当前课程中商城项目的实战源码是我发布在 GitHub 上的开源项目 newbee-mall (新蜂商城),目前已有 6300 多个 star,</span><span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 商城项目功能的讲解,让大家实际操作并实践上手一个大型的线上商城项目,并学习到一定的开发经验以及其中的开发技巧。<br /> 商城项目所涉及的功能结构图整理如下:<br /> </span> </div> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> <img alt="modules" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3N0b3JlL25ld2JlZS1tYWxsLXMucG5n?x-oss-process=image/format,png" /> </p> </div> <p style="color:rgba(0,0,0,.75);"> <strong><span style="color:#e53333;">课程特色</span></strong> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 对新手开发者十分友好,无需复杂的操作步骤,仅需 2 秒就可以启动这个完整的商城项目 </li> <li> 最终的实战项目是一个企业级别的 Spring Boot 大型项目,对于各个阶段的 Java 开发者都是极佳的选择 </li> <li> 实践项目页面美观且实用,交互效果完美 </li> <li> 教程详细开发教程详细完整、文档资源齐全 </li> <li> 代码+讲解+演示网站全方位保证,向 Hello World 教程说拜拜 </li> <li> 技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,可以进一步提升你的市场竞争力 </li> </ul> </div> <p style="color:rgba(0,0,0,.75);">   </p> <p style="color:rgba(0,0,0,.75);"> <span style="color:#e53333;">课程预览</span> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> 以下为商城项目的页面和功能展示,分别为: </p> </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 商城首页 1<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050347585499.gif" /> </li> <li> 商城首页 2<br /> <img alt="" src="https://img-bss.csdn.net/202005181054413605.png" /> </li> <li>   </li> <li> 购物车<br /> <img alt="cart" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvY2FydC5wbmc?x-oss-process=image/format,png" /> </li> <li> 订单结算<br /> <img alt="settle" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvc2V0dGxlLnBuZw?x-oss-process=image/format,png" /> </li> <li> 订单列表<br /> <img alt="orders" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvb3JkZXJzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 支付页面<br /> <img alt="" src="https://img-bss.csdn.net/201909280301493716.jpg" /> </li> <li> 后台管理系统登录页<br /> <img alt="login" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWxvZ2luLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品管理<br /> <img alt="goods" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWdvb2RzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品编辑<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050348242799.png" /> </li> </ul> </div> </div> </div> </div>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值