ASP.NET MVC 4
Адам Фриман
Подготовка приложения для примера
Для этой главы мы создали новый проект MVC под названием ClientFeatures
на шаблоне Basic
. Мы будем работать с приложением, аналогичным приложению из предыдущей главы, поэтому для начала создадим класс под названием Appointment.cs
в папке Models
.
Содержимое этого файла показано в листинге 24-1.
Листинг 24-1: Класс модели Appointment
using System;
using System.ComponentModel.DataAnnotations;
namespace ClientFeatures.Models
{
public class Appointment
{
[Required]
public string ClientName { get; set; }
[DataType(DataType.Date)]
public DateTime Date { get; set; }
public bool TermsAccepted { get; set; }
}
}
Мы создали контроллер Home
, который работает с классом модели Appointment
; он показан в листинге 24-2.
Листинг 24-2: КонтроллерHome
в приложенииClientFeatures
using System;
using System.Web.Mvc;
using ClientFeatures.Models;
namespace ClientFeatures.Controllers
{
public class HomeController : Controller
{
public ViewResult MakeBooking()
{
return View(new Appointment
{
ClientName = "Adam",
Date = DateTime.Now.AddDays(2),
TermsAccepted = true
});
}
[HttpPost]
public JsonResult MakeBooking(Appointment appt)
{
// statements to store new Appointment in a
// repository would go here in a real project
return Json(appt, JsonRequestBehavior.AllowGet);
}
}
}
В этом контроллере есть две версии метода MakeBooking
. Версия без параметров создает объект Appointment
и передает его в метод View
, который визуализирует представление по умолчанию. HttpPost версия метода MakeBooking
ждет, когда механизм связывания создаст объект Appointment
, кодирует его в методе Json
и отправляет его обратно к клиенту в формате JSON.
В этой главе мы уделяем основное внимание функциям MVC Framework, которые поддерживают клиентскую разработку, так что мы немного сократили код контроллера, чего не стали бы делать в реальном проекте. Обратите внимание, что мы не выполняем никакой валидации, когда получаем запрос HTTP POST
, и просто отправляем данные объекта, созданного механизмом связывания, в браузер в формате JSON (без поддержки ответов HTML на запросы POST).
Мы хотим максимально упростить использование формы с Ajax, которую мы определили в файле /Views/Home/MakeBooking.cshtml
; он показан в листинге 24-3. Мы сосредоточимся на скриптах и элементах ссылок в представлении, так что взаимодействие с приложением отойдет на второй план.
Листинг 24-3: Представление MakeBooking
@model ClientFeatures.Models.Appointment
@{
ViewBag.Title = "Make A Booking";
AjaxOptions ajaxOpts = new AjaxOptions
{
OnSuccess = "processResponse"
};
}
<h4>Book an Appointment</h4>
<link rel="stylesheet" href="~/Content/CustomStyles.css" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
function processResponse(appt) {
$('#successClientName').text(appt.ClientName);
$('#successDate').text(processDate(appt.Date));
switchViews();
}
function processDate(dateString) {
return new Date(parseInt(dateString.substr(6,
dateString.length - 8))).toDateString();
}
function switchViews() {
var hidden = $('.hidden');
var visible = $('.visible');
hidden.removeClass("hidden").addClass("visible");
visible.removeClass("visible").addClass("hidden");
}
$(document).ready(function () {
$('#backButton').click(function (e) {
switchViews();
});
});
</script>
<div id="formDiv" class="visible">
@using (Ajax.BeginForm(ajaxOpts))
{
@Html.ValidationSummary(true)
<p>@Html.ValidationMessageFor(m => m.ClientName)</p>
<p>Your name: @Html.EditorFor(m => m.ClientName)</p>
<p>@Html.ValidationMessageFor(m => m.Date)</p>
<p>Appointment Date: @Html.EditorFor(m => m.Date)</p>
<p>@Html.ValidationMessageFor(m => m.TermsAccepted)</p>
<p>@Html.EditorFor(m => m.TermsAccepted) I accept the terms & conditions</p>
<input type="submit" value="Make Booking" />
}
</div>
<div id="successDiv" class="hidden">
<h4>Your appointment is confirmed</h4>
<p>Your name is: <b id="successClientName"></b></p>
<p>The date of your appointment is: <b id="successDate"></b></p>
<button id="backButton">Back</button>
</div>
В этом представлении есть два элемента div
. Первый будет показан пользователю, когда представление будет визуализировано впервые; он содержит форму с Ajax. Когда форма отправлена, ответ сервера на запрос Ajax скроет форму и отобразит другой элемент div
, в котором мы отображаем информацию о подтверждении записи на прием.
Мы включили в это представление ряд стандартных библиотек JavaScript из папки Scripts
и определили локальный элемент script
, который содержит простой код jQuery, специфичный для этого представления. Мы также добавили элемент link
, который загружает из папки /Content
файл CSS под названием CustomStyles.css
; он показан в листинге 24-4.
Листинг 24-4: Содержимое файла CustomStyles.css
div.hidden { display: none;}
div.visible { display: block;}
Мы хотим создать типичный сценарий для сложного представления, не усложняя при этом приложение. Именно поэтому мы добавили файл CSS, который содержит только два стиля, и используем столько библиотек jQuery для такого простого представления. Основная идея в том, что нам придется управлять большим количеством файлов. Когда вы будете работать с реальными приложениями, вы будете поражены, как много файлов скриптов и стилей используют ваши представления.
Чтобы увидеть, как работает наш пример приложения, запустите его и перейдите по ссылке /Home/MakeBooking
. Форма предварительно заполнена данными, так что вы можете просто нажать кнопку Make Booking
, чтобы данные формы были отправлены на сервер с помощью Ajax. Когда будет получен ответ, вы увидите информацию об объекте Appointment
, который был создан механизмом связывания из данных формы, а также кнопку, которая вернет вас обратно к форме, как показано на рисунке 24-1.
Рисунок 24-1: Используем пример приложения