我们在呈现数据的时候，要特别注意使用者接口的设计。一个好的使用者接口，除了美观外还可以让使用者容易使用以及阅读数据。
数据格式的润饰
我们在呈现数据的时候，不要将未经修饰过的数据呈现给使用者。例如金额一万元，如果我们直接显示「10000」，可能会导致使用者看成一千或十万，造成使用者阅读数据上的困扰。若我们将一万元润饰后输出为「nt$10,000」，不但让使比较好阅读，也会让使用者减少犯错的机会。下列画面为润饰过的结果：
上述数据除了将datagrid web 控件以颜色来区隔记录外，最主要将日期、单价以及小计这三个计字段的数据修饰的更容易阅读。要修饰字段的输出，只要设定字段的dataformatstring 属性即可；其使用语法如下：
dataformatstring="{0:格式字符串}"
我们知道在dataformatstring 中的{0} 表示数据本身，而在冒号后面的格式字符串代表所们希望数据显示的格式；另外在指定的格式符号后可以指定小数所要显示的位数。例如原来的数据为「12.34」，若格式设定为{0:n1}，则输出为「12.3」。其常用的数值格式如下表所示：
其常用的日期格式如下表所示：
上述画面完整程序如下所示：
<%@import namespace=system.data%>
<%@import namespace=system.data.ado%>
<html>
<form runat="server">
<asp:datagrid id="dga" allowpaging="true" pagesize="5"
onpageindexchanged="dga_pagechg"
runat="server"
pagerstyle-mode="numericpages"
bordercolor="#808080"
headerstyle-font-names="courier new"
headerstyle-backcolor="#d1dceb"
headerstyle-font-bold="true"
headerstyle-horizontalalign="center"
autogeneratecolumns="false"
onitemcommand="dga_icmd"
alternatingitemstyle-backcolor="#ffff99">
<property name="pagerstyle">
<asp:datagridpagerstyle
horizontalalign="center" backcolor="gainsboro"
pagebuttoncount="4" mode="numericpages"/></property>
<property name="alternatingitemstyle">
<asp:tableitemstyle forecolor="black"
backcolor="gainsboro"/></property>
<property name="itemstyle">
<asp:tableitemstyle forecolor="#000040"/></property>
<property name="headerstyle">
<asp:tableitemstyle font-names="courier new" font-bold="true"
horizontalalign="center" backcolor="#d1dceb"/></property>
<property name="columns">
<asp:buttoncolumn datatextfield="username" headertext="姓名"/>
<asp:boundcolumn datafield="usertel" headertext="电话"/>
<asp:boundcolumn datafield="useradd" headertext="住址"/>
<asp:boundcolumn datafield="useremail" headertext="电邮"/>
</property>
</asp:datagrid><p>
<asp:datagrid id="dgb" runat="server"
pagerstyle-mode="numericpages"
bordercolor="#808080"
headerstyle-font-names="courier new"
headerstyle-backcolor="#d1dceb"
headerstyle-font-bold="true"
headerstyle-horizontalalign="center"
autogeneratecolumns="false"
backcolor="transparent" >
<property name="pagerstyle">
<asp:datagridpagerstyle mode="numericpages"/></property>
<property name="alternatingitemstyle">
<asp:tableitemstyle forecolor="black"
backcolor="gainsboro"/></property>
<property name="itemstyle">
<asp:tableitemstyle forecolor="#000040"
backcolor="white"/></property>
<property name="headerstyle">
<asp:tableitemstyle font-names="新细明体" font-bold="true"
horizontalalign="center" backcolor="#d1dceb"/></property>
<property name="columns">
<asp:boundcolumn datafield="orderdate" headertext="日期"
dataformatstring="{0:d}"/>
<asp:boundcolumn datafield="productname" headertext="产品名称"/>
<asp:boundcolumn datafield="unitprice" headertext="单价"
dataformatstring="nt${0:n0}"/>
<asp:boundcolumn datafield="quantity" headertext="数量"/>
<asp:boundcolumn datafield="total" headertext="小计"
dataformatstring="nt${0:n0}"/>
</property>
</asp:datagrid>
</form>
<asp:label id="label1" runat="server"/>
<script language="vb" runat="server">
dim dsca as adodatasetcommand=new adodatasetcommand("select * from
members", _
"provider=microsoft.jet.oledb.4.0;data
source=c:\inetpub\wwwroot\cr\ch08\myweb.mdb")
dim dsdataset as dataset=new dataset
sub page_load(sender as object, e as eventargs)
if page.ispostback=false then
dsca.selectcommand.commandtext="select * from members"
dsca.filldataset(dsdataset, "members")
dga.datasource=dsdataset.tables("members").defaultview
dga.databind()
end if
label1.text="您目前没有点选任何记录."
end sub
sub dga_pagechg(sender as object, e as datagridpagechangedeventargs)
dsca.filldataset(dsdataset, "members")
dga.datasource=dsdataset.tables("members").defaultview
dga.databind()
dgb.visible=false
end sub
sub dga_icmd(sender as object, e as datagridcommandeventargs)
dim shtr as short=(dga.currentpageindex * dga.pagesize) +
e.item.itemindex
if shtr>=0 then
dsca.filldataset(dsdataset, "members")
dsca.selectcommand.commandtext="select * from orders where
userid='" & _
dsdataset.tables("members").rows(shtr)("userid") & "'"
dsca.filldataset(dsdataset, "orders")
dgb.datasource=dsdataset.tables("orders").defaultview
dgb.databind()
dgb.visible=true
label1.text="总共有" & dsdataset.tables("orders").rows.count & "
笔记录"
end if
end sub
</script>
</html>
