ASP.NET 2.0 數據控件組合拳：GridView 搭配 DetailsView 打造主從式資料瀏覽介面

架構概念

• GridView (主控件)：顯示清單，支援單列選取。
• DetailsView / FormView (從控件)：顯示選取列的詳細資料。

GridView 選取設定

• CommandField.ShowSelectButton="true" 顯示選取按鈕。
• ButtonType="Link" 以超連結樣式呈現。
• DataKeyNames="EmployeeID" 指定主鍵，選取時自動帶入 SelectedValue。
• SelectedRowStyle 設定高亮樣式 (如黃底)。

主從綁定關鍵：ControlParameter

<asp:SqlDataSource ID="sdsDetails" ...>
  <SelectParameters>
    <asp:ControlParameter Name="EmployeeID"
        ControlID="gvMaster" PropertyName="SelectedValue" />
  </SelectParameters>
</asp:SqlDataSource>

GridView 的 SelectedValue (來自 DataKeyNames) 自動傳遞給 DetailsView 的 SqlDataSource 參數，實現零代碼聯動。

完整頁面標記範例

<asp:DropDownList ID="ddlCity" AutoPostBack="true" DataSourceID="sdsCity" DataTextField="City" DataValueField="City" />

<asp:GridView ID="gvMaster" DataSourceID="sdsMaster" DataKeyNames="EmployeeID" AutoGenerateSelectButton="true">
  <SelectedRowStyle BackColor="Yellow" />
</asp:GridView>

<asp:DetailsView ID="dvDetail" DataSourceID="sdsDetail" AutoGenerateRows="true" />

<asp:SqlDataSource ID="sdsMaster" SelectCommand="SELECT * FROM Employees WHERE City = @City">
  <SelectParameters>
    <asp:ControlParameter ControlID="ddlCity" PropertyName="SelectedValue" Name="City" />
  </SelectParameters>
</asp:SqlDataSource>

<asp:SqlDataSource ID="sdsDetail" SelectCommand="SELECT * FROM Employees WHERE EmployeeID = @EmployeeID">
  <SelectParameters>
    <asp:ControlParameter ControlID="gvMaster" PropertyName="SelectedValue" Name="EmployeeID" />
  </SelectParameters>
</asp:SqlDataSource>

擴充性

• 參數來源不限 Control，支援 QueryString、Cookie、Session、Profile 等。
• 各控件提供豐富事件 (RowCommand, ItemUpdating 等) 供進階邏輯注入。