Основная справка по SimpleModal и ASP.NET - PullRequest
Новая
       35

Основная справка по SimpleModal и ASP.NET

5 голосов
/ 18 августа 2010

Интеграция SimpleModal с ASP.NET

Я хочу поблагодарить Эрика за создание SimpleModal и поздравление с демонстрацией. Это выглядит фантастически ..

Мне бы только хотелось выяснить, как его использовать ... (это я, мне не хватает какой-то хромосомы или чего-то еще.) Заранее извиняюсь за мою нубинность.

Я видел несколько демонстраций, где обсуждались и вызывались определенные функции, но это предполагает, что сценарии правильно интегрированы в проект. Это суть проблемы, с которой я сталкиваюсь, я не знаю, какого черта я смотрю, когда смотрю на jquery.

Общие сведения: я программировал в течение 25 лет с ассемблером, C, VB и последние 10 лет в качестве администратора баз данных SQL, а также занимался архитектурой больших корпоративных систем. Сейчас я пытаюсь совершить прыжок в сеть ASP.NET. Мои навыки в C # развиваются, и я написал в нем полную систему выставления счетов, но я не знаю, как можно интегрировать этот SimpleModal или любой jquery и работать в ASP.NET 2008.

Я взял пример кода и вставил его в файл default.aspx, чтобы оставить его с общей кучей мусорного кода.

Может кто-нибудь сделать небольшой пример того, что мне нужно для правильной интеграции SimpleModal в мой проект? Я читал ответы Эрика другим и читал последующие ссылки, но никто еще не объяснил, как полностью интегрировать его, что я нашел.

Я предполагаю, что мне нужно иметь папки и файлы css, img и js в проекте. Проверьте, я получил это в корне. После этого я не знаю, куда обратиться. Я предполагаю, что он должен быть объявлен в верхней части кода на странице, а затем в HTML должна быть вызвана ссылка, а в коде позади него. Как это сделать, мне не хватает, и я потратил 3-4 дня на изучение этого вопроса ...

Как только у меня появится простейшая модальная форма, я смогу взглянуть на эту чертову вещь и выяснить, как ее адаптировать, и, надеюсь, со временем начнут заполнять пробелы в моем понимании.

Вот как выглядит пример файла default.aspx. Я хочу открыть SimpleModal с помощью вызова C # из Code Behind. 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

Вот как выглядит пример кода по умолчанию в c #: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Кто-нибудь хочет попробовать просто интегрировать SimpleModal в проект по умолчанию?

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

Victor

1 Ответ

4 голосов
/ 18 августа 2010

Я думаю, что вы подходите к этому с точки зрения чистого кода; но использование jQuery (или большей части любой другой клиентской среды) смещает значительную часть фактического представления вашего приложения клиенту. Сервер обрабатывает данные (в формате XML, JSON или в другом необходимом вам формате), а клиент использует структуру HTML DOM вместе с JavaScript, CSS и данными, которые обрабатываются для отображения приложения.

В своем комментарии вы заявляете, что хотите использовать модал в качестве подтверждения того, что действие было успешным. Здесь вы будете использовать jQuery для сбора информации и вызова AJAX-вызова для вашей службы (возможно, службы WCF), и служба ответит вам успешно или неудачно. Затем вы обработаете успех или неудачу в вашем обработчике jQuery ajax success или callback. Это будет сделано на клиенте, а не на сервере.

Вот краткий пример, который отображает только модал: 

<!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>
    <title></title>
    <style type="text/css">
        #simplemodal-overlay {background-color:#000;}
        #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}
    </style>
</head>
<body>
    <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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal-1.3.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#theModal").click(function () {
                $("#sample").modal({
                    opacity: 80,
                    overlayCss: { backgroundColor: "#fff" }
                });
            });
        });
    </script>
</body>
</html>

Это просто обычная HTML-страница без кода. Я мог бы изменить это, чтобы вызвать сервис, когда нажата кнопка отправки: 

$("#theModal").click(function () {
    $.ajax({
      type: "POST",
      dataType: "json",
      contentType: "application/json",
      url: "MyEmailService.svc/SendEmail",
      data: {"email": $("#email").val(),
             "message": $("#message").val()},
      success: function(data) {
                 $("#sample").modal({
                     opacity: 80,
                     overlayCss: { backgroundColor: "#fff" }
                 });
      },
      error: function(m, t, x) { alert("something bad happened"); }
    });
});

Это весь псевдокод, потому что сервис не существует, но, надеюсь, я правильно передал пример. Но в этом примере с псевдокодом служба обработает функциональность электронной почты и ответит клиенту, и будет выполнен обработчик обратного вызова, который будет отображать модальное значение. Если при связи со службой или при анализе возвращаемого значения возникает проблема, вызывается обработчик обратного вызова с ошибкой.

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

...