如何在ASP.NEt应用程序中使用jquery PopUpDialog中的控件
我的申请：
我有一个包含两部分的ASP.NET应用程序。第一部分是“缺席”部分，第二部分是“签名”部分。此应用程序自动创建此部件。对于缺勤，用户必须输入此缺勤的结束日期和代表。代表的TextBox有一个从Active Directory获取数据的AutoComplete。通过文本框右侧的图像，用户可以在jQuery的模态弹出窗口中搜索代表。弹出窗口有一个文本框和一个带有放大镜符号的图像按钮。现在我想要的是，如果我点击这个符号，我会得到所有在PopUpBox中的ListView中找到的代表，具有固定的宽度和高度。
我的问题是：
我的PopUp打开了，我可以在这个弹出对话框的div块中设置我的控件。我已经为我的ImageButton创建了一个事件并为此生成了代码，但是如果我点击按钮(在弹出的对话框中)，代码就不起作用了。它不会跳转到Button_click方法中:(
我的问题是：
如何在jquery和asp.net中使用弹出对话框中的控件？
下面是我的代码：
ASPX：(jquery代码)
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#dialogbox").dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: {
"OK": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#imgVertreter").click(function () {
$("#dialogbox").dialog("open");
return false;
});
});
</script>aspx：(我的popupdialogbox div代码)
<div id="dialogbox" title="Gesammte Vertreterliste">
<asp:TextBox ID="pVertreter" runat="server"></asp:TextBox>
<asp:ImageButton ID="pImageSearch" runat="server"
ImageUrl="~/App_Theme/lupe.jpg" Height="23px" Width="24px"
onclick="pImageSearch_Click" /><br />
<hr />
<asp:ListView runat="server" ID="ListView">
<LayoutTemplate>
<table id="UserTable" runat="server" border="0" width="100%" cellpadding="0" cellspacing="0">
<tr style="background-color:#ccdaeb" class="tableClass">
<th align="left" id="th4" runat="server"><asp:Label ID="lblName" runat="server" Text="Name, Vorname"></asp:Label></th>
<th align="left" id="th3" runat="server"><asp:Label ID="lblAbteilung" runat="server" Text="Abteilung"></asp:Label></th>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblFullname" Text='<%# Eval("Name") %>' runat="server"></asp:LinkButton></td>
<td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblAbteil" Text='<%# Eval("Abteilung") %>' runat="server"></asp:LinkButton></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
Es wurden keine Einträge gefunden
</EmptyDataTemplate>
<AlternatingItemTemplate>
<tr class="TableClass">
<td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblFullname" Text='<%# Eval("Name") %>' runat="server"></asp:LinkButton></td>
<td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblAbteil" Text='<%# Eval("Abteilung") %>' runat="server"></asp:LinkButton></td>
</tr>
</AlternatingItemTemplate>
</asp:ListView>
</div>我的imageButton C#代码(pImageSearch)
protected void pImageSearch_Click(object sender, ImageClickEventArgs e)
{
try
{
UserService srv = new UserService();
DataTable dt = srv.BenutzerFinden(Domain, pVertreter.Text);
DataView dv = new DataView(dt);
dv.Sort = "Nachname ASC";
this.ListView.DataSource = dv;
this.ListView.DataBind();
}
catch (Exception)
{
}
}以下是我的应用程序中的一张图片：
我的TestApplication的IE源码，可以工作了！
<div id="dialog" title="Liste">
<input name="txtBox" type="text" value="rettet" id="txtBox" />
<input type="submit" name="btnEdit" value="übergeben" id="btnEdit" />
</div>我的主应用程序的源码不工作！
<div id="dialogbox" title="Vertreterliste">
<input name="pVertreter" type="text" id="pVertreter" />
<input type="image" name="pImageSearch" id="pImageSearch" src="App_Theme/lupe.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("pImageSearch", "", true, "", "", false, false))" style="height:23px;width:24px;" /><br />
<input type="submit" name="suchen" value="suchen" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("suchen", "", true, "", "", false, false))" id="suchen" />
</div>为什么这里有一个带有dopostback的onclick？
回答 2
Stack Overflow用户
发布于 2012-09-19 15:07:06
jQuery模态是通过克隆DOM元素并将它们放在主体标记的末尾来创建的。这将创建有效的DOM元素，并且在客户端运行良好。
但是，对于要发送事件的表单控件，它们必须位于asp.net标签内(asp.net仅创建一个表单标签)。
解决方案是创建对话框，然后将元素放回form标记中。
$(document).ready(function () {
$("#dialogbox").dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: {
"OK": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialogbox").parent().appendTo($("form:first"));
$("#imgVertreter").click(function () {
$("#dialogbox").dialog("open");
$("#dialogbox").parent().appendTo($("form:first"));
return false;
});
}); 在此之后，您的服务器事件现在应该会完美地触发。
Stack Overflow用户
发布于 2016-07-06 15:03:18
像这样使用JavaScript：
(function(){
var popups = $('.js-popups');
popups.magnificPopup({
type:'inline',
midClick: true,
preloader: true,
fixedContentPos: false,
closeMarkup: '<span class="popup-close-ic mfp-close"></span>',
removalDelay: 300,
appendTo: 'form',
prependTo: 'form'
});
})();添加用于表单提交的额外prependTo: 'form'。
https://stackoverflow.com/questions/12489897
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号