GridView 與 DropDownList 聯動實現數據編輯完整實戰

效果預覽

三張圖展示完整交互流程：

核心實現邏輯

1. 模板列定義

<asp:TemplateField HeaderText="所屬專業">
  <ItemTemplate>
    <%# Eval("MajorName") %>
  </ItemTemplate>
  <EditItemTemplate>
    <asp:DropDownList ID="ddlMajor" runat="server" 
      DataSourceID="dsMajors" DataTextField="Name" DataValueField="Id"
      SelectedValue='<%# Bind("MajorId") %>'>
    </asp:DropDownList>
  </EditItemTemplate>
</asp:TemplateField>

2. 數據源配置

<asp:SqlDataSource ID="dsMajors" runat="server" 
  ConnectionString="%$ ConnectionStrings:MainDB %"
  SelectCommand="SELECT Id, Name FROM Majors WHERE IsActive=1">
</asp:SqlDataSource>

3. 關鍵事件處理

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e) {
    DropDownList ddl = (DropDownList)GridView1.Rows[e.RowIndex].FindControl("ddlMajor");
    e.NewValues["MajorId"] = ddl.SelectedValue;
    e.NewValues["MajorName"] = ddl.SelectedItem.Text;
}

避坑指南

• 綁定時機：SelectedValue 必須用 Bind 而非 Eval
• 數據源隔離：下拉框數據源獨立於 GridView 主數據源
• 空值處理：在 RowDataBound 中處理 MajorId 為 NULL 的情況