asp.net - 如何使用 AJAX.Net Toolkit PopupExtender 定位 GridViewRow？

Question

我有很多数据要在 GridView 中显示。因为每行有很多信息，所以我希望能够在用户单击该行时显示附加信息，因此我认为 AJAX 工具包中的 PopupExtender 将是完美的。

理想情况下，我希望每当选择行中的任何控件时都会显示弹出窗口。我已经能够成功将 PopupExtender 附加到行中的单个控件，但无法将弹出窗口附加到行本身。

我本以为在 RowDataBound 事件中将 PopupExtender 的 TargetControlId 设置为 Row 的 ClientID 会起作用，但是当我这样做时，我收到运行时错误:

TargetControlID of 'popupExtId' is not valid. 
A control with ID 'gvList_ctl02' could not be found.

我注意到 GridViewRow 已渲染，tr 元素不包含 id，因此我还尝试扩展 GridView 控件以覆盖 CreateRow 方法来渲染 id - 使用此方法我是能够渲染行的 ID(例如 gvList_ctl02)，但是当我将 PopupExtender 添加回代码中时，抛出了相同的运行时错误。

我还尝试将 showPopup() javascript 命令绑定(bind)到该行的 onclick 事件，以手动显示弹出窗口；虽然点击事件注册正常并且确实被触发，但弹出窗口仍然没有显示。

有人知道如何/是否可以将 PopupExtender 绑定(bind)到 GridViewRow 吗？

我的行绑定(bind)代码如下:

protected void gvList_RowDataBound(object sender, GridViewRowEventArgs e)
{
 if (e.Row.RowType == DataControlRowType.DataRow)
 {
  // Bind the popup extender's target ID to the row ID
  // This will cause a runtime error
  PopupControlExtender pop = e.Row.FindControl("popupExtId") as PopupControlExtender;
  pop.TargetControlID = e.Row.ClientID;

  // Also bind the client side click handler to try to get the popup to show
  // The alert is triggered and no javascript error is generated, but the popup does not display
  e.Row.Attributes.Add("onclick", "alert('Row Clicked'); $find('" + pop.BehaviorID + "').showPopup();");
 }
}

非常感谢。

Answer 1

如果您不反对使用 ajax ModalPopupExtender，我会使用一点 javascript 和一些偷偷摸摸的隐藏按钮点击来从 GridView 中触发我的模式弹出窗口。我通常将模态弹出扩展器的目标控件 ID 设置为我的隐藏按钮，然后通过 javascript 触发隐藏按钮的单击事件以显示模态弹出窗口。

这是我的模式弹出窗口和隐藏按钮标记。

   <asp:Button ID="hiddenButton" runat="server" Text="" style="display:none"></asp:Button>
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server" 
    TargetControlID="hiddenButton" PopupControlID="Panel1" CancelControlID="CancelButton"
    BackgroundCssClass="modalBackground" Drag="True"/>

这是我的 javascript，用于显示我的弹出窗口。

      function showModal(btnID) {
            btn = document.getElementById(btnID);
            btn.click();
            }

在 rowdatabound 事件中，我从按钮的 onclick 事件调用 javascript 函数 showModal。

Button myButton = (Button)e.Row.Cells[9].Controls[1];
            matchButton.Attributes.Add("onclick", "showModal('" + hiddenButton.ClientID + "');");

希望这可以帮助您指明正确的方向。