Question

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

但是，我不能在这个模式中使用这些DropDownLists，因为它位于<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 the Row相应的详细信息加载。并允许在那里进行编辑，然后保存在那里 - 保存到DB并保留该唯一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;

    }

要从modal中读取值（例如，将其传递给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

    }

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

2 个答案: