Создание приложения на MVC 3 с помощью Razor и ненавязчивого JavaScript

Статья
06/16/2023

Пример веб-приложения списка пользователей демонстрирует, насколько просто создавать приложения 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 MVC 3

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

Controllers\AccountController
Models\AccountModels
Views\Shared\_LogOnPartial
Views\Account (и все файлы в этом каталоге)

Soln Exp

Измените файл _Layout.cshtml и замените разметку внутри <div> элемента с именем logindisplay сообщением "Login Disabled". В следующем примере показана новая разметка:

<div id="logindisplay">
  Login Disabled
</div>

Добавление модели

В Обозреватель решений щелкните правой кнопкой мыши папку Models, выберите Добавить и выберите Класс.

Новый класс User Mdl

Назовите класс 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 метода действия и представления для отображения сведений о пользователе.

Снимок экрана: поля сведений с userName, FirstName, LastName и City для пользователя.

Добавьте следующий 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 с проверкой.

Поделиться через

Создание приложения на MVC 3 с помощью Razor и ненавязчивого JavaScript

Общие сведения

Создание веб-приложения

Добавление модели

Создание представления по умолчанию

Создание представления сведений

Создание представления правки

Включение проверки Client-Side

Создание представления

Добавление метода Delete

Обратная связь

Обратная связь

Дополнительные ресурсы