摘要: datagrid 控件是与 asp.net page framework 一起发行的数据绑定的服务器控件。本文使用 datagrid 来建立包含动态表格视图的 web 页面。还探讨控件所提供功能的各个方面,包括选择、删除、分页和模板列 ,而控件就是使用这些功能来建立最终的页面的。
简介
datagrid 控件可以用于若干个只读数据。该控件可用于数据表格布局的输出进行简化。还提供多个机制,用于通过超级链接及其对选择、排序、分页和原地编辑和其它特性的支持,为输出添加交互性。这使得该控件在若干的常见 web 应用方案中很有用,诸如列表、购物车和查询结果。
datagrid 还提供一些功能,这些功能具有 asp.net 架构所特有的所有服务器控件的特点。该控件包含进行与浏览器无关的输出所需的逻辑,同时提供了一个统一的编程模型,从而能够处理回传数据,以及对请求之间的状态进行管理。这样,开发者就可以针对带有属性、方法和事件的对象模型进行编程,而不必处理直接用 html编程所带来的不一致性和复杂性。
我们要建立什么?
本文举出了一系列的示例页面,彼此结合,从而最终生成一个页面,该页面以示例数据库的 authors 表和 titles 表为依据,提供主/详细资料视图(该数据库随 microsoft sql server?2000 一起发运)。序列中的每个页面均介绍 datagrid 控件的一个新的特性或功能。下图从 pubs 数据库抽取出来的。
主/详细资料视图似于 microsoft access 所介绍的窗体/子窗体概念。也类似于随 microsoft visual interdev 6.0 一起发表的 dataform wizard (数据窗体向导)。主/详细资料视图显示一到多的关系结果,其中视图的一个部分显示第一个查询或主查询的结果。然后跟踪一个选择,以筛选所使用的第二个查询的结果,从而在视图的另一部分显示选择内容的详细资料。
图 1. 完成的页面 |
图 1 将 author 列表显示在页面的上半部分,并将关于所选作者的详细资料(包括相关书名)显示在下半部分。 authors 列表和 titles 均是用 datagrid 控件加以表示的。 显示作者的 datagrid 举例说明如何进行选择、排序、和分页。显示书名的 datagrid 演示如何进行原地编辑、格式化和定制列。
数据访问
为了使示例自成一体,从 sql server 抽取数据并将该数据连同其架构信息一同保留为一个 xml 文件 titlesdb.xml。下面是该文件的一个片断。
<root> <schema id=”documentelement” targetnamespace=”” xmlns=”http://www.w3.org/1999/xmlschema” xmlns:msdata=”urn:schemas-microsoft-com:xml-msdata”> <element name=”author”> <complextype content=”elementonly”> <element name=”au_id” type=”string” minoccurs=”1″ maxoccurs=”1″></element> <element name=”au_name” type=”string” minoccurs=”1″ maxoccurs=”1″></element> <element name=”address” type=”string” minoccurs=”0″ maxoccurs=”1″></element> <element name=”city” type=”string” minoccurs=”0″ maxoccurs=”1″></element> <element name=”state” type=”string” minoccurs=”0″ maxoccurs=”1″></element> <element name=”zip” type=”string” minoccurs=”0″ maxoccurs=”1″></element> <element name=”phone” type=”string” minoccurs=”0″ maxoccurs=”1″></element> </complextype> <unique name=”authorconstraint” msdata:primarykey=”true”> <selector>.</selector> <field>au_id</field> </unique> </element> <element name=”title”> <title> |
这些样例简化了数据访问,从而将重点全部放在 datagrid 的使用上。上面的 xml 被加载进一个 dataset。 dataset 为数据提供高速缓存,从而可以进行筛选、排序和编辑等等各种操作。下面的代码来自 global.asax,用于加载 dataset 和将其保存为 session 状态。
public void session_onstart() { filestream fs = null; |
在实际的 web 应用程序中,通常不是使用处于 session 或 application 状态的高速缓存数据,而是通过所存储的过程、中间层业务对象,或通过调用 web 服务所揭示的方法来访问和修改数据。无论采取怎样的手段来访问数据,您会发现你依旧以同样的方式来编程和与控件的对象模型进行进行交互。
第 1 步: 一个基本的 datagrid
序列的第一步展示了一个页面,其中包含单独一个 datagrid 控件,用于显示来自数据源的一个只读图书列表。
图 2. 完成第 1 步后的页面
datagrid 声明来自:
<%@ register tagprefix=”cr” namespace=”crystaldecisions.web” assembly=”crystaldecisions.web” %> <%@ page language=”vb” autoeventwireup=”false” codebehind=”borrow.aspx.vb” inherits=”borrrow.borrow”%> <%@ register tagprefix=”cr” namespace=”crystaldecisions.web” assembly=”crystaldecisions.web” %> <!doctype html public “-//w3c//dtd html 4.0 transitional//en”> <html> <head> <title>档案、图书流通管理</title> <meta content=”microsoft visual studio.net 7.0″ name=”generator”> <meta content=”visual basic 7.0″ name=”code_language”> <meta content=”javascript” name=”vs_defaultclientscript”> <meta content=”http://schemas.microsoft.com/intellisense/ie5″ name=”vs_targetschema”> </head> <body bgcolor=”beige” ms_positioning=”gridlayout”> <form id=”form1″ method=”post” runat=”server”> <asp:label id=”label14″ style=”z-index: 101; left: 100px; position: absolute; top: -50px” runat=”server” width=”47px” height=”18px”></asp:label> <asp:linkbutton id=”linkfind” style=”z-index: 105; left: 361px; position: absolute; top: 182px” runat=”server” width=”33px” height=”22px” tooltip=”按此进行查询” forecolor=”#0000c0″>查询</asp:linkbutton> <table style=”z-index: 104; left: 133px; width: 637px; position: absolute; top: 75px; height: 74px” cellspacing=”1″ cellpadding=”1″ width=”637″ border=”1″> <tr> <td style=”width: 92px”> <asp:label id=”lblfind1″ runat=”server” forecolor=”green”>检索号</asp:label> </td> <td style=”width: 196px”> <asp:textbox id=”txtfind1″ runat=”server” width=”199px” height=”26px”></asp:textbox> </td> <td style=”width: 83px”> <asp:label id=”lblfind4″ runat=”server” forecolor=”green”>标准号</asp:label> </td> <td> <asp:textbox id=”txtfind4″ runat=”server” width=”243px” height=”26px”></asp:textbox> </td> </tr> <tr> <td style=”width: 92px”> <asp:label id=”lblfind2″ runat=”server” forecolor=”green”>标准书号</asp:label> </td> <td style=”width: 196px”> <asp:textbox id=”txtfind2″ runat=”server” width=”199px” height=”26px”></asp:textbox> </td> <td style=”width: 83px”> <asp:label id=”lblfind5″ runat=”server” forecolor=”green”>分类号</asp:label> </td> <td> <asp:textbox id=”txtfind5″ runat=”server” width=”243px” height=”26px”></asp:textbox> </td> </tr> <tr> <td style=”width: 92px”> <asp:label id=”lblfind3″ runat=”server” forecolor=”green”>图书名称</asp:label> </td> <td style=”width: 196px”> <asp:textbox id=”txtfind3″ runat=”server” width=”199px” height=”26px”></asp:textbox> </td> <td style=”width: 83px”> <asp:label id=”lblfind6″ runat=”server” forecolor=”green”>检索号</asp:label> </td> <td> <asp:textbox id=”txtfind6″ runat=”server” width=”242px” height=”26px”></asp:textbox> </td> </tr> </table> <asp:datagrid id=”datagrid1″ style=”z-index: 102; left: 129px; position: absolute; top: 213px” runat=”server” width=”1600px” height=”325px” alternatingitemstyle-wrap=”false” cellpadding=”4″ borderwidth=”1px” borderstyle=”none” bordercolor=”#cc9966″ backcolor=”white” allowpaging=”true” tooltip=”可按选择按钮选择所要借阅的图书、资料”> <footerstyle wrap=”false” forecolor=”#330099″ backcolor=”#ffffcc”></footerstyle> <headerstyle font-bold=”true” wrap=”false” horizontalalign=”left” forecolor=”#ffffcc” backcolor=”#990000″></headerstyle> <pagerstyle horizontalalign=”center” forecolor=”#330099″ backcolor=”#ffffcc” wrap=”false” mode=”numericpages”></pagerstyle> <selecteditemstyle font-bold=”true” wrap=”false” forecolor=”#9900ff” backcolor=”#ffcc66″></selecteditemstyle> <edititemstyle wrap=”false”></edititemstyle> <alternatingitemstyle wrap=”false”></alternatingitemstyle> <itemstyle wrap=”false” forecolor=”#cc9900″ backcolor=”white”></itemstyle> <columns> <asp:buttoncolumn text=”查阅” headertext=”选择” commandname=”select” itemstyle-forecolor=”#3366cc”></asp:buttoncolumn> </columns> </asp:datagrid> <asp:linkbutton id=”linksumit” style=”z-index: 109; left: 816px; position: absolute; top: 184px” runat=”server” width=”42px” height=”18px” tooltip=”可按此把借阅信息传入管理人员” forecolor=”#0000c0″>提交</asp:linkbutton> <asp:label id=”label1″ style=”z-index: 110; left: 138px; position: absolute; top: 186px” runat=”server” forecolor=”#c00000″>你已经选择了该行!</asp:label> </form> </body> </html> |
上面的代码展示 datagrid,该控件的各种属性已经过声明设定。 datagrid 控件与其它 web 控件如 font、backcolor、forecolor 和 borderwidth 共享一组公用的样式属性。另外, datagrid 提供仅适用于表的属性如 cellpadding。最后, datagrid 提供附加的样式属性,这些样式属性影响其中各项目和列如 headerstyle、itemstyle 和 alternatingitemstyle 的表示。这些样式属性用于创建丰富多采且极富魅力的数据视觉效果。
datagrid 支持从其所绑定的数据源自动生成列的功能。在本例中, autogeneratecolumns 属性已被设定为 true。因此必须借助要展示的列集对 columns 集合进行绑定。从而可以更多地控制表现效果,诸如列的次序和标头以及与每列对应的样式。这一步中所定义的列均为 boundcolumns,从而可以通过其 datafield 属性,绑定到数据源的单独一个字段。您在以后步骤中可以看到, datagrid 允许选择各种各样类型的列。
下面的类包含支持本页面的代码。
step1page.vb:
imports system.dbnull public class borrow dim selecttable as new datatable() end if |
该类超越 page 的 onload 方法 (类似于实施 page_load),将 建立一个临时表并巧妙地利用session在加载页面时保证仅执行一次。与其它一般页面一样,确定来访者人数。
第 2 步: 带有动态绑定的datagrid
创建带有动态绑定的datagrid视图的一个方法就是一个datagrid来显示不同的数据表格的内容。这里有个必须解决的问题,就是不同的表在一个表格中怎样绑定?如何确定表的字段,特别是表的英文字段怎样变成中文?大多数的方法是用绑定字段方法实现,在绑定字段后改变标题,这种方法是不可取的。一般不能实现动态绑定,因在绑定字段时必须先申明datagrid,这里,我们是不允许申明二个以上的datagrid。正确的方法是在用表绑定datagrid前临时改变表的字段名。下面就是实现的方法
页包含对datagrid 的数据绑定。datagrid 用于显示图书和档案的内容。与第 1 步相同, datagrid 包含一个针对要显示的列的定义,以及用于为列、行和总体控制提供可视格式化的样式属性设置。在绑定之前先根据用户的选择进行查询。查询内容是不变化的,我们通过settext过程来动态设置标题。在查询前先生成查询语句,通过查询语句改变其字段名,同时进行动态的模糊查询。这里要说明的是页面是不能保留数据的,所以我们用到了应用对象application来保留数据。
step2apage.vb 包含支持详细资料页面的代码。
step2apage.vb:
imports system.dbnull public class borrow private sub data2bind() private sub linkbutton1_click(byval sender as system.object, byval e as system.eventargs) handles linkbutton1.click private sub linkbutton2_click(byval sender as system.object, byval e as system.eventargs) handles linkbutton2.click private sub linkfind_click(byval sender as system.object, byval e as system.eventargs) handles linkfind.click |
3 步: 选择
我们通过动态查询得到所需数据后,然后对其数据操作,这里实现读者借书的功能。
private sub datagrid1_selectedindexchanged(byval sender as system.object, byval e as system.eventargs) handles datagrid1.selectedindexchanged dim dv as dataview = selecttable.defaultview() dim dr as datarow = selecttable.newrow() dim id, index as string dim name as string label1.visible = false index = datagrid1.selectedindex() id = datagrid1.items(index).cells(1).text dv.rowfilter = “id=” + id + “” if dv.count > 0 then response.write(“. 你已经选择了该行!”) label1.visible = true exit sub end if dv.rowfilter = “” name = datagrid1.items(index).cells(2).text dr(0) = id dr(1) = name selecttable.rows.add(dr) data2bind() end sub |
向列集添加了一个新的列类型 buttoncolumn。该列在每行中生成 linkbutton,用于选择该行,而不是从该页进行浏览。列的 command 属性设定为 select。datagrid 将 select 作为一个标准命令,将包含被单击按钮的列选定。当用户选择该行时,先取得该行的值,如果该行已选择则提示信息,我们用过虑条件实现,所选择的行插入一临时表,且在另一datagrid中显示。注意过虑之后应该设置过虑为空,否则得不到结果。
第 4 步: 删除
datagrid 控件支持标准的列集,它提供一些基础的操作。诸如 boundcolumn、 buttoncolumn 和 templatecolumn。我们利用buttoncolumn列实现删除功能。
… private sub datagrid2_deletecommand(byval source as object, byval e as system.web.ui.webcontrols.datagridcommandeventargs) handles datagrid2.deletecommand dim dv as dataview = selecttable.defaultview() dim id as string id = e.item.cells(1).text dv.rowfilter = “id=” + id + “” if dv.count > 0 then dv.delete(0) dv.rowfilter = “” data2bind() end sub |
第 5 步: 分页
设置datagrid的分页方法有二种,一种是数字分页人,另一种是上下分页。实现方法是在属性栏中设置autopaging为true,在其属性生成器中设置分页类型。
结论
datagrid 控件简化了多个常见 web 应用情形,其中包括只读报表到交互式应用程序 ui。该控件优于传统的 asp 编程。它将转换对象模型操作和数据绑定所需的逻辑封装进与浏览器无关的 html 表现功能。还将处理回传数据以及转换客户机事件的详细资料封状进服务器事件。
该控件设计用于无须作出太多开发努力就可以表现您的数据。随着应用要求的改变,以及您开始使用 datagrid 的各种功能,您可以逐步添加其它功能。