GridView ItemTemplate 内的 ModalPopupExtender

Question

如何使用包含 LinkBut​​ton 的 GridView TemplateField 来在单击时显示模式？我有几行数据，我想在单击该行中的“编辑”链接按钮时更新其详细信息。在模态显示之前，我需要通过代码隐藏加载大量数据。

我正在尝试以下操作，但无法在事件处理程序中执行 Modal1.Show() 因为它位于 TemplateField 中：

<ItemTemplate>
  <asp:Button runat="server" ID="HiddenForModal" style="display: none" />
    <ajaxToolkit:ModalPopupExtender ID="Modal1" runat="server" TargetControlID="HiddenForModal" PopupControlID="pnlModal" />
    <asp:LinkButton ID="btnEdit" runat="server" Text="Edit" onclick="btnEdit_Click" />
    <asp:LinkButton ID="btnDelete" runat="server" Text="Delete"></asp:LinkButton>
</ItemTemplate>

谢谢， 标记

Answer 1

关键是要知道 GridView 中的哪一行是被单击的 LinkBut​​ton。您可以通过多种方式执行此操作，但我实现它的方式是在 RowCommand 事件中捕获它。然后您可以通过 FindControl(..) 访问单击行中的 ModalPopupExtender。

页面：

<asp:TemplateField>
  <ItemTemplate>
    <asp:Button ID="Button1" runat="server" style="Display:none;" Text="Button" />
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Popup1" TargetControlID="Button1" BackgroundCssClass="modalBackground" runat="server" />
    <asp:LinkButton ID="LinkButton1" CommandName="Popup" runat="server">Popup</asp:LinkButton>
  </ItemTemplate>
</asp:TemplateField>

代码隐藏：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            LinkButton LinkButton1 = (LinkButton)e.Row.FindControl("LinkButton1");
            LinkButton1.CommandArgument = e.Row.RowIndex.ToString();
        }
    }

    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "Popup" && e.CommandArgument != null)
        {
            int rowIndex = Convert.ToInt32(e.CommandArgument);
            ModalPopupExtender modalPopupExtender1 = (ModalPopupExtender)GridView1.Rows[rowIndex].FindControl("ModalPopupExtender1");
            modalPopupExtender1.Show();

            //Perform any specific processing.
            Label1.Text = string.Format("Row # {0}", rowIndex);
        }
    }

此外，因为您在回发时打开模式，所以您实际上并不需要 ItemTemplate 中的 ModalPopupExtender （或隐藏按钮）。您可以将其移出并将其放在页面上（通过弹出 div），然后只需调用 Show() 方法即可。

页面：

<asp:TemplateField>
  <ItemTemplate>
    <asp:LinkButton ID="LinkButton1" CommandName="Popup" runat="server">Popup</asp:LinkButton>
  </ItemTemplate>
</asp:TemplateField>

代码隐藏：

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "Popup" && e.CommandArgument != null)
        {
            int rowIndex = Convert.ToInt32(e.CommandArgument);
            ModalPopupExtender1.Show();                

            //Perform any specific processing
            Label1.Text = string.Format("<Br>Row # {0}", rowIndex);
        }
    }

谢谢，祝你好运！