ASP.NET如何在GridView外部的DropDownList中綁定數據？

Question

我正在創建一個Web應用程序來訪問SQL Server 2008數據庫中的數據。 我在Gridview中顯示數據，並且可以成功編輯行（即使使用DropDownLists也可以），但是我想使用Bootstrap通過模式對話框/彈出窗口來實現對這些記錄的編輯。

但是，由於在<asp:GridView>元素外部的DIV中，我無法在此模式下使用這些DropDownLists。 我可以使用以下代碼綁定模式對話框中的其他文本字段（使用命令激發模式對話框）：[code_behind]：

if (e.CommandName.Equals("editRecord"))
{
    GridViewRow gvrow = GridView2.Rows[index];
    txtRUT.Text = HttpUtility.HtmlDecode(gvrow.Cells[2].Text);//.ToString();
    txtDIGITO.Text = HttpUtility.HtmlDecode(gvrow.Cells[3].Text);
    txtCOD_FISA.Text = HttpUtility.HtmlDecode(gvrow.Cells[4].Text);
    txtNOMBRE.Text = HttpUtility.HtmlDecode(gvrow.Cells[5].Text);
    //ddlCARGO is the DropDownList
    ddlCARGO.Text = HttpUtility.HtmlDecode(gvrow.Cells[6].Text);
    lblResult.Visible = false;

    //I know that the DropDownList ist outside the GridView, but i don't know how to access/bind data to it
    DropDownList combo_cargo = GridView2.Rows[index].FindControl("ddlCARGO") as DropDownList;

    if (combo_cargo != null)
    {
        combo_cargo.DataSource = DataAccess.GetAllCargos(); //in GridView default edit mode, this works OK
        combo_cargo.DataTextField = "cargo";
        combo_cargo.DataValueField = "idCARGO";
        combo_cargo.DataBind();
    }

    combo_cargo.SelectedValue = Convert.ToString(HttpUtility.HtmlDecode(gvrow.Cells[6].Text));

}

模態html代碼[.aspx]：

 <!-- EDIT Modal Starts here -->

  <div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                  <div class="modal-header">
                       <button type="button" class="close"
                             data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="editModalLabel">Editar Empleado</h3>
                  </div>

                  <asp:UpdatePanel ID="upEdit" runat="server">

                      <ContentTemplate>

                          <div class="modal-body">

                            <p> Nombre: <asp:TextBox ID="txtNOMBRE" runat="server" columns="40"></asp:TextBox> </p>

                            <p>RUT: <asp:TextBox ID="txtRUT" runat="server" columns="8"></asp:TextBox>&nbsp;-&nbsp;
                                        <asp:TextBox ID="txtDIGITO" runat="server" columns="1"></asp:TextBox></p>

                            <p>Código Fisa: <asp:TextBox ID="txtCOD_FISA" runat="server" columns="7"></asp:TextBox></p>

                            <%--<p>Cargo: <asp:TextBox ID="txtCARGO" runat="server" columns="7"></asp:TextBox></p>--%>

                          <p>Cargo: <asp:DropDownList ID="ddlCARGO" runat="server"></asp:DropDownList></p>

                            <%-- <p>Estado: <asp:TemplateField HeaderText="ESTADO" SortExpression="idESTADO">
                                            <EditItemTemplate>
                                                <asp:DropDownList ID="ddlESTADO" runat="server"></asp:DropDownList>
                                            </EditItemTemplate>
                                            <ItemTemplate>
                                                <asp:Label ID="lblESTADO" runat="server" Text='<%# Bind("ESTADO") %>'></asp:Label>
                                            </ItemTemplate>
                                       </asp:TemplateField> </p> --%>

                         </div>

                         <div class="modal-footer">
                              <asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
                              <asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" OnClick="btnSave_Click" />
                              <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                         </div>
                     </ContentTemplate>

                     <Triggers>
                          <asp:AsyncPostBackTrigger ControlID="GridView2" EventName="RowCommand" />
                          <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                     </Triggers>

                  </asp:UpdatePanel>

            </div>
      </div>
</div>
<!-- Edit Modal Ends here -->

Answer 1

我可以給你個主意。

使用您需要編輯的控件創建DIV /用戶控件。 在ROW上單擊-打開模型中的DIV（可以使用jq），然后將Row的內容傳遞給Model.open，或者傳遞該ROW的某些唯一ID，然后再次從DB加載Row的相應詳細信息。 並允許在此進行編輯，然后在該處進行保存-使用保留的唯一ID保存到DB。

讓我們知道

Answer 2

終於我找到了解決方案：

模態html（.aspx）：

<div class="form-group">
    <asp:TextBox ID="txtCARGO" runat="server" CssClass="hiddencol"></asp:TextBox> <%--data value field (hidden with CSS)--%>

      <label class="col-xs-3 control-label" for="editModalCargo">Cargo</label>  
      <div class="col-xs-3 input_medio">
          <asp:DropDownList id="editModalCargo" runat="server" name="editModalCargo" class="form-control input-md"/>  <%--data text field--%>
      </div>
</div>


<div class="form-group hiddencol"> <%--field with row id (hidden with CSS)--%>
    <asp:TextBox ID="txtID" runat="server" columns="2"></asp:TextBox>
</div>

我將OnRowCommand="GridView2_RowCommand"放在<asp:GridView>並使用CommandName="editRecord">創建了<asp:ButtonField> CommandName="editRecord">來編輯行。

---

（.aspx.cs）后面的代碼：

protected void GridView2_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        int index = Convert.ToInt32(e.CommandArgument);

            if (e.CommandName.Equals("editRecord"))
            {
                GridViewRow gvrow = GridView2.Rows[index];
                txtID.Text = HttpUtility.HtmlDecode(gvrow.Cells[17].Text); //Pass value from Gridview's column to <asp:TextBox ID="txtID">                 
                txtCARGO.Text = HttpUtility.HtmlDecode(gvrow.Cells[13].Text); //Pass value from Gridview's column to <asp:TextBox ID="txtCARGO">
                lblResult.Visible = false;

                BindEditCargo(txtCARGO.Text);
            }

    }


private void BindEditCargo(string cargoValue) //Populates <asp:DropDownList id="editModalCargo">
    {

        editModalCargo.DataSource = DataAccess.GetAllCargos(); 
        editModalCargo.DataTextField = "cargo";
        editModalCargo.DataValueField = "idCARGO";

        // Bind the data to the control.
        editModalCargo.DataBind();

        // Set the default selected item, if desired.
        editModalCargo.SelectedValue = cargoValue;

    }

---

DataAccess.cs：

public static DataTable GetAllCargos()
    {
        DataTable dt = new DataTable();
        string sql = @"SELECT * FROM CARGO";

        using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["BRconn"].ToString()))
        {
            conn.Open();

            SqlCommand cmd = new SqlCommand(sql, conn);
            SqlDataAdapter da = new SqlDataAdapter(cmd);

            da.Fill(dt);
        }

        return dt;

    }

---

要從模式中讀取值（例如，將其傳遞給Update查詢），可以使用（在后面的代碼中）：

protected void btnSave_Click(object sender, EventArgs e) // Handles Update Button Click Event
    {
        int idEMPLEADO = Convert.ToInt32(txtID.Text); //Read value from <asp:TextBox ID="txtID">   
        int idCARGO = Convert.ToInt32(editModalCargo.SelectedValue); //Read value from <asp:DropDownList id="editModalCargo">

        DataAccess.UpdateEmpleado(idEMPLEADO, idCARGO); //Update Query

        BindData(); //Refresh Gridview

    }