SimpleModal 和 ASP.NET MasterPage答案

【问题标题】：SimpleModal and ASP.NET MasterPageSimpleModal 和 ASP.NET MasterPage
【发布时间】：2010-08-18 23:15:40
【问题描述】：

将 SimpleModal 与 ASP.NET 和 MasterPages 集成

这是上一个帖子here 的延续。

感谢我之前收到的帮助，代码在一个页面中运行，我能够使用 SimpleModal。但是我的应用程序有 MasterPages，所以我将它粘贴到另一个测试表单中。结果与我在没有 MasterPage 的情况下运行的测试不同。如果没有 MasterPage，模式会打开并保持打开状态，直到用户关闭。使用此 MasterPage 版本，模式仅打开一秒钟，然后关闭。有人知道为什么吗？

下面是默认的示例母版页。未进行任何编辑。

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Test.master.cs" Inherits="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

这是来自网页的 jquery 调用。

注意：这包含与我上面提到的上一篇文章完全相同的 jquery 代码，只是我现在指向本地 .js 文件。

<%@ Page Title="" Language="C#" MasterPageFile="~/test.master" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        #simplemodal-overlay {background-color:#000;}
        #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div>
        Email: <input type="text" id="email" /><br />
        Message: <input type="text" id="message" /><br />
        <button id='theModal'>Show</button>
        <div id="sample" style="display:none"> 
            <h2>Sample Data</h2> 
            <p>Your email was successful!!</p> 
            <p>You can press ESC to close this dialog or click <a href="#" class="simplemodal-close">close</a>.</p> 
        </div> 
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.simplemodal.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#theModal").click(function() {
          $("#sample").modal({
            opacity: 80,
            overlayCss: { backgroundColor: "#fff" }
          });
        });
      });
    </script>
</asp:Content>

我尝试将声明移至 MasterPage。它还导致了一个闪烁的模态。不知道为什么我是一个完整的 jquery 菜鸟。

任何帮助将不胜感激。

维克多

【问题讨论】：

标签： asp.net jquery popup panel simplemodal

【解决方案1】：

我想我有一个答案。

之前的示例是一个纯 HTML 页面，其中包含一个或两个 div 和一些输入元素。

但是，将示例移至 ASPX 母版页/内容占位符方案引入了一个包装内容的表单元素。当你的页面被渲染时，你会在一个表单元素中看到你的contentplaceholder，就像这样：

<form method="post" action="test2.aspx" id="form1">
<!-- your content is contained here -->
</form>

因此，当您单击按钮以显示 simplemodal 对话框时，表单正在被提交……至少，它是使用 Chrome 提交的。我没有在 FireFox 上测试它，但是 IE8 没有重新提交表单。我假设这是因为用于打开对话框的按钮是 button 元素；这显然会导致 Chrome 中的表单提交，但不会在 IE8 中提交。（这是一个假设——我不确定。）

修复是在按钮单击事件处理程序中防止按钮单击的默认操作。这很简单 - 这是更新后的代码：

$(document).ready(function () {
    $("#theModal").click(function (e) {  //e = the element that raised the event (button)
        e.preventDefault();  //prevent the default action of the button click
        $("#sample").modal({
            opacity: 80,
            overlayCss: { backgroundColor: "#fff" }
        });
    });
});

点击处理程序的函数现在接受一个参数，该参数表示引发事件的元素（e -- 按钮）。然后我要做的第一件事是防止发生按钮单击的默认操作 (e.preventDefault();)。然后，我继续显示模态。这是诀窍！我在 Chrome 和 IE8 上对此进行了测试，都运行良好。

希望这会有所帮助。如果您对此还有其他问题，请告诉我，我会相应地更新我的答案。祝你好运！！

【讨论】：

D Hoerster，这是我第一次不在我的应用程序中使用 runat="server"。提交按钮是客户端，我认为根据您之前所说的，我将需要 WCF 服务来执行存储过程并发送电子邮件。学习曲线又来了。我正在使用生产共享服务器主机并质疑所有这些是否值得绕过 asp.net 的简单性。如果你能告诉我曲线不会太陡（由于我投入生产的时间有限），我会迈出这一步。否则退出 jquery 并以另一种方式通知。 -维克多
我不愿意为您推荐一条路径，但我会说使用带有 WCF 服务的 jQuery 并不是从传统 ASP.NET 回发的简单过渡。这是一种稍微不同的心态，至少与我在团队中看到的不同。确实没有事件模型（我喜欢），它迫使功能和演示（我也喜欢）之间更清晰地分开。至少对我来说，一旦我“得到它”，我就不想回去了。 :) 但这不是一个简单的过渡，老实说。您可能想尝试脚本服务（ASP.NET AJAX 的东西），您可以在其中拥有更多...
...您的 ASPX 或 ASMX（Web 服务）代码隐藏中的传统 Web 服务，并从您的 javascript 中调用它们。这可能是一个不那么陡峭的学习曲线。 Dave Ward (Encosia.com) 在这方面有几个很好的帖子：encosia.com/2010/03/03/… 和 encosia.com/2010/03/08/… 希望这会有所帮助。
好吧，可以这么说，我想获得一些带有 WCF 的 jquery。在我的网站上看起来真的很不错。这是您的示例：edutuit.com/corp/ContactUs.aspx（只需点击提交）恐怕 ASMX 可能已经被 WCF 弃用了。如果我要花时间学习一些东西，那还不如成为一个拥有更光明未来的人。对我来说，最好的起点是一个工作演示，你已经为 SimpleModal 提供了它，对此我非常感激。我将尝试使用带有 WCF 的 jquery。我会给自己一周的时间来成功执行存储过程。并发送电子邮件。 :) 维克多
我认为这是正确的方向。 ContactUs 页面看起来不错！如果您想要一个很好的将 jQuery 与 WCF REST 服务连接起来的演练，Rick Strahl 在详细的博客文章中做得很好。这是介绍通过 jQuery AJAX 调用 WCF 的一个（大量代码！）——west-wind.com/weblog/posts/324917.aspx。如果您有其他问题，可以在 Twitter 上关注我 -- @DavidHoerster