Главная страница   /   5.2. Представление пользовательского ввода (ASP.NET MVC 4 в действии

ASP.NET MVC 4 в действии

ASP.NET MVC 4 в действии

Джеффри Палермо

5.2. Представление пользовательского ввода

Так же, как мы разработали презентационную модель для выходных данных, мы можем разработать модель представления для данных, поступающих в приложение. Точно так же, как презентационная модель облегчает работу с выводимыми данными в представлении, хорошо продуманная модель пользовательского ввода значительно облегчит обработку пользовательских данных в приложении. Вместо того чтобы работать с подверженными ошибкам строковыми индикаторами и сопоставлять значения запросов с именами входных элементов, мы можем использовать возможности ASP.NET MVC и работать с моделью ввода.

Создание модели ввода

Простая форма на рисунке 5-2 включает два текстовых поля и чекбокс. Являясь частью нашего приложения, эта форма, несомненно, заслуживает формального, кодифицированного представления - класса. Класс для представления этой формы создать несложно: это две строки и булево значение, как показано в листинге 5-5.

Листинг 5-5: Модель ввода данных
public class NewCustomerInput
{
	public string FirstName { get; set; }
	public string LastName { get; set; }
	public bool Active { get; set; }
}

Строки 3-4: Представляет текстовые поля

Строка 5: Представляет чекбокс

Рисунок 5-2: Форма для пользовательского ввода

Модель ввода в листинге 5-5 является простым классом с четко обозначенной функцией. Она представляет собой форму для пользовательского ввода - ни больше, ни меньше.

Использование модели ввода в представлении

Представления можно сделать строго типизированными, назначив им базовый тип ViewPage<T>. В этом случае <T> будет NewCustomerInput. Это означает, что свойство ViewData.Model также будет типа NewCustomerInput. Мы можем создать HTML-форму с помощью модели ввода.

Как было сказано в главе 3, ASP.NET MVC включает вспомогательные методы, которые облегчают создание разметки и обеспечивают связь между именами элементов формы и именами свойств модели. В листинге 5-6 показано представление, содержащее модель ввода NewCustomerInput.

Листинг 5-6: Представление с моделью ввода
@model InputModel.Models.NewCustomerInput

<div>
	<form action="@Url.Action("Save")" method="post">
	<fieldset>
		<div>
			@Html.LabelFor(x => x.FirstName)
			@Html.TextBoxFor(x => x.FirstName)
		</div>
		<div>
			@Html.LabelFor(x => x.LastName)
			@Html.TextBoxFor(x => x.LastName)
		</div>
		<div>
			@Html.LabelFor(x => x.Active)
			@Html.CheckBoxFor(x => x.Active)
		</div>
		<div>
			<button name="save">
			Save</button>
		</div>
	</fieldset>
	</form>
</div>

Строка 1: Задает модель

Строка 7: Вспомогательный метод для метки

Строка 8: Выводит текстовое поле

Строка 16: Выводит чекбокс

Форма в листинге 5-6 построена на модели ввода данных, NewCustomerInput, из листинга 5-5. Обратите внимание на вспомогательные метод HTML, которые содержат лямбда-выражения (строка 7). Они будут анализировать лямбда-выражения и извлекать имена свойств, которые затем будут использоваться в качестве значений атрибутов для имен элементов формы. Например, вызов Html.TextBoxFor (Х => x.LastName) будет генерировать <input type="text" name="LastName" />.

Использование лямбда-выражений для рефакторинга

Не стоит недооценивать значение лямбда-выражений в представлениях. Они компилируются вместе с остальным кодом, поэтому, если вы переименуете какой-либо метод, вы получите ошибку во время компиляции. Замените на код в вашем представлении ссылающим на классы и методы строками, и вы не обнаружите эти ошибки до момента исполнения.

Использование строго типизированных ссылок на данные в представлении также помогает при рефакторинге. Использование такого инструмента, как JetBrains ReSharper (www.jetbrains.com/resharper), позволит вам провести рефакторинг кода и внести изменения во все представления, которые используют его. Это действительно мощно.

До использования строго типизированных вспомогательных методов применялись «магические» строки, и программисты вручную старались обеспечить соответствие между формой ввода и логикой обработки. Используя строго типизированные вспомогательные методы, как показано в листинге 5-6, ASP.NET MVC обеспечивает эту координацию, так что переименование свойства не приведет к ошибке.

Работа с представленными входящими данными

Форма, в листинге 5-6 заканчивается кнопкой Save, и ASP.NET MVC предлагает удобный способ передачи полученных данных к модели в форме запроса HTTP. Этот процесс называется связыванием данных, и он рассматривается подробно в главе 10. Здесь мы вкратце с ним познакомимся на примере следующего метода контроллера:

public ViewResult Save(NewCustomerInput input)
{
	return View(input);
}

Когда объект NewCustomerInput назначается параметром метода, значение параметра связывается с помощью DefaultModelBinder ASP.NET MVC для корректного отображения. Это поведение по умолчанию в ASP.NET MVC.

Наш метод работает с объектом модели ввода, а не с парами соответствий ключ–значение. В данном случае он не делает многого (просто отправляет пары в качестве модели в другое представление, так что в примере мы можем работать с сохраненными значениями). В реальных методах действий у нас будет возможность работать с ним, как с любым другим классом: сохранить его или передать другим классам для дальнейшей обработки.

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