強化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.kjueaiud.com

軟件測試 > 測試開發技術 > 軟件測試開發語言 > .net >