Основная справка по SimpleModal и ASP.NET
Интеграция 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 в проект по умолчанию?
Любая помощь будет принята с благодарностью.
Виктор
1 ответ
Я думаю, что вы подходите к этому с точки зрения чистого кода; но использование 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"); }
});
});
Это весь псевдокод, потому что сервис не существует, но, надеюсь, я правильно передал пример. Но в этом примере с псевдокодом служба обработает функциональность электронной почты и ответит клиенту, и будет выполнен обработчик обратного вызова, который будет отображать модальное значение. Если существует проблема в связи со службой или синтаксическим анализом возвращаемого значения, то вызывается обработчик обратного вызова ошибки.
Пожалуйста, дайте мне знать, если это поможет. Если у вас есть другие вопросы, дайте мне знать, и я обновлю свой ответ соответственно. Надеюсь это поможет!!