Главная страница   /   24.2. Подготовка приложения для примера (ASP.NET MVC 4

ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

24.2. Подготовка приложения для примера

Для этой главы мы создали новый проект 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: Используем пример приложения