Главная страница   /   21.3. Использование в MVC "ненавязчивого" (unobtrusive) Ajax (ASP.NET MVC 4

ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

21.3. Использование в MVC "ненавязчивого" (unobtrusive) Ajax

Ajax (часто упоминается как AJAX) является сокращением для Asynchronous JavaScript and XML. Как мы увидим, XML часть является не столь значительной, как это было раньше, но асинхронная часть делает Ajax полезным. Это модель для запроса данных с сервера в фоновом режиме, без перезагрузки веб-страницы.

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

Совет

Функция ненавязчивого Ajax в MVC основана на JQuery. Если вы знакомы с тем, как JQuery обрабатывает Ajax, тогда вы поймете эту особенность MVC очень быстро.

Создание синхронного представления в виде формы

Мы собираемся начать этот раздел с создания представление для действия GetPeople в нашем контроллере, то есть мы создали файл /Views/People/GetPeople.cshtml. Вы можете увидеть содержимое этого файла в листинге 21-5.

Листинг 21-5: Содержимое файла представления GetPeople.cshtml
@using HelperMethods.Models
@model IEnumerable<person>
@{
	ViewBag.Title = "GetPeople";
}
<h2>Get People</h2>
<table>
	<thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
	<tbody>
		@foreach (Person p in Model) {
			<tr>
				<td>@p.FirstName</td>
				<td>@p.LastName</td>
				<td>@p.Role</td>
			</tr>
		}
	</tbody>
</table>
@using (Html.BeginForm()) {
	<div>
		@Html.DropDownList("selectedRole", new SelectList(
			new [] {"All"}.Concat(Enum.GetNames(typeof(Role)))))
		<button type="submit">Submit</button>
	</div>
}

Это строго типизированное представление, чьим типом модели является IEnumerable<Person>. Мы перечисляем объекты Person в модели для создания строк в HTML таблице и используем вспомогательный метод Html.BeginForm для создания простой формы, которая возвращается к действию и контроллеру, сгенерировавшим представление. Форма содержит вызов вспомогательного метода Html.DropDownList, который мы используем для создания элемента select, содержащего элементы option для каждого из значений, определенных перечислением Role, плюс значение All. (Мы воспользовались LINQ для создания списка значений для элемента option путем объединения значений в enum с массивом, который содержит одну строку All).

Форма содержит кнопку для отправки формы. Результат заключается в том, что вы можете воспользоваться формой для фильтрации объектов Person, которые мы определили в контроллере в листинге 21-2, как показано на рисунке 21-2.

Рисунок 21-2: Простая синхронная форма

Это простая демонстрация фундаментального ограничения в HTML форме, которое заключается в том, что вся страница перезагружается при отправке формы. Это означает, что все содержимое веб-страницы должно быть заново сгенерировано и загружено с сервера (что может быть дорогостоящей операцией для сложных представлений). И в то время, как это происходит, пользователи не могут выполнять любые другие задачи с приложением. Они должны ждать, пока новая страница не сгенерируется, не загрузится, а затем отобразится в браузере.

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

Подготовка проекта для ненавязчивого Ajax

Функция ненавязчивого Ajax настроена в двух местах приложения. Во-первых, в файле /Web.config (одном из файлов в корневой папке проекта) элемент configuration/appSettings содержит запись для свойства UnobtrusiveJavaScriptEnabled, которое должно быть установлено на true, как показано в листинге 21-6. (Это свойство имеет значение true по умолчанию, когда Visual Studio создает проект).

Листинг 21-6: Включение ненавязчивого Ajax в файле Web.config
...
<configuration>
<!-- другие элементы опущены для краткости -->
	<appSettings>
		<add key="webpages:Version" value="2.0.0.0" />
		<add key="webpages:Enabled" value="false" />
		<add key="PreserveLoginUrl" value="true" />
		<add key="ClientValidationEnabled" value="true" />
		<add key="UnobtrusiveJavaScriptEnabled" value="true" />
	</appSettings>
<!-- другие элементы опущены для краткости -->
</configuration>
...

В дополнение к проверке настойки в Web.config нам нужно добавить ссылки на JavaScript библиотеки jQuery, которые реализуют функциональность ненавязчивого Ajax. Вы можете ссылаться на эти библиотеки из отдельных представлений, но наиболее распространенным подходом является реализация этого в файле макета, поэтому он влияет на все представления, которые используют данный макет. В листинге 21-7, можно увидеть, как мы добавили ссылки на две библиотеки JavaScript в файл /Views/Shared/_Layout.cshtml.

Листинг 21-7: Добавление ссылок для JavaScript библиотек ненавязчивого Ajax в файл _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>@ViewBag.Title</title>
	<link href="~/Content/Site.css" rel="stylesheet" />
	<style type="text/css">
		label {
			display: inline-block;
			width: 100px;
		}

		h2 > label {
			width: inherit;
		}

		.dataElem {
			margin: 5px;
		}

		.editor-label, .editor-field {
			float: left;
		}

			.editor-label, .editor-label label, .editor-field input {
				height: 20px;
			}

		.editor-label {
			clear: left;
		}

		.editor-field {
			margin-left: 10px;
			margin-top: 10px;
		}

		input[type=submit] {
			float: left;
			clear: both;
			margin-top: 10px;
		}

		.column {
			float: left;
			margin: 10px;
		}
	</style>
	<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
</head>
<body>
	@RenderBody()
</body>
</html>

Файлы, у которых есть ссылки на наши элементы script, добавляются Visual Studio в папку Scripts проекта, когда вы создаете новый MVC проект, используя шаблон Basic. Файл jquery-1.7.1.min.js содержит базовую библиотеку JQuery, а файл jquery.unobtrusive-ajax.min.js содержит функционал Ajax (который опирается на главную библиотеку JQuery). Расширение .min обозначает, что это ужатую версии библиотек, которые меньше, чем версии без расширения .min, но с которыми невозможна отладка. Мы, как правило, не используем .min версии при разработке, а затем переключаемся на них в финальной версии наших проектов.

Совет

JQuery является хорошо поддерживаемой библиотекой, и новые версии появляются часто. Поэтому проверяйте постоянно версии, чтобы знать, что вы используете последнюю. Мы будем использовать версии, которые пришли с первоначальным выпуском Visual Studio 2012, и когда мы писали эту книгу, JQuery 1.8.2 можно было получить на http://jquery.com.