模板
教程
環境
性能
功能
管理
使用者接口的可視化
上述范例利用點選使用者姓名的方式，來呈現該使用者所購買過的東西，這樣的使用者接口還不夠美觀及直覺。接下來我們利用圖示以來表示被點選到的字段為何，并將被點選到的字段以藍底白字顯示，如下圖所示：
<%@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="SelectedItemStyle">
<ASP:TableItemStyle ForeColor="White" BackColor="Blue"
Font-Bold="True"/></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 Text="<Img Border=0 src="/Files/BeyondPic/2005-11/12/05111207270135469.gif">" HeaderText="選
擇"
ItemStyle-HorizontalAlign="Center"/>
<ASP:BoundColumn DataField="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
DgA.SelectedIndex=-1
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
Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
If e.Item.ItemIndex>-1 Then
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
e.Item.ItemIndex
dgA.SelectedIndex=e.Item.ItemIndex
Dim dgiA As DataGridItem=dgA.SelectedItem
Dim celSel As TableCell = dgiA.Controls(0)
celSel.Text="<Img Border=0 src="/Files/BeyondPic/2005-11/12/05111207270112835.gif">"
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 & "
筆記錄"
Else
DgA.SelectedIndex=-1
End If
End Sub
</SCRIPT>
</html>
上述程序代碼中，我們定義了SelectedItemStyle 屬性，并設定其前景色為白色、背景色為藍色，以及字型為粗體；如下程序代碼范例所示：
<Property Name="SelectedItemStyle">
<ASP:TableItemStyle ForeColor="White" BackColor="Blue"
Font-Bold="True"/></Property>
然后我們增加一個ButtonColumn 字段，并設定其Text 屬性為「"<Img Border=0src="/Files/BeyondPic/2005-11/12/05111207270135469.gif">"」，這樣的結果會讓字段顯示圖釘的影像，如下程序代碼片段所示：
<Property Name="Columns">
<ASP:ButtonColumn Text="<Img Border=0 src="/Files/BeyondPic/2005-11/12/05111207270135469.gif">" HeaderText="選
擇"
ItemStyle-HorizontalAlign="Center"/>
<ASP:BoundColumn DataField="UserName" HeaderText="姓名"/>
<ASP:BoundColumn DataField="UserTel" HeaderText="電話"/>
<ASP:BoundColumn DataField="UserAdd" HeaderText="住址"/>
<ASP:BoundColumn DataField="UserEmail" HeaderText="電郵"/>
</Property>
接下來就要處理使用者點選圖形的動作了。我們設定OnItemCommand 屬性為dgA_ICmd，所以當使用者點選圖形時便執行下列程序：
Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
If e.Item.ItemIndex>-1 Then
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
e.Item.ItemIndex
dgA.SelectedIndex=e.Item.ItemIndex
Dim dgiA As DataGridItem=dgA.SelectedItem
Dim celSel As TableCell = dgiA.Controls(0)
celSel.Text="<Img Border=0 src="/Files/BeyondPic/2005-11/12/05111207270112835.gif">"
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
上述程序代碼先判斷觸發這個事件時，使用者是否有點選一個項目；倘若點選了任何一個項目，就將dgA 這個DataGrid Web 控件的SelectedIndex 屬性設為被點選的項目；接下來的三行程序將圖釘改成釘住的影像：
Dim dgiA As DataGridItem=dgA.SelectedItem
Dim celSel As TableCell = dgiA.Controls(0)
celSel.Text="<Img Border=0 src="/Files/BeyondPic/2005-11/12/05111207270112835.gif">"
