如何使用AJAX.Net Toolkit PopupExtender定位GridViewRow?

时间:2010-02-19 20:11:55

标签: asp.net javascript gridview asp.net-ajax

我有很多数据要在GridView中显示。因为每行有太多的信息,所以当用户点击该行时,我希望能够显示其他信息,所以我认为AJAX Toolkit中的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命令绑定到行的onclick事件,以便手动显示弹出窗口;虽然click事件已注册OK并且肯定已触发,但弹出窗口仍未显示。

有没有人知道如何将PopupExtender绑定到GridViewRow?

我的行绑定代码如下:

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();");
 }
}

非常感谢。

1 个答案:

答案 0 :(得分:0)

如果您不反对使用ajax ModalPopupExtender,我会使用一些javascript和一些偷偷摸摸的隐藏按钮点击来从网格视图中触发我的模态弹出窗口。我通常使我的模态弹出扩展器的目标控件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 + "');");

希望这可能有助于指明你的方向。