Создание приложения на MVC 3 с помощью Razor и ненавязчивого JavaScript
Пример веб-приложения списка пользователей демонстрирует, насколько просто создавать приложения ASP.NET MVC 3 с помощью подсистемы представлений Razor. В примере приложения показано, как использовать новый механизм представлений Razor с ASP.NET MVC версии 3 и Visual Studio 2010 для создания вымышленного веб-сайта списка пользователей, который включает такие функции, как создание, отображение, редактирование и удаление пользователей.
В этом руководстве описаны шаги, которые были выполнены для создания примера списка пользователей ASP.NET приложения MVC 3. Проект Visual Studio с исходным кодом C# и VB доступен в следующем разделе: Скачивание. Если у вас есть вопросы об этом руководстве, опубликуйте их на форуме MVC.
Общие сведения
Приложение, которое вы будете создавать, — это простой веб-сайт списка пользователей. Пользователи могут вводить, просматривать и обновлять сведения о пользователях.
Готовый проект VB и C# можно скачать здесь.
Создание веб-приложения
Чтобы начать работу с учебником, откройте Visual Studio 2010 и создайте проект с помощью шаблона веб-приложения ASP.NET MVC 3 . Назовите приложение Mvc3Razor.
В диалоговом окне Создать проект ASP.NET MVC 3 выберите Интернет-приложение, выберите подсистему представлений Razor и нажмите кнопку ОК.
В этом руководстве вы не будете использовать поставщик членства ASP.NET, поэтому вы можете удалить все файлы, связанные с входом в систему и членством. В Обозреватель решений удалите следующие файлы и каталоги:
- Controllers\AccountController
- Models\AccountModels
- Views\Shared\_LogOnPartial
- Views\Account (и все файлы в этом каталоге)
Измените файл _Layout.cshtml и замените разметку внутри <div>
элемента с именем logindisplay
сообщением "Login Disabled". В следующем примере показана новая разметка:
<div id="logindisplay">
Login Disabled
</div>
Добавление модели
В Обозреватель решений щелкните правой кнопкой мыши папку Models, выберите Добавить и выберите Класс.
Назовите класс UserModel
. Замените содержимое файла UserModel следующим кодом:
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
namespace Mvc3Razor.Models {
public class UserModel {
[Required]
[StringLength(6, MinimumLength = 3)]
[Display(Name = "User Name")]
[RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
[ScaffoldColumn(false)]
public string UserName { get; set; }
[Required]
[StringLength(8, MinimumLength = 3)]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required]
[StringLength(9, MinimumLength = 2)]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required()]
public string City { get; set; }
}
public class Users {
public Users() {
_usrList.Add(new UserModel
{
UserName = "BenM",
FirstName = "Ben",
LastName = "Miller",
City = "Seattle"
});
_usrList.Add(new UserModel
{
UserName = "AnnB",
FirstName = "Ann",
LastName = "Beebe",
City = "Boston"
});
}
public List<UserModel> _usrList = new List<UserModel>();
public void Update(UserModel umToUpdate) {
foreach (UserModel um in _usrList) {
if (um.UserName == umToUpdate.UserName) {
_usrList.Remove(um);
_usrList.Add(umToUpdate);
break;
}
}
}
public void Create(UserModel umToUpdate) {
foreach (UserModel um in _usrList) {
if (um.UserName == umToUpdate.UserName) {
throw new System.InvalidOperationException("Duplicat username: " + um.UserName);
}
}
_usrList.Add(umToUpdate);
}
public void Remove(string usrName) {
foreach (UserModel um in _usrList) {
if (um.UserName == usrName) {
_usrList.Remove(um);
break;
}
}
}
public UserModel GetUser(string uid) {
UserModel usrMdl = null;
foreach (UserModel um in _usrList)
if (um.UserName == uid)
usrMdl = um;
return usrMdl;
}
}
}
Класс UserModel
представляет пользователей. Каждый член класса помечен атрибутом Required из пространства имен DataAnnotations . Атрибуты в пространстве имен DataAnnotations обеспечивают автоматическую проверку на стороне клиента и сервера для веб-приложений.
HomeController
Откройте класс и добавьте директиву using
, чтобы получить доступ к классам UserModel
и Users
:
using Mvc3Razor.Models;
Сразу после HomeController
объявления добавьте следующий комментарий и ссылку на Users
класс:
public class HomeController : Controller {
// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();
Класс Users
представляет собой упрощенное хранилище данных в памяти, которое будет использоваться в этом руководстве. В реальном приложении для хранения сведений о пользователях используется база данных. Первые несколько строк HomeController
файла показаны в следующем примере:
using System.Web.Mvc;
using Mvc3Razor.Models;
namespace Mvc3Razor.Controllers {
public class HomeController : Controller {
// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();
Создайте приложение, чтобы пользовательская модель была доступна мастеру формирования шаблонов на следующем шаге.
Создание представления по умолчанию
Следующим шагом является добавление метода действия и представления для отображения пользователей.
Удалите существующий файл Views\Home\Index . Вы создадите новый файл индекса для отображения пользователей.
HomeController
В классе замените содержимое Index
метода следующим кодом:
return View(_usrs._usrList);
Щелкните правой Index
кнопкой мыши внутри метода и выберите команду Добавить представление.
Выберите параметр Создать строго типизированное представление . В поле Просмотреть класс данных выберите Mvc3Razor.Models.UserModel. (Если mvc3Razor.Models.UserModel не отображается в поле Просмотреть класс данных , необходимо выполнить сборку проекта.) Убедитесь, что для обработчика представлений задано значение Razor. Задайте для свойства Просмотр содержимогозначение Список и нажмите кнопку Добавить.
Новое представление автоматически создает шаблон пользовательских данных, передаваемых в Index
представление. Изучите только что созданный файл Views\Home\Index . Ссылки Создать, Изменить, Сведения и Удалить не работают, но остальная часть страницы работает. Запустите страницу. Вы увидите список пользователей.
Откройте файл Index.cshtml и замените разметку ActionLink
для правки, сведений и удаления следующим кодом:
@Html.ActionLink("Edit", "Edit", new { id=item.UserName }) |
@Html.ActionLink("Details", "Details", new { id=item.UserName }) |
@Html.ActionLink("Delete", "Delete", new { id=item.UserName })
Имя пользователя используется в качестве идентификатора для поиска выбранной записи в ссылках Изменить, Сведения и Удалить .
Создание представления сведений
Следующим шагом является добавление Details
метода действия и представления для отображения сведений о пользователе.
Добавьте следующий Details
метод в контроллер home:
public ViewResult Details(string id) {
return View(_usrs.GetUser(id));
}
Щелкните правой Details
кнопкой мыши внутри метода и выберите Добавить представление. Убедитесь, что поле Просмотреть класс данных содержит Mvc3Razor.Models.UserModel. Задайте для просмотра содержимогозначение Сведения и нажмите кнопку Добавить.
Запустите приложение и выберите ссылку со сведениями. Автоматическое формирование шаблонов показывает каждое свойство в модели.
Создание представления правки
Добавьте следующий Edit
метод в контроллер home.
public ViewResult Edit(string id) {
return View(_usrs.GetUser(id));
}
[HttpPost]
public ViewResult Edit(UserModel um) {
if (!TryUpdateModel(um)) {
ViewBag.updateError = "Update Failure";
return View(um);
}
// ToDo: add persistent to DB.
_usrs.Update(um);
return View("Details", um);
}
Добавьте представление, как на предыдущих шагах, но задайте для свойства Просмотр содержимогозначение Изменить.
Запустите приложение и измените имя и фамилию одного из пользователей. При нарушении ограничений DataAnnotation
, примененных к классу UserModel
, при отправке формы вы увидите ошибки проверки, созданные серверным кодом. Например, если изменить имя "Ann" на "A", при отправке формы в форме отображается следующая ошибка:
The field First Name must be a string with a minimum length of 3 and a maximum length of 8.
В этом руководстве имя пользователя рассматривается как первичный ключ. Таким образом, свойство имени пользователя нельзя изменить. В файле Edit.cshtml сразу после инструкции Html.BeginForm
задайте имя пользователя как скрытое поле. Это приводит к передаче свойства в модели. В следующем фрагменте кода показано размещение Hidden
оператора :
<h2>Edit</h2>
@using (Html.BeginForm()) {
@Html.Hidden("UserName", Model.UserName)
Замените разметку TextBoxFor
и ValidationMessageFor
для имени пользователя вызовом DisplayFor
. Метод DisplayFor
отображает свойство как элемент, доступный только для чтения. В следующем примере приведена полная разметка. Оригинал TextBoxFor
и ValidationMessageFor
вызовы закомментированы символами@* *@
начала и комментария Razor ()
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@*
@Html.TextBoxFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
*@
@Html.DisplayFor(model => model.UserName)
</div>
Включение проверки Client-Side
Чтобы включить проверку на стороне клиента в ASP.NET MVC 3, необходимо установить два флага и включить три файла JavaScript.
Откройте файл Web.config приложения. Убедитесь that ClientValidationEnabled
, что UnobtrusiveJavaScriptEnabled
в параметрах приложения задано значение true. В следующем фрагменте из корневого файлаWeb.config показаны правильные параметры:
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
Если задано UnobtrusiveJavaScriptEnabled
значение true, можно использовать ненавязчивый Ajax и ненавязчивую проверку клиента. При использовании ненавязчивой проверки правила проверки превратятся в атрибуты HTML5. Имена атрибутов HTML5 могут состоять только из строчных букв, цифр и дефисов.
Если задано ClientValidationEnabled
значение true, проверка на стороне клиента включена. Задавая эти ключи в файле Web.config приложения, вы включаете проверку клиента и ненавязчивый Код JavaScript для всего приложения. Вы также можете включить или отключить эти параметры в отдельных представлениях или в методах контроллера с помощью следующего кода:
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
Кроме того, необходимо включить несколько файлов JavaScript в отрисованное представление. Простой способ включить JavaScript во все представления — добавить их в файл Views\Shared\_Layout.cshtml . Замените <head>
элемент файла _Layout.cshtml следующим кодом:
<head>
<title>@View.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>
Первые два сценария jQuery размещаются в сети доставки содержимого Microsoft Ajax (CDN). Используя сеть доставки содержимого Microsoft Ajax, вы можете значительно повысить производительность приложений.
Запустите приложение и щелкните ссылку на изменение. Просмотрите источник страницы в браузере. В источнике браузера отображается множество атрибутов формы data-val
(для проверки данных). Если включена проверка клиента и ненавязчивый JavaScript, поля ввода с правилом проверки клиента содержат data-val="true"
атрибут для активации ненавязчивой проверки клиента. Например, City
поле в модели было дополнено атрибутом Required , что приводит к html-коду, показанном в следующем примере:
<div class="editor-field">
<input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
<span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>
Для каждого правила проверки клиента добавляется атрибут, имеющий форму data-val-rulename="message"
. City
Используя пример поля, показанный выше, обязательное правило проверки клиента создает data-val-required
атрибут и сообщение "The City field is required". Запустите приложение, измените одного из пользователей и очистите City
поле. При выходе из поля табуляции отображается сообщение об ошибке проверки на стороне клиента.
Аналогичным образом для каждого параметра в правиле проверки клиента добавляется атрибут, имеющий форму data-val-rulename-paramname=paramvalue
. Например, FirstName
свойство аннотировано атрибутом StringLength и задает минимальную длину 3 и максимальную длину 8. Правило проверки данных с именем length
имеет имя max
параметра и значение параметра 8. Ниже показан HTML-код, который создается для FirstName
поля при редактировании одного из пользователей:
<input data-val="true"
data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 8."
data-val-length-max="8"
data-val-length-min="3"
data-val-required="The First Name field is required."
id="FirstName"
name="FirstName"
type="text"
value="Ben" />
Дополнительные сведения о ненавязчивой проверке клиента см. в записи Ненавязчивая проверка клиента в ASP.NET MVC 3 в блоге Брэда Уилсона.
Примечание
В ASP.NET MVC 3 Beta иногда требуется отправить форму, чтобы начать проверку на стороне клиента. Это может быть изменено для окончательного выпуска.
Создание представления
Следующим шагом является добавление Create
метода действия и представления, чтобы позволить пользователю создать нового пользователя. Добавьте следующий Create
метод в контроллер home:
public ViewResult Create() {
return View(new UserModel());
}
[HttpPost]
public ViewResult Create(UserModel um) {
if (!TryUpdateModel(um)) {
ViewBag.updateError = "Create Failure";
return View(um);
}
// ToDo: add persistent to DB.
_usrs.Create(um);
return View("Details", um);
}
Добавьте представление, как на предыдущих шагах, но задайте для свойства Просмотр содержимогозначение Создать.
Запустите приложение, щелкните ссылку Создать и добавьте нового пользователя. Метод Create
автоматически использует преимущества проверки на стороне клиента и сервера. Попробуйте ввести имя пользователя, содержащее пробелы, например "Ben X". При выходе табуляции в поле имени пользователя отображается ошибка проверки на стороне клиента (White space is not allowed
).
Добавление метода Delete
Чтобы завершить работу с руководством, добавьте следующий Delete
метод в контроллер home:
public ViewResult Delete(string id) {
return View(_usrs.GetUser(id));
}
[HttpPost]
public RedirectToRouteResult Delete(string id, FormCollection collection) {
_usrs.Remove(id);
return RedirectToAction("Index");
}
Delete
Добавьте представление, как на предыдущих шагах, установив для параметра Просмотр содержимогозначение Удалить.
Теперь у вас есть простое, но полностью функциональное приложение ASP.NET MVC 3 с проверкой.
Обратная связь
https://aka.ms/ContentUserFeedback.
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделеОтправить и просмотреть отзыв по