ASP.NET 如何在 GridView 外的 DropDownList 中绑定数据？

Question

我正在创建一个 Web 应用程序来访问 SQL Server 2008 数据库中的数据。我在 Gridview 中显示数据，并且可以成功编辑行（即使使用 DropDownLists），但我想使用 Bootstrap 通过模式对话框/弹出窗口来实现对这些记录的编辑。

但是，我无法在此模式中使用这些 DropDownList，因为它位于 <asp:GridView> 元素之外的 DIV 中。我可以使用此代码在模式对话框中绑定其他文本字段（模式对话框是通过命令触发的）[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 保存到数据库。

告诉我们

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> 上，并创建了一个<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;

    }

---

要从模式中读取值（例如将其传递给更新查询），您可以使用（在后面的代码中）：

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

    }