选择 jquery 对话框时如何停止 asp.net 页面重新加载？答案

【问题标题】：How to stop asp.net page reload when selecting a jquery dialog?选择 jquery 对话框时如何停止 asp.net 页面重新加载？
【发布时间】：2014-04-01 13:20:50
【问题描述】：

我使用 jquery ui 对话框来显示各种形式，如客户、产品等。它是通过在另一个 div 内的 iframe 内显示 aspx 页面并将此 div 显示为对话框来完成的。下面这个结构是动态创建的。

<div id="Div1" runat="server" class="menu">
    <ul>
        <li>
            <a id="customer"></a>
                <div>
                    <iframe id="frame_customer"></iframe>
                </div>
         </li>
        <li>
            <a id="product"> </a>

                <div>
                    <iframe id="frame_product"></iframe>
                </div>
         </li>

    </ul>
</div>

将其显示为弹出窗口的jquery如下：

<script>
    jQuery(function ($) {
        $("a").each(function () {
            $.data(this, 'dialog',
              $(this).next("div").dialog({
                  resizable: false,
                  autoOpen: false,
                  modal: false,
                  title: this.id,
                  width: 900,
                  height: 590,
                  position: ['middle', 150],
                  draggable: true,
                  open: function (event, ui) {
                      $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
                  },

                  buttons: {
                      "Exit": function () {
                          $(this).dialog("close");
                      }
                  },
              })
            );
        }).click(function (event) {
            $.data(this, 'dialog').dialog('open');
            event.preventDefault();
            document.getElementById('frame_' + this.id).src = this.id + '.aspx';
            return false;
        });
    });

    $(document).ready(function () {
        $("iframe").attr("scrolling", "no");
        $("iframe").attr("frameborder", "0");
    });

</script>

现在，我的问题是，每当我通过单击选择另一个对话框时，之前的表单都会刷新，并且我会丢失该表单上的所有更改和选择。那么如何在表单之间切换时停止回发呢？

呈现的 HTML 如下：

<!DOCTYPE html>
<html>
<head>
    <title>
        DiaryGold
    </title>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <link href="Scripts/themes/jquery-ui.css" rel="stylesheet" />
    <link href="Scripts/themes/jquery-ui.min.css" rel="stylesheet" />
    <link href="Scripts/themes/jquery.ui.theme.css" rel="stylesheet" />
    <link href="Scripts/Site.css" rel="stylesheet" />
    <link rel="stylesheet" href="Scripts/style.css" type="text/css" />

    <style>
        body {
            background-image: url('images/AppBG.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #0b0535;
            min-height: 100%;
            width: 99%;
        }

        html {
            height: 100%;
        }


        .header {
            position: relative;
            margin: 0px;
            padding: 0px;
            color: #d8e8ff;
            width: 100%;
        }

            .header h1 {
                margin: 0px;
                padding: 0px 0px 0px 0px;
                color: #BF0413;
                border: none;
                line-height: 42px;
                font-size: 42px;
                display: inline;
            }

        .main {
            padding: 0px 12px;
            margin: 12px 8px 8px 8px;
            min-height: 800px;
        }

        .framestyle {
            width: 100%;
            height: 100%;
            background-color: #d8e8ff;
        }


        #header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }


        .center {
            display: table;
            margin: 0 auto;
            position: relative;
            width: 100%;
            z-index: 10;
        }

        .menu {
            position: relative;
            float: left;
            width: 100%;
            width: 100%;
            height: 32px;
            background-color: #383838;
        }

        div {
            opacity: 0.95;
        }

        .ui-widget-content {
            border: 1px solid darkgray;
            background: none;
            color: #2c4359;
        }

        .ui-front {
            z-index: 1 !important;
        }
    </style>


    <script>


        jQuery(function ($) {
            $("a").each(function () {
                $.data(this, 'dialog',
                  $(this).next("div").dialog({
                      resizable: false,
                      autoOpen: false,
                      modal: false,
                      title: this.id,
                      width: 900,
                      height: 590,

                      position: ['middle', 150],
                      draggable: true,
                      open: function (event, ui) {
                          $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
                      },

                      buttons: {
                          "Exit": function () {
                              $(this).dialog("close");
                          }
                      }
                  })

                );

            }).click(function (event) {
                if (this.id != '#') {
                    $.data(this, 'dialog').dialog('open');
                    document.getElementById('frame_' + this.id).src = this.id + '.aspx';
                    return false;
                }
            });
        });

        $(document).ready(function () {
            $("iframe").attr("scrolling", "no");
            $("iframe").attr("frameborder", "0");
        });

    </script>

</head>

<body>

    <div class="center">

        <div id="menu1" class="menu">
            <ul id="nav">
                <li>
                    <a id="#">Log Samples</a>
                    <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                    <ul>
                        <li>
                            <a id="#">Commercial</a>
                            <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                            <ul>
                                <li>
                                    <a id="LogSamples">Log Samples</a>
                                    <div id="LogSamples"><iframe class="framestyle" id="frame_LogSamples"></iframe> </div>
                                </li>
                                <li>
                                    <a id="Customers">Customers</a>
                                    <div id="Customers"><iframe class="framestyle" id="frame_Customers"></iframe> </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                <li>
                    <a id="#">Admin</a>
                    <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                    <ul>
                        <li>
                            <a id="LabUsers">Lab Users</a>
                            <div id="LabUsers"><iframe class="framestyle" id="frame_LabUsers"></iframe> </div>
                        </li>
                        <li>
                            <a id="LabRoles">Lab Roles</a>
                            <div id="LabRoles"><iframe class="framestyle" id="frame_LabRoles"></iframe> </div>
                        </li>
                        <li>
                            <a id="ScreenForRoles">ScreenForRoles</a>
                            <div id="ScreenForRoles"><iframe class="framestyle" id="frame_ScreenForRoles"></iframe> </div>
                        </li>
                    </ul>
            </ul>
        </div>

    </div>

    <div id="header">
        <div style="width: 100%;">
            <div class="MainTitle" style="position: relative; float: right;">
                <img src="images/diarygold-logo.gif" height="65" />
            </div>
            <div class="MainTitle" style="position: relative; float: left; vertical-align: central; line-height: 80px; margin-top: 25px;">

                <img alt="" class="auto-style1" src="images/LIMSLogo.png" height="40" />

            </div>
        </div>
    </div>


</body>
</html>

【问题讨论】：

您可能正在调用Page_Load 上的任何方法来清除数据。检查Page_Load 一次。
我看到您同时使用 event.preventDefault() 并返回 false。两者都做同样的事情，所以有点矫枉过正。
退出按钮是表单内的asp元素吗？如果是，那么它们将导致回发，您可以通过将它们替换为 html 元素来避免这种情况。如果这不起作用，那么如果您愿意，请向我们展示在 iframe 中打开的 asp 页面中的代码。你的问题可能就在那里。
您的意思是要打开多个客户对话？
@MikeSmithDev 是的，我希望用户同时打开多个对话框...

标签： c# javascript jquery html asp.net

【解决方案1】：

在research 之后，这似乎是 jQuery UI 库上的一个错误。

请注意此first demo 中的版本是 1.10.X（右上方窗格中的<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js"></script>）并导致您遇到相同的行为（它不会加载 iframe，但您会看到效果在浏览器加载图标上）。

然而，在这个 second demo 上，它使用的是 1.8.X 版本（小提琴的版本）并且它不会导致刷新。

如果您使用的是最新版本，请尝试降级到 1.8.X 版本，看看能否解决问题。如果是这样，请向 jQuery 上的人打开一个 jQuery UI 票错误。

【讨论】：

非常感谢...这是 1.9.1 中的一个错误。我更改为 1.8.3 并且运行良好。我一直在研究这个问题好几个星期，终于解决了......我非常感谢你。

【解决方案2】：

您的iframe 位于a 中。这将导致a 的点击事件触发。为了解决这个问题，我建议将iframe 放在a 之外。

如果你不能，一个简单的添加到你的 JS 中就可以了...

$("a").each(function () {
    $.data(this, 'dialog',
      $(this).next("div").dialog({
          resizable: false,
          autoOpen: false,
          modal: false,
          title: this.id,
          width: 900,
          height: 590,
          position: ['middle', 150],
          draggable: true,
          open: function (event, ui) {
              $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
          },

          buttons: {
              "Exit": function () {
                  $(this).dialog("close");
              }
          },
       })
    );

    // stop the click event from moving up the chain
    $('#frame_' + this.id).click(function(event) {
        event.stopImmediatePropagation();
    });

}).click(function (event) {
    $.data(this, 'dialog').dialog('open');
    event.preventDefault();
    document.getElementById('frame_' + this.id).src = this.id + '.aspx';
});

【讨论】：

实际上，框架在a标签之外，我在我的问题中写错了......我尝试了第二个选项，但没有工作......

【解决方案3】：

您的方法存在很多问题。考虑只使用 div 而不是 iframe。您可以使用 jQuery 的加载命令加载 div： $(this).next("div").load(this.id+".aspx");

当然，您需要将 customer.aspx 和 product.aspx 页面缩减为表单及其内容。

这里是一些示例代码：

$(this).next("div").load(this.id+".aspx", function() {
   // this is now the div
   $('form',this).submit(function(e) {
       // validate here (this is the form)
       e.preventDefault();
       $.ajax($(this).attr("action"),$(this).serialize());
       // close the dialog here
   });
});

【讨论】：