jquery ui 对话框以及如何停止 asp.net webforms 回发

发布于 2024-12-23 02:28:59 字数 3370 浏览 2 评论 0原文

我有以下 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

花想c 2024-12-30 02:28:59

将评论重新作为答案:

问题是您的代码在对话框的 close 处理程序内显式调用 location.reload() 。除此之外,它没有做任何有用的事情,因此您可以完全删除 close 处理程序。

Reposing comment as answer:

The issue is that your code is explicitly calling location.reload() inside dialog's close handler. It is not doing anything useful beyond that, so you can probably remove close handler entirely.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文