使用下拉列表编辑 Gridview 行变得太宽 - 我该如何使用弹出面板？

Question

我在选项卡面板中有一系列 GridView - 数据绑定到通用业务对象列表。

Gridview中的列都类似如下：

<asp:TemplateField HeaderText="Company" SortExpression="Company.ShortName">
    <ItemTemplate>
        <asp:Label ID="lblCompany" runat="server" Text='<%# Bind("Company.ShortName") %>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:DropDownList ID="ddlCompany" runat="server"></asp:DropDownList>
    </EditItemTemplate>
</asp:TemplateField>

GridView 在行首生成“编辑”链接，所有事件都可以触发。问题是数据越来越长。当处于“显示模式”时，这很好，因为 GridView 控件足够智能，可以将一些文本分成多行（特别是 Project、Title 和 Worker 名称可能会变得很长）。

问题出在编辑模式。下拉列表不要将条目分成多行（出于显而易见的原因）。在 Gridview 的一行中进入 Edit ode 可以使 Griview 水平扩展为屏幕大小的两倍（突破母版页和 CSS 中的宽度限制，但这只是一个相关问题）。

我需要的是 ModalPopup 之类的东西 - 但尝试将其绑定到 EditItemTemplate 中的 ID 会在页面呈现时出现错误（因为当时不存在“ddlXXXX”）。此外，我不知道如何动态填充面板以便我可以从中获得响应（例如他们选择的公司 ID）。

我也在尝试避免使用 javascript，并希望这是一个“纯”aspx/代码隐藏解决方案（为了简单起见）。

我找到的所有示例都是带有预定义面板的模态弹出窗口。即使它（弹出面板）类似于复选框列表，它也可以数据绑定到我已经准备好使用的 SortedList 和一个确定/取消按钮组合来接受或忽略事物。我只是不确定去哪里。

我愿意接受建议。提前致谢。

编辑：最终解决方案如下：

<asp:TemplateField HeaderText="Company" SortExpression="Company.ShortName">
    <ItemTemplate>
        <asp:Label ID="lblCompany" runat="server" Text='<%# Bind("Company.ShortName") %>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:LinkButton ID="lnkCompany" runat="server" Text='<%# Bind("Company.ShortName") %>'></asp:LinkButton>
        <asp:Panel ID="pnlCompany" runat="server" style="display:none">
            <div> 
                <asp:DropDownList ID="ddlCompany" runat="server" ></asp:DropDownList>
                <br/> 
                <asp:ImageButton ID="btnOKCo" runat="server" ImageUrl="~/Images/greencheck.gif" OnCommand="PopupButton_Command" CommandName="SelectCO" /> 
                <asp:ImageButton ID="btnCxlCo" runat="server" ImageUrl="~/Images/RedX.gif" /> 
            </div> 
        </asp:Panel>
        <cc1:ModalPopupExtender ID="mpeCompany" runat="server" 
                TargetControlID="lnkCompany" PopupControlID="pnlCompany" 
                BackgroundCssClass="modalBackground" CancelControlID="btnCxlCo" 
                DropShadow="true" PopupDragHandleControlID="pnlCompany" />
    </EditItemTemplate>
</asp:TemplateField>

在代码隐藏中，lstIDLabor 是绑定到 GridView 的通用数据行列表（其中 Company 是属性之一，也是业务对象）：

Sub PopupButton_Command(ByVal sender As Object, ByVal e As CommandEventArgs)
    Dim intRow As Integer
    Dim intVal As Integer
    RestoreFromSessionVariables()
    Select Case e.CommandName
        Case "SelectCO"
            intRow = grdIDCostLabor.EditIndex
            Dim ddlCo As DropDownList = CType(grdIDCost.Rows(intRow).FindControl("ddlCompany"), DropDownList)
            intVal = ddlCo.SelectedValue
            lstIDLabor(intRow).CompanyID = intVal
            lstIDLabor(intRow).Company = Company.Read(intVal)
        Case Else
            '
    End Select
    MakeSessionVariables()
    BindGrids()
End Sub

Answer 1

这个怎么样？

<asp:TemplateField HeaderText="Company" SortExpression="Company.ShortName">
<ItemTemplate>
    <asp:Label ID="lblCompany" runat="server" Text='<%# Bind("Company.ShortName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
    <asp:LinkButton ID="EditBtn" runat="server" Text='<%# Eval("Company.ShortName") %>' />
      <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
        <div>
          <asp:DropDownList ID="ddlCompany" runat="server"  SelectedValue='<%# Bind("Company.ID")></asp:DropDownList><br/>
          <asp:ImageButton ID="OkButton" runat="server" ImageUrl="~/Images/OkBtn.png"  />
          <asp:ImageButton ID="CancelButton" runat="server" ImageUrl="~/Images/Cancel.png" />

          </div>
        </div>
      </asp:Panel>
      <act:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="EditBtn"
        PopupControlID="Panel1" BackgroundCssClass="modalBackground" CancelControlID="CancelButton"
        DropShadow="true" PopupDragHandleControlID="Panel1" />
</EditItemTemplate>

因此，当您编辑时，您会将公司视为一个链接按钮，当您单击时，您会看到带有已绑定到公司 ID 的下拉列表的弹出窗口