强化DataGrid Web 控件的编辑接口_.net

强化DataGrid Web 控件的编辑接口

发表于：2007-07-14来源：作者：点击数：标签：

接下来的议题比较复杂，不过详细研究了解后可以产生亲和力较佳的使用者接口。DataGrid Web控件在进入编修模式时，可以自订一些可视化的输入组件，代替使用者在TextBox 中输入。这样一来可以让使用者快速轻松输入外，也可以避免一些输入的错误。首先我们来看

接下来的议题比较复杂，不过详细研究了解后可以产生亲和力较佳的使用者接口。DataGrid Web控件在进入编修模式时，可以自订一些可视化的输入组件，代替使用者在TextBox 中输入。这样一来可以让使用者快速轻松输入外，也可以避免一些输入的错误。首先我们来看看加强后的编修画面，我们利用DropDownList Web 控件以及CheckBox Web 控件，协助使用者输入性别、血型、星座以及是否订阅电子报，如下画面所示：

按下编辑选项后，提供可视化的工具供使用者使用：

使用者修改完毕后，数据已经更新：

上述范例画面的完整程序代码如下所示：

<%@Import Namespace=System.Data.ADO%>
<%@Import Namespace=System.Data%>
<Html>
<Form Runat="Server">
<ASP:DataGrid Id="dgA" AllowPaging="True" PageSize="5"
OnPageIndexChanged="dgA_PageChg" Runat="Server"
PagerStyle-Mode="NumericPages" BorderColor="#808080"
HeaderStyle-BackColor="#0066CC" HeaderStyle-ForeColor="White"
HeaderStyle-HorizontalAlign="Center"
AutoGenerateColumns="False"
OnEditCommand="dgA_ECmd" OnUpdateCommand="dgA_UCmd"
OnCancelCommand="dgA_CCmd" >
<Property Name="EditItemStyle">
<ASP:TableItemStyle HorizontalAlign="Center" BackColor="#D1DCEB"/>
</Property>
<Property Name="ItemStyle">
<ASP:TableItemStyle HorizontalAlign="Center"/>
</Property>
<Property Name="Columns">
<ASP:EditCommandColumn
HeaderText="编辑"
EditText="<Img Border=0 src="/Files/BeyondPic/2005-11/12/05111207265956052.gif">"
UpdateText="<Img Border=0 src="/Files/BeyondPic/2005-11/12/05111207265979606.gif">"
CancelText="<Img Border=0 src="/Files/BeyondPic/2005-11/12/05111207265982384.gif">"/>
<ASP:TemplateColumn>
<Template Name="HeaderTemplate">
姓名
</Template>
<Template Name="ItemTemplate">
<ASP:Image ImageUrl="ico7.gif" Runat="Server"/>
<%#Container.DataItem("UserName")%>
</Template>
<Template Name="EditItemTemplate">
<ASP:Image ImageUrl="ico8.gif" Runat="Server"/>
<ASP:TextBox Id="txtName"
Text='<%#Container.DataItem("UserName")%>'
Runat="Server"/>
</Template>
</ASP:TemplateColumn>
<ASP:TemplateColumn>
<Template Name="HeaderTemplate">
性别
</Template>
<Template Name="ItemTemplate">
<%#Container.DataItem("UserSex")%>
</Template>
<Template Name="EditItemTemplate">
<ASP:RadioButtonList Id="rblSex" RepeatDirection="Horizontal"
SelectedIndex='<%#GetProperty("rblSex")%>'
Runat="Server">
<ASP:ListItem>男</ASP:ListItem>
<ASP:ListItem>女</ASP:ListItem>
</ASP:RadioButtonList>
</Template>
</ASP:TemplateColumn>
<ASP:TemplateColumn>
<Template Name="HeaderTemplate">
血型
</Template>
<Template Name="ItemTemplate">
<%#Container.DataItem("UserBlood")%>
</Template>
<Template Name="EditItemTemplate">
<ASP:DropDownList Id="ddlBlood" DataSource='<%#arBlood%>'
SelectedIndex='<%#GetProperty("ddlBlood")%>' Runat="Server">
</ASP:DropDownList>
</Template>
</ASP:TemplateColumn>
<ASP:TemplateColumn>
<Template Name="HeaderTemplate">
星座
</Template>
<Template Name="ItemTemplate">
<%#Container.DataItem("UserCons")%>
</Template>
<Template Name="EditItemTemplate">
<ASP:DropDownList Id="ddlCons" DataSource='<%#arCons%>'
SelectedIndex='<%#GetProperty("ddlCons")%>' Runat="Server"/>
</Template>
</ASP:TemplateColumn>
<ASP:TemplateColumn>
<Template Name="HeaderTemplate">
是否订阅电子报
</Template>
<Template Name="ItemTemplate">
<%#Container.DataItem("OrderNews")%>
</Template>
<Template Name="EditItemTemplate">
<ASP:CheckBox Id="cbOrderNews"
Checked=<%#GetProperty("cbOrderNews")%>
Runat="Server"/>
</Template>
</ASP:TemplateColumn>
</Property>
</ASP:DataGrid>
</Form>
<Script Language="VB" Runat="Server">
Dim dscA As ADODataSetCommand=New ADODataSetCommand("Select * From
Users", _
"Provider=Microsoft.Jet.OLEDB.4.0;Data
Source=C:\InetPub\wwwroot\CR\Ch08\MyWeb.Mdb")
Dim dsDataSet As DataSet=New DataSet
Dim dtDataTable As DataTable
Dim arCons() As String={"天秤座","天蝎座","水瓶座","巨蟹座","金牛座","
射手座", _
"处女座","狮子座","双子座","双鱼座","魔羯座","牡羊座"}
Dim arBlood() As String={"A","B","O","AB"}
Sub Page_Load(Sender As Object, e As EventArgs)
If Page.IsPostBack=False Then
BindGrid()
End If
End Sub
Sub BindGrid() '本程序用来执行控件和数据源间的系结
dscA.FillDataSet(dsDataSet,"Users")
dtDataTable=dsDataSet.Tables("Users")
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End Sub
Sub dgA_PageChg(Sender As Object, e As DataGridPageChangedEventArgs)
BindGrid()
End Sub
Sub dgA_ECmd(Sender As Object, e As DataGridCommandEventArgs)
dgA.EditItemIndex=e.Item.ItemIndex
BindGrid()
End Sub
Sub dgA_UCmd(Sender As Object, e As DataGridCommandEventArgs) '更新数
据源的程序
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
e.Item.ItemIndex
dscA.FillDataSet(dsDataSet,"Users")
dtDataTable=dsDataSet.Tables("Users")
Dim objControl As Object
objControl=e.Item.FindControl("txtName")
dtDataTable.Rows(shtR)("UserName")=objControl.Text
objControl=e.Item.FindControl("rblSex") '传回rblSex 的参考
dtDataTable.Rows(shtR)("UserSex")=objControl.SelectedItem.Text '将
使用者的选择更新
'至DataTable 中所
对应的字段
objControl=e.Item.FindControl("ddlBlood")
dtDataTable.Rows(shtR)("UserBlood")=objControl.SelectedItem.Text
objControl=e.Item.FindControl("ddlCons")
dtDataTable.Rows(shtR)("UserCons")=objControl.SelectedItem.Text
objControl=e.Item.FindControl("cbOrderNews")
dtDataTable.Rows(shtR)("OrderNews")=IIF(objControl.Checked,"是","否
")
dscA.Update(dsDataSet,"Users")
dgA.EditItemIndex=-1
BindGrid()
End Sub
Sub dgA_CCmd(Sender As Object, e As DataGridCommandEventArgs)
dgA.EditItemIndex=-1
BindGrid()
End Sub
'进入编辑模式时, 让编辑数据的控件显示正确值的程序
Function GetProperty(ByVal strCtlName As String)
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
dgA.EditItemIndex
If shtR>-1 Then
Dim shtI As Short
Select Case strCtlName '判断控件名称
Case "rblSex" '传回性别
Return IIf(dtDataTable.Rows(shtR)("UserSex")="男",0,1) '如果等于男
则传回0,否则传回1
Case "ddlBlood" '传回血型
For shtI=0 To 3
If dtDataTable.Rows(shtR)("UserBlood")=arBlood(shtI) Then
'判断资料表中的资
Return shtI '料在数组的索引值
Exit Function
End IF
Next
Case "ddlCons" '传回星座
Dim strCons=dtDataTable.Rows(shtR)("UserCons")
For shtI=0 To 11
If arCons(shtI)=strCons Then
Return shtI
Exit Function
End If
Next
Case "cbOrderNews" '传回是否订阅电子报
Return IIF(dtDataTable.Rows(shtR)("OrderNews")="是
","True","False")
End Select
End If
End Function
</SCRIPT>
</Html>

上述程序代码我们利用定义每个字段的EditItemTemplate，并且利用数据系结叙述取得该字段数据的正确值。例如下列宣告了性别字段的编辑样版，使用者在进入编辑模式时以RadioButtonList Web 控件来让使用者选择：

<Template Name="EditItemTemplate">
<ASP:RadioButtonList Id="rblSex" RepeatDirection="Horizontal"
SelectedIndex='<%#GetProperty("rblSex")%>'
Runat="Server">
<ASP:ListItem>男</ASP:ListItem>
<ASP:ListItem>女</ASP:ListItem>
</ASP:RadioButtonList>
</Template>

而GetProperty 程序可以检查每个控件所应该显示的状态值，只要在呼叫本程序时传入该控件的名称，这个程序就会到DataTable 中将控件的适当状态设定传回，如下程序代码片段所示：

Function GetProperty(ByVal strCtlName As String)
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
dgA.EditItemIndex
If shtR>-1 Then
Dim shtI As Short
Select Case strCtlName '判断控件名称
Case "rblSex" '传回性别
Return IIf(dtDataTable.Rows(shtR)("UserSex")="男",0,1) '如果等于
男则传回0,
'否则传回1

上述程序代码先取得记录在DataTable 中的绝对地址，再判断使用者所传入的控件名称是否为rblSex。若为rblSex 所执行的数据系结动作，则传回IIF 函式的判断结果。IIF 的使用语法如下所示：

变量=IIF(条件判断式, 成立所传回的资料, 不成立所传回的资料)

IIF 中的条件判断式的最结果若为True，则传回成立所传回的资料；若不成立则传回不成立所传回的资料。所以若目前UserSex 这个字段的值若为「男」则传回数值0，若不成立则为传回1；此时RadioButtonList Web 控件收到后即可显示数据正确的选项，其它栏控件取得正确状态的方式也是如此。

原文转自：http://www.ltesting.net

软件测试 > 测试开发技术 > 软件测试开发语言 > .net >