jquery ui 对话框以及如何停止 asp.net webforms 回发
我有以下 aspx/html 页面,它使用 jquery 显示模式表单。每次我单击 jquery 模式生成的按钮时,它都会在表单上回发。我想阻止这一切。 下面是我的脚本
< script type = "text/javascript" > $(function () {
$(".addNew").dialog({
autoOpen: false,
width: 300,
height: 300,
resizeable: false,
title: 'New Item',
modal: true,
close: function (event, ui) {
event.preventDefault();
location.reload(false);
return false;
},
buttons: {
"Add": function (evt) {
evt.preventDefault();
var name = $("#<%= txtName.ClientID %>").val();
var surname = $("#<%= txtSurname.ClientID %>").val();
var age = $("#<%= txtAge.ClientID %>").val();
if (Page_ClientValidate("Person")) {
$.ajax({
type: 'POST',
url: 'Dialog.aspx/AddNewItem',
data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d) {
$("#user").append("<li>" + name + "</li>");
}
},
error: function () {
alert("Error! Try again...");
}
});
}
},
"Cancel": function (evt) {
evt.preventDefault();
$(this).dialog("close");
return false;
}
}
});
$("#add").click(function (event) {
event.preventDefault();
$(".addNew").dialog("open");
return false;
});
});
<a href="#" id="add">Add New</a>
<form id="form1" runat="server">
<div>
UserName
<asp:TextBox ID="UserName" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please enter a username" Display="None" ControlToValidate="UserName" ></asp:RequiredFieldValidator>
</div>
<ul id="user">
</ul>
<div class="addNew" title="Add new Person">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="Person" />
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName" runat="server" /></td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter a name" Display="None" ControlToValidate="txtName" ValidationGroup="Person"></asp:RequiredFieldValidator>
</tr>
<tr>
<td>Surname</td>
<td><asp:TextBox ID="txtSurname" runat="server" /></td>
</tr>
<tr>
<td>Age</td>
<td><asp:TextBox ID="txtAge" runat="server" /></td>
</tr>
</table>
</div>
</form>
</body>
I have the following aspx/html page, it uses jquery to display a modal form. Every time I click on a jquery modal generated button it does a post back on the form. I would like to stop this.
Below is my script
< script type = "text/javascript" > $(function () {
$(".addNew").dialog({
autoOpen: false,
width: 300,
height: 300,
resizeable: false,
title: 'New Item',
modal: true,
close: function (event, ui) {
event.preventDefault();
location.reload(false);
return false;
},
buttons: {
"Add": function (evt) {
evt.preventDefault();
var name = $("#<%= txtName.ClientID %>").val();
var surname = $("#<%= txtSurname.ClientID %>").val();
var age = $("#<%= txtAge.ClientID %>").val();
if (Page_ClientValidate("Person")) {
$.ajax({
type: 'POST',
url: 'Dialog.aspx/AddNewItem',
data: '{"name":"' + name + '", "surname":"' + surname + '", "age":' + age + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d) {
$("#user").append("<li>" + name + "</li>");
}
},
error: function () {
alert("Error! Try again...");
}
});
}
},
"Cancel": function (evt) {
evt.preventDefault();
$(this).dialog("close");
return false;
}
}
});
$("#add").click(function (event) {
event.preventDefault();
$(".addNew").dialog("open");
return false;
});
});
<a href="#" id="add">Add New</a>
<form id="form1" runat="server">
<div>
UserName
<asp:TextBox ID="UserName" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please enter a username" Display="None" ControlToValidate="UserName" ></asp:RequiredFieldValidator>
</div>
<ul id="user">
</ul>
<div class="addNew" title="Add new Person">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="Person" />
<table>
<tr>
<td>Name</td>
<td><asp:TextBox ID="txtName" runat="server" /></td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter a name" Display="None" ControlToValidate="txtName" ValidationGroup="Person"></asp:RequiredFieldValidator>
</tr>
<tr>
<td>Surname</td>
<td><asp:TextBox ID="txtSurname" runat="server" /></td>
</tr>
<tr>
<td>Age</td>
<td><asp:TextBox ID="txtAge" runat="server" /></td>
</tr>
</table>
</div>
</form>
</body>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
将评论重新作为答案:
问题是您的代码在对话框的
close
处理程序内显式调用location.reload()
。除此之外,它没有做任何有用的事情,因此您可以完全删除close
处理程序。Reposing comment as answer:
The issue is that your code is explicitly calling
location.reload()
inside dialog'sclose
handler. It is not doing anything useful beyond that, so you can probably removeclose
handler entirely.