欢迎光临
我们一直在努力

在ASP.Net中创建动态表格-.NET教程,Asp.Net开发

建站超值云服务器,限时71元/月

摘要: 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”>
<complextype content=”elementonly”>
<element name=”title_id” type=”string” minoccurs=”1″
maxoccurs=”1″></element>
<element name=”au_id” type=”string” minoccurs=”1″
maxoccurs=”1″></element>
<element name=”title” type=”string” minoccurs=”1″
maxoccurs=”1″></element>
<element name=”price” msdata:datatype=”system.currency”
type=”string”
minoccurs=”1″ maxoccurs=”1″></element>
<element name=”pubdate” type=”timeinstant” minoccurs=”1″
maxoccurs=”1″></element>
</complextype>
<unique name=”titleconstraint” msdata:primarykey=”true”>
<selector>.</selector>
<field>title_id</field>
</unique>
<key name=”authortitle”>
<selector>../author</selector>
<field>au_id</field>
</key>
<keyref refer=”authortitle”>
<selector>.</selector>
<field>au_id</field>
</keyref>
</element>
</schema>
<documentelement>
<author>
<au_id>154-00-1300</au_id>
<au_name>john doe</au_name>
<phone>425 705 1234</phone>
<address>one microsoft way</address>
<city>redmond</city>
<state>ca</state>
<zip>98005</zip>
</author>

<title>
<title_id>bu1032</title_id>
<au_id>213-46-8915</au_id>
<title>the busy executives database guide</title>
<price>19.99</price>
<pubdate>1991-06-12t07:00:00</pubdate>
</title>
</documentelement>
</root>

  这些样例简化了数据访问,从而将重点全部放在 datagrid 的使用上。上面的 xml 被加载进一个 dataset。 dataset 为数据提供高速缓存,从而可以进行筛选、排序和编辑等等各种操作。下面的代码来自 global.asax,用于加载 dataset 和将其保存为 session 状态。

public void session_onstart() {
// 将样例中所用的数据载入会话范围的 dataset.

filestream fs = null;
dataset ds = null;
try {
fs = new filestream(server.mappath(“data\\titlesdb.xml”),
filemode.open, fileaccess.read);
ds = new dataset();
ds.readxml(fs);
} finally {
if (fs != null) {
fs.close();
fs = null;
}
}
session[“appdata”] = ds;
}

  在实际的 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
imports system.data
imports system.data.sqlclient
imports system.data.oledb
imports system.datetime
imports dataaccess

public class borrow
inherits system.web.ui.page
public db as new oledataaccess()
dim mydataset as new dataset()

dim selecttable as new datatable()
dim selectview as new dataview()

private sub page_load(byval sender as system.object, byval e as system.eventargs) handles mybase.load
dim info as string, time
if not page.ispostback then
if now.hour >= 6 and now.hour < 12 then
info = “早上好!!”
elseif now.hour > 12 and now.hour < 18 then
info = “下午好!!”
else
info = “晚上好!!”
end if
dim counter as int16
counter = application(“counter”)
lblinfo.text = application(“username”) + “,” + info + chr(13) + “欢迎你前来借阅 。.” + chr(10) + “你是第” + counter.tostring + “位来访者!”

end if
if isnothing(session(“mtable”)) then
selecttable = createtable()
session(“mtable”) = selecttable
settext()
else
selecttable = session(“mtable”)
end if
end sub
private function createtable() as datatable
dim dt as new datatable()
dim dr as datarow
dt.columns.add(new datacolumn(“id”, gettype(string)))
dt.columns.add(new datacolumn(“name”, gettype(string)))
dt.columns(0).columnname = “系号”
dt.columns(1).columnname = “名称”
return dt
end function
end class

  该类超越 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
imports system.data
imports system.data.sqlclient
imports system.data.oledb
imports system.datetime
imports dataaccess

public class borrow
inherits system.web.ui.page
public db as new oledataaccess()
dim mydataset as new dataset()
dim selecttable as new datatable()
dim selectview as new dataview()

private sub settext()
select case application(“index”)
case 0
lblfind1.text = “检索号 “
lblfind2.text = “图书分类”
lblfind3.text = “图书名称”
lblfind4.text = “分类号”
lblfind5.text = “作者”
lblfind6.text = “有效性”
case 1
lblfind1.text = “编号 “
lblfind2.text = “卷册名称”
lblfind3.text = “设计专业代码”
lblfind4.text = “专业代码”
lblfind5.text = “馆藏号”
lblfind6.text = “负责人 “
case 2
end select
end sub

private sub data2bind()
datagrid2.datasource = selecttable.defaultview
datagrid2.databind()
end sub

private sub linkbutton1_click(byval sender as system.object, byval e as system.eventargs) handles linkbutton1.click
application(“index”) = 0
settext()
end sub

private sub linkbutton2_click(byval sender as system.object, byval e as system.eventargs) handles linkbutton2.click
application(“index”) = 1
settext()
end sub

private sub linkfind_click(byval sender as system.object, byval e as system.eventargs) handles linkfind.click
dim strsql as string
dim txt(6) as string
dim i as int16 = 0
txt(0) = trim(txtfind1.text)
txt(1) = trim(txtfind2.text)
txt(2) = trim(txtfind3.text)
txt(3) = trim(txtfind4.text)
txt(4) = trim(txtfind5.text)
txt(5) = trim(txtfind6.text)
if txt(0) = “” and txt(1) = “” and txt(2) = “” and txt(3) = “” and txt(4) = “” and txt(5) = “” then
exit sub
end if
for i = 0 to 5
if txt(i) = “” then txt(i) = “!!!!”
next
try
if application(“index”) = 0 then
strsql = “select jsh as 检索号, tsmc as 图书名称, tsfl as 图书分类, cs as 册数, flh as 分类号, dj as 单价, zz as 作者, bz as 备注, zbbm as 主编部门, fbrq as 发布日期, ssrq as 实施日期, yxx as 有效性, zt as 状态 from g2272.kpk ” & _
” where jsh like %” & txt(0) & _
“% or tsfl like %” & txt(1) & _
“% or tsmc like %” & txt(2) & _
“% or flh like %” & txt(3) & _
“% or zz like %” & txt(4) & _
“% or yxx like %” & txt(5) & “%”
else
strsql = “select system_id as 编号, jcmc as 卷册名称, gcdm as 工程代码, zydm as 专业代码, gch as 馆藏号, rkrq as 入库日期, tzzs as 图纸张数, gdzb as 归档正本, gdfb as 归档副本, jc as 说明书, zsr as 清册, zbr as 负责人 from docsadm.twml ” & _
” where system_id like %” & txt(0) & _
“% or jcmc like %” & txt(1) & _
“% or gcdm like %” & txt(2) & _
“% or zydm like %” & txt(3) & _
“% or gch like %” & txt(4) & _
“% or zbr like %” & txt(5) & “%”
end if
mydataset = application(“db”).executesql(strsql)
datagrid1.datasource = mydataset.tables(0).defaultview
datagrid1.databind()
catch ex as exception
msgbox(“错误信息”, ex.message & vbcrlf & “stack step”)
end try
end sub
end class

  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 的各种功能,您可以逐步添加其它功能。

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 在ASP.Net中创建动态表格-.NET教程,Asp.Net开发
分享到: 更多 (0)