模态jQuery弹出和回发 [英] modal jQuery pop-up and postback
本文介绍了模态jQuery弹出和回发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨专家，
我有一个从c＃代码打开的Modal jQuery弹出窗口。我的弹出窗口有一个updatePanel，当点击asp：Button或勾选一个复选框时，我遇到了回发问题，但我通过将对话框移回表单解决了这个问题。
现在我添加了一个FileUpload控件到updatePanel。一旦我选中复选框或单击按钮，控件就会丢失文件，所以我不得不在updatePanel中添加一个触发器。但是通过触发器，弹出窗口在按钮点击时再次关闭。
这是我用于模态弹出窗口的javaScript：
<！ - 弹出式javascript和链接 - >
< link rel = stylesheet href = // code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css\"/>
< script src = // code.jquery.com/jquery-1.10.2.js >< /脚本>
< script src = // code.jquery.com/ui/1.11.4/jquery- ui.js>< /脚本>
< script type = text / javascript>
function showmodalpopup（）{
var dlg = jQuery（ ＃popupdiv）。dialog（{
title： 编辑IC数据，
宽度： 1000 ，
height ： 500 ，
modal： true
// 按钮：{
// 关闭：function（）{
// $（this）。对话框（'关闭'）;
// }
// }
}）;
dlg.parent（）。appendTo（jQuery（ form：first））; // 在表单中包含模态弹出内容以获取其值并防止在回发时关闭
};
< / script>
这是我如何从代码后面打开它（从ListView ItemCommand调用它）：
< pre lang =c＃> if （e.CommandName == editRow）
{
ScriptManager.RegisterStartupScript（ this ，GetType（）， Show Modal Popup， showmodalpopup（）;， true ）; // 显示带有所需信息的iQuery弹出窗口。
}
我的弹出式div：
< div id = popupdiv title = 基本模态对话框 样式 = display：none >
< div class = span12 style = text-align：left; margin-removed0px; >
< 表 class = table table-hover table-striped table-condensed style = margin-removed 0px; >
< span class =code-keyword>< tr style = background-color：＃10466E; >
< th > 功能< / th >
< th > 颜色< / th >
< th > 极性< / th >
< th > 位置 < / th >
< th > 文件 < / th >
< th > 备注 < / th >
< / tr >
< tr >
< td > < asp：TextBox runat = server ID = txtFunction 已启用 = false > < / asp：TextBox > < / td >
< td > < asp：TextBox runat = server ID < span class =code-keyword> = txtColor > < / asp：TextBox > < / td >
< span class =code-keyword>< td > < asp：TextBox runat = server ID = txtPolarity > < / asp：TextBox > < / td >
< td > < textarea runat = server id = < span class =code-keyword> txtLocation > < / textarea > < / td >
< td >
< asp：FileUpload runat = server ID = picFile / > < br / >
< asp：RegularExpressionValidator ID = fileValid runat = server ControlToValidate = picFile ErrorMessage = 仅限.png或.jpg ValidationExpression = ^（（[A-ZA-Z] :) |（\\ {2} \w +）\ $）（\\（\w [\w]。 *））（。jpg | .jpeg | .png）$ 显示 = 动态 ForeColor = 红色 > < / asp：RegularExpressionValidator >
< / td >
< td > < textarea runat = server id = < span class =code-keyword> txtNotes > < / textarea > < / td >
< / tr >
< / table >
< div class = span6 style = < span class =code-keyword> text-align：left; >
<！ - updatePanel以防止关闭回发 - - >
< asp：UpdatePanel runat = server ID = updatePanel1 >
<！ - 触发在回发时保留FileUpload文件 - >
< 触发器 >
< asp：PostBackTrigger < span class =code-attr ibute> ControlID = btnUpdate / >
< ; /触发器 >
< ContentTemplate >
< asp：CheckBoxList runat = server ID = chkVehicles DataTextField = 车辆 DataValueField = Id AutoPostBack = true OnSelectedIndexChanged = chkVehicles_SelectedIndexChanged >
< / asp：CheckBoxList >
< asp：按钮 runat = server ID = < span class =code-keyword> btnUpdate 文本 = 更新 CssClass = con-tbutton OnClick = btnUpdate_Click UseSubmitBehavior = false / > < br / >
< span class =code-keyword>< asp：Label runat = server ID = lbl_Result > < / asp：Label > < br / > ; < asp：标签 runat = server < span class =code-attribute> ID = lbl_UpdateMessage > < / asp：标签 >
< / ContentTemplate >
< / asp：UpdatePanel >
< / div >
< / div >
< / div < span class =code-keyword>>
一切都很好，除了模态弹出窗口一旦我点击更新按钮就关闭。
请提前告知
提前感谢
解决方案
（this）.dialog（'close'）;
// }
// }
}）;
dlg.parent（）。appendTo（jQuery（ form：first））; // 在表单中包含模态弹出内容以获取其值并防止在回发时关闭
};
< / script>
这是我如何从代码后面打开它（从ListView ItemCommand调用它）：
< pre lang =c＃> if （e.CommandName == editRow）
{
ScriptManager.RegisterStartupScript（ this ，GetType（）， Show Modal Popup， showmodalpopup（）;， true ）; // 显示带有所需信息的iQuery弹出窗口。
}
我的弹出式div：
< div id = popupdiv title = 基本模态对话框 样式 = display：none >
< div class = span12 style = text-align：left; margin-removed0px; >
< 表 class = table table-hover table-striped table-condensed style = margin-removed 0px; >
< span class =code-keyword>< tr style = background-color：＃10466E; >
< th > 功能< / th >
< th > 颜色< / th >
< th > 极性< / th >
< th > 位置 < / th >
< th > 文件 < / th >
< th > 备注 < / th >
< / tr >
< tr >
< td > < asp：TextBox runat = server ID = txtFunction 已启用 = false > < / asp：TextBox > < / td >
< td > < asp：TextBox runat = server ID < span class =code-keyword> = txtColor > < / asp：TextBox > < / td >
< span class =code-keyword>< td > < asp：TextBox runat = server ID = txtPolarity > < / asp：TextBox > < / td >
< td > < textarea runat = server id = < span class =code-keyword> txtLocation > < / textarea > < / td >
< td>
<asp:FileUpload runat=\"server\" ID=\"picFile\" /><br />
<asp:RegularExpressionValidator ID=\"fileValid\" runat=\"server\" ControlToValidate=\"picFile\" ErrorMessage=\"Only .png or .jpg\" ValidationExpression=\"^(([a-zA-Z]:)|(\\{2}\w+)\
?)(\\(\w[\w].*))(.jpg|.jpeg|.png)
\" Display=\"Dynamic\" ForeColor=\"Red\">< /asp:RegularExpressionValidator>
</td>
<td><textarea runat=\"server\" id=\"txtNotes\"></textarea></td>
</tr>
</table>
<div class=\"span6\" style=\"text-align:left;\">
\t<!-- updatePanel to prevent closing on postback--> \t\t\t\t\t
<asp:UpdatePanel runat=\"server\" ID=\"updatePanel1\">
\t\t\t\t<!-- trigger to retain FileUpload file when postback-->
<Triggers>
<asp:PostBackTrigger< span class=\"code-attribute\"> ControlID=\"btnUpdate\" />
</Triggers>
<ContentTemplate>
<asp:CheckBoxList runat=\"server\" ID=\"chkVehicles\" DataTextField=\"Vehicle\" DataValueField=\"Id\" AutoPostBack=\"true\" OnSelectedIndexChanged=\"chkVehicles_SelectedIndexChanged\">
</asp:CheckBoxList>
<asp:Button runat=\"server\" ID=\"btnUpdate\" Text=\"Update\" CssClass=\"con-tbutton\" OnClick=\"btnUpdate_Click\" UseSubmitBehavior=\"false\" /><br />
<asp:Label runat=\"server\" ID=\"lbl_Result\"></asp:Label><br /><asp:Label runat=\"server\" ID=\"lbl_UpdateMessage\"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
< /div>
</div>
</div>
Everything works very well, except that the modal pop-up closes once I click the update Button.
Please advise
thanks in advance
Hi Experts,
I have a Modal jQuery pop-up opens from c# code. My pop-up has an updatePanel, I had a problem with postback when clicking asp:Button or check a checkbox, but i solved it by moving the dialogue back into the form.
Now I have added a FileUpload control to the updatePanel. and the control loses its file once i check checkbox or clicking the button, so I had to add a trigger to my updatePanel. But with the trigger the pop-up returned to close again on button click.
Here is my javaScript for the modal Pop-up:
<!-- popup javascript and links -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function showmodalpopup() {
var dlg = jQuery("#popupdiv").dialog({
title: "Edit IC data",
width: 1000,
height: 500,
modal: true
//buttons: {
// Close: function () {
// $(this).dialog('close');
// }
//}
});
dlg.parent().appendTo(jQuery("form:first")); //to include modal popup contents in the form to get their values and prevent closing on postback
};
</script>
Here is how I open it from code behind (calling it from ListView ItemCommand):
if (e.CommandName == "editRow")
{
ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal Popup", "showmodalpopup();", true); //to show the iQuery popup with the required info.
}
My pop-up div:
<div id="popupdiv" title="Basic modal dialog" style="display: none">
<div class="span12" style="text-align:left;margin-removed0px;">
<table class="table table-hover table-striped table-condensed" style="margin-removed 0px;">
<tr style="background-color: #10466E;">
<th>Function</th>
<th>Color</th>
<th>Polarity</th>
<th>Location</th>
<th>Files</th>
<th>Notes</th>
</tr>
<tr>
<td><asp:TextBox runat="server" ID="txtFunction" Enabled="false"></asp:TextBox></td>
<td><asp:TextBox runat="server" ID="txtColor"></asp:TextBox></td>
<td><asp:TextBox runat="server" ID="txtPolarity"></asp:TextBox></td>
<td><textarea runat="server" id="txtLocation"></textarea></td>
<td>
<asp:FileUpload runat="server" ID="picFile" /><br />
<asp:RegularExpressionValidator ID="fileValid" runat="server" ControlToValidate="picFile" ErrorMessage="Only .png or .jpg" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.jpeg|.png)$" Display="Dynamic" ForeColor="Red"></asp:RegularExpressionValidator>
</td>
<td><textarea runat="server" id="txtNotes"></textarea></td>
</tr>
</table>
<div class="span6" style="text-align:left;">
<!-- updatePanel to prevent closing on postback -->
<asp:UpdatePanel runat="server" ID="updatePanel1">
<!-- trigger to retain FileUpload file when postback-->
<Triggers>
<asp:PostBackTrigger ControlID="btnUpdate" />
</Triggers>
<ContentTemplate>
<asp:CheckBoxList runat="server" ID="chkVehicles" DataTextField="Vehicle" DataValueField="Id" AutoPostBack="true" OnSelectedIndexChanged="chkVehicles_SelectedIndexChanged">
</asp:CheckBoxList>
<asp:Button runat="server" ID="btnUpdate" Text="Update" CssClass="con-tbutton" OnClick="btnUpdate_Click" UseSubmitBehavior="false" /><br />
<asp:Label runat="server" ID="lbl_Result"></asp:Label><br /><asp:Label runat="server" ID="lbl_UpdateMessage"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
Everything works very well, except that the modal pop-up closes once I click the update Button.
Please advise
thanks in advance
解决方案
(this).dialog('close'); // } //} }); dlg.parent().appendTo(jQuery("form:first")); //to include modal popup contents in the form to get their values and prevent closing on postback }; </script>
Here is how I open it from code behind (calling it from ListView ItemCommand):
if (e.CommandName == "editRow") { ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal Popup", "showmodalpopup();", true); //to show the iQuery popup with the required info. }
My pop-up div:
<div id="popupdiv" title="Basic modal dialog" style="display: none"> <div class="span12" style="text-align:left;margin-removed0px;"> <table class="table table-hover table-striped table-condensed" style="margin-removed 0px;"> <tr style="background-color: #10466E;"> <th>Function</th> <th>Color</th> <th>Polarity</th> <th>Location</th> <th>Files</th> <th>Notes</th> </tr> <tr> <td><asp:TextBox runat="server" ID="txtFunction" Enabled="false"></asp:TextBox></td> <td><asp:TextBox runat="server" ID="txtColor"></asp:TextBox></td> <td><asp:TextBox runat="server" ID="txtPolarity"></asp:TextBox></td> <td><textarea runat="server" id="txtLocation"></textarea></td> <td> <asp:FileUpload runat="server" ID="picFile" /><br /> <asp:RegularExpressionValidator ID="fileValid" runat="server" ControlToValidate="picFile" ErrorMessage="Only .png or .jpg" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\
?)(\\(\w[\w].*))(.jpg|.jpeg|.png)
" Display="Dynamic" ForeColor="Red"></asp:RegularExpressionValidator> </td> <td><textarea runat="server" id="txtNotes"></textarea></td> </tr> </table> <div class="span6" style="text-align:left;"> <!-- updatePanel to prevent closing on postback --> <asp:UpdatePanel runat="server" ID="updatePanel1"> <!-- trigger to retain FileUpload file when postback--> <Triggers> <asp:PostBackTrigger ControlID="btnUpdate" /> </Triggers> <ContentTemplate> <asp:CheckBoxList runat="server" ID="chkVehicles" DataTextField="Vehicle" DataValueField="Id" AutoPostBack="true" OnSelectedIndexChanged="chkVehicles_SelectedIndexChanged"> </asp:CheckBoxList> <asp:Button runat="server" ID="btnUpdate" Text="Update" CssClass="con-tbutton" OnClick="btnUpdate_Click" UseSubmitBehavior="false" /><br /> <asp:Label runat="server" ID="lbl_Result"></asp:Label><br /><asp:Label runat="server" ID="lbl_UpdateMessage"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </div> </div> </div>
Everything works very well, except that the modal pop-up closes once I click the update Button.
Please advise
thanks in advance
这篇关于模态jQuery弹出和回发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
