SimpleModal 和 ASP.NET MasterPage [英] SimpleModal and ASP.NET MasterPage
问题描述
将 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 过渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="服务器"><标题></标题><asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder></头><身体><form id="form1" runat="server"><asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder></div></表格></身体></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 {背景颜色:#000;}#simplemodal-container {背景颜色:#333;边框:8px 实心 #444;填充:12px；}</风格></asp:内容><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">电子邮件:<input type="text" id="email"/><br/>消息:<input type="text" id="message"/><br/><button id='theModal'>显示</button><div id="sample" style="display:none"><h2>样本数据</h2><p>你的邮件发送成功了！！</p><p>您可以按 ESC 关闭此对话框或单击 <a href="#" class="simplemodal-close">关闭</a>.</p></div></div><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.simplemodal.js"></script><脚本类型="文本/javascript">$(文档).ready(函数() {$("#theModal").click(function() {$("#sample").modal({不透明度:80，overlayCss:{背景颜色:#fff"}});});});</脚本></asp:内容>我尝试将声明移至 MasterPage.它还导致了一个闪烁的模态.不知道为什么我是一个完整的 jquery 菜鸟.
任何帮助将不胜感激.
维克多
解决方案 我想我有一个答案.
之前的示例是一个纯 HTML 页面，其中包含一个或两个 div 和一些输入元素.
但是，将示例移至 ASPX 母版页/内容占位符方案引入了一个包装内容的表单元素.当你的页面被渲染时，你会在一个表单元素中看到你的 contentplaceholder，像这样:
因此，当您单击按钮以显示 simplemodal 对话框时，表单正在被提交……至少，它是使用 Chrome 提交的.我没有在 FireFox 上测试它，但是 IE8 没有重新提交表单.我假设这是因为用于打开对话框的按钮是 button 元素；这显然会导致 Chrome 中的表单提交，但不会在 IE8 中提交.(这是一个假设——我不确定.)
修复是在按钮单击事件处理程序中防止按钮单击的默认操作.这很简单 - 这是更新后的代码:
$(document).ready(function () {$("#theModal").click(function (e) {//e = 引发事件的元素(按钮)e.preventDefault();//防止按钮点击的默认动作$("#sample").modal({不透明度:80，overlayCss:{背景颜色:#fff"}});});});
单击处理程序的函数现在接受一个参数，该参数表示引发事件的元素(e -- 按钮).然后我要做的第一件事是防止发生按钮单击的默认操作(e.preventDefault();).然后，我继续显示模态.这是诀窍！我在 Chrome 和 IE8 上对此进行了测试，都运行良好.
希望这会有所帮助.如果您对此还有其他问题，请告诉我，我会相应地更新我的答案.祝你好运！！
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
解决方案 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!!
这篇关于SimpleModal 和 ASP.NET MasterPage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
