我在我的asp.net页面上有一个GridView,其中一列是ImageButton(ID为“imbReserve”的TemplateField)。 当单击该按钮时,我想显示PopUp,但当我将TargetControlId =“imbReserve”放置时,我收到错误消息“找不到ID为'imbReserve'的控件”。 如何实现在Grid内部单击按钮时显示PopUp?
我在我的asp.net页面上有一个GridView,其中一列是ImageButton(ID为“imbReserve”的TemplateField)。 当单击该按钮时,我想显示PopUp,但当我将TargetControlId =“imbReserve”放置时,我收到错误消息“找不到ID为'imbReserve'的控件”。 如何实现在Grid内部单击按钮时显示PopUp?
请看这两篇文章,它们帮助我解决了这个问题
文章1:更传统的方法
以下是从以上文章中引述的内容
页面代码:
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false"
Width="95%">
<Columns>
<asp:TemplateField >
<ItemTemplate>
<asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="customerid" HeaderText="ID" />
<asp:BoundField DataField="companyname" HeaderText="Company" />
<asp:BoundField DataField="contactname" HeaderText="Name" />
<asp:BoundField DataField="contacttitle" HeaderText="Title" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<ajaxToolKit:ModalPopupExtender
ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none">
<asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
[Your Content Here]
</ContentTemplate>
</asp:UpdatePanel>
<div align="right" style="width:95%">
<asp:Button
ID="btnSave" runat="server" Text="Save" />
<asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
</div>
</asp:Panel>
protected void BtnViewDetails_Click(object sender, EventArgs e)
{
// Do Anything you need to the contents of the update panel
// update the contents in the detail panel
this.updPnlCustomerDetail.Update();
// show the modal popup
this.mdlPopup.Show();
}
第二条:使用客户端Javascript
以下内容是从上述文章中转述的
客户端Javascript
<script type="text/javascript">
// keeps track of the delete button for the row
// that is going to be removed
var _source;
// keep track of the popup div
var _popup;
function showConfirm(source){
this._source = source;
this._popup = $find('mdlPopup');
// find the confirm ModalPopup and show it
this._popup.show();
}
function okClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// use the cached button as the postback source
__doPostBack(this._source.name, '');
}
function cancelClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// clear the event source
this._source = null;
this._popup = null;
}
页面代码:
<asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Item" HeaderText="Description" />
<asp:BoundField DataField="IsCompleted" HeaderText="Complete?" />
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" >
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server"
OnClientClick="showConfirm(this); return false;"
OnClick="BtnDelete_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server"
TargetControlID="div" PopupControlID="div"
OkControlID="btnOk" OnOkScript="okClick();"
CancelControlID="btnNo" OnCancelScript="cancelClick();"
BackgroundCssClass="modalBackground" />
<div id="div" runat="server" align="center" class="confirm" style="display:none">
<img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item?
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>
问题与实际 ID 在页面呈现给客户端时发生更改有关。
在浏览器中打开您的页面源代码,查看从 asp.net 生成的 ID。然后在 TargetControlID
属性中使用该 ID。
这种问题存在于 ASP.NET 中的所有模板控件中。
一种更清晰的方法是在页面加载时绑定 ModalPopupExtendr 的 TargetControlID
属性,其中可以使用动态生成的 ClientID
属性。
modalPopupExtender.TargetControlID = myTemplateControl.ClientID;