SimpleModal 和 ASP.NET MasterPage

发布于 2024-09-15 03:57:10 字数 2925 浏览 8 评论 0原文

将 SimpleModal 与 ASP.NET 和 MasterPages 集成

感谢我之前收到的帮助，代码可以在单个页面中运行，并且我能够使用 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 完全是个菜鸟。

任何帮助将不胜感激。

胜利者

原文

Integrating SimpleModal with ASP.NET and MasterPages

This is a continuation of a previous thread found here.

Thanks to the help I received previously the code worked in a single page and I was able to use SimpleModal. But my application has MasterPages, so I pasted it into another test form. The results are different then the test I ran without a MasterPage. Without the MasterPage the modal opened and stayed open until closed by the user. With this MasterPage version the modal opens for only one second and then closes. Anybody know why?

Below is a default sample master page. No edits were done.

<%@ 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>

And here is the jquery call from web page.

Note: this contains exactly the same jquery code from the previous post I mentioned above except I am now pointing to local .js files.

<%@ 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>

I tried moving the declarations to the MasterPage. It also resulted in a flashing modal. Not sure why as I am a complete noob when it comes to jquery.

Any help would be greatly appreciated.

Victor

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

偏闹i 2024-09-22 03:57:10

我想我已经给你答案了。

前面的示例是一个纯 HTML 页面，其中有一个或两个 div 以及一些输入元素。

然而，将示例移动到 ASPX 母版页/内容占位符方案引入了包装内容的表单元素。当您的页面呈现时，您将在表单元素内看到 contentplaceholder ，如下所示：

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

因此，当您单击按钮以显示简单模式对话框时，表单正在提交...至少，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 上进行了测试，效果都很好。

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

I think I have an answer for you.

The previous sample was a plain HTML page that had a div or two and some input elements.

However, moving the sample to an ASPX master page / content placeholder scheme introduced a form element that wrapped the content. When your page is rendered, you'll see your contentplaceholder inside a form element, like so:

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

As a result, when you clicked the button to show the simplemodal dialog, the form was being submitted...at least, it was with Chrome. I didn't test it on FireFox, but IE8 was not re-submitting the form. I'm assuming this is because the button that's being used to open the dialog is a button element; this apparently causes a form in Chrome to submit, but not in IE8. (That's an assumption -- I don't know that for sure.)

The fix is to prevent the default action of a button click in the button click event handler. It's very simple to do - here's the updated code:

$(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" }
        });
    });
});

The click handler's function now takes an argument that represents the element that raised the event (e -- the button). The first thing I then do is to prevent the default action of the button click from happening (e.preventDefault();). Then, I continue on with displaying the modal. This does the trick! I tested this on Chrome and IE8 and both worked fine.

Hopefully this helps. Let me know if you have other questions about this and I'll update my answer accordingly. Good luck!!

回复收藏 0 原文

~没有更多了~