SimpleModal и ASP.NET MasterPage - PullRequest
Новая
       24

SimpleModal и ASP.NET MasterPage

1 голос
/ 19 августа 2010

Интеграция 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.

Любая помощь будет принята с благодарностью.

Victor

1 Ответ

1 голос
/ 19 августа 2010

Я думаю, что у меня есть для вас ответ.

Предыдущий пример представлял собой простую 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, и оба работали нормально.

Надеюсь, это поможет. Дайте мне знать, если у вас есть другие вопросы по этому поводу, и я обновлю свой ответ соответственно. Удачи !!

...