В первой главе мы узнали, как контроллеры и представления взаимодействуют в MVC. В этом уроке мы сделаем шаг вперед и узнаем, как использовать модели и создать расширенное приложение для создания, редактирования, удаления. и просмотреть список пользователей в нашем приложении.
Создать расширенное приложение MVC
Шаг 1 — Выберите Файл → Создать → Проект → ASP.NET MVC Web Application. Назовите его как AdvancedMVCApplication. Нажмите ОК. В следующем окне выберите «Шаблон» в качестве интернет-приложения и «Просмотр движка» в качестве бритвы. Обратите внимание, что на этот раз мы используем шаблон вместо пустого приложения.
Это создаст новый проект решения, как показано на следующем снимке экрана. Поскольку мы используем тему ASP.NET по умолчанию, она поставляется с примерами видов, контроллеров, моделей и других файлов.
Шаг 2 — Постройте решение и запустите приложение, чтобы увидеть его вывод по умолчанию, как показано на следующем снимке экрана.
Шаг 3 — Добавить новую модель, которая будет определять структуру данных пользователей. Щелкните правой кнопкой мыши папку «Модели» и выберите «Добавить» → «Класс». Назовите это как UserModel и нажмите Add.
Шаг 4 — Скопируйте следующий код во вновь созданный UserModel.cs.
using System; using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Web.Mvc.Html; namespace AdvancedMVCApplication.Models { public class UserModels { [Required] public int Id { get; set; } [DisplayName("First Name")] [Required(ErrorMessage = "First name is required")] public string FirstName { get; set; } [Required] public string LastName { get; set; } public string Address { get; set; } [Required] [StringLength(50)] public string Email { get; set; } [DataType(DataType.Date)] public DateTime DOB { get; set; } [Range(100,1000000)] public decimal Salary { get; set; } } }
В приведенном выше коде мы указали все параметры, которые имеет модель User, их типы данных и проверки, такие как обязательные поля и длина.
Теперь, когда у нас есть пользовательская модель, готовая для хранения данных, мы создадим файл класса Users.cs, который будет содержать методы для просмотра пользователей, добавления, редактирования и удаления пользователей.
Шаг 5 — Щелкните правой кнопкой мыши Модели и выберите Добавить → Класс. Назовите это как Пользователи. Это создаст класс users.cs внутри Models. Скопируйте следующий код в классе users.cs.
using System; using System.Collections.Generic; using System.EnterpriseServices; namespace AdvancedMVCApplication.Models { public class Users { public List UserList = new List(); //action to get user details public UserModels GetUser(int id) { UserModels usrMdl = null; foreach (UserModels um in UserList) if (um.Id == id) usrMdl = um; return usrMdl; } //action to create new user public void CreateUser(UserModels userModel) { UserList.Add(userModel); } //action to udpate existing user public void UpdateUser(UserModels userModel) { foreach (UserModels usrlst in UserList) { if (usrlst.Id == userModel.Id) { usrlst.Address = userModel.Address; usrlst.DOB = userModel.DOB; usrlst.Email = userModel.Email; usrlst.FirstName = userModel.FirstName; usrlst.LastName = userModel.LastName; usrlst.Salary = userModel.Salary; break; } } } //action to delete exising user public void DeleteUser(UserModels userModel) { foreach (UserModels usrlst in UserList) { if (usrlst.Id == userModel.Id) { UserList.Remove(usrlst); break; } } } } }
Как только у нас появятся наши UserModel.cs и Users.cs, мы добавим Views в нашу модель для просмотра пользователей, добавления, редактирования и удаления пользователей. Сначала давайте создадим представление для создания пользователя.
Шаг 6 — Щелкните правой кнопкой мыши папку Views и выберите Add → View.
Шаг 7 — В следующем окне выберите View Name как UserAdd, View Engine as Razor и установите флажок Create строго типизированное представление.
Шаг 8 — Нажмите Добавить. Это создаст следующий код CSHML по умолчанию, как показано ниже —
@model AdvancedMVCApplication.Models.UserModels @{ ViewBag.Title = "UserAdd"; } <h2>UserAdd</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>UserModels</legend> <div class = "editor-label"> @Html.LabelFor(model => model.FirstName) </div> <div class = "editor-field"> @Html.EditorFor(model => model.FirstName) @Html.ValidationMessageFor(model => model.FirstName) </div> <div class = "editor-label"> @Html.LabelFor(model => model.LastName) </div> <div class = "editor-field"> @Html.EditorFor(model => model.LastName) @Html.ValidationMessageFor(model => model.LastName) </div> <div class = "editor-label"> @Html.LabelFor(model => model.Address) </div> <div class = "editor-field"> @Html.EditorFor(model => model.Address) @Html.ValidationMessageFor(model => model.Address) </div> <div class = "editor-label"> @Html.LabelFor(model => model.Email) </div> <div class = "editor-field"> @Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email) </div> <div class = "editor-label"> @Html.LabelFor(model => model.DOB) </div> <div class = "editor-field"> @Html.EditorFor(model => model.DOB) @Html.ValidationMessageFor(model => model.DOB) </div> <div class = "editor-label"> @Html.LabelFor(model => model.Salary) </div> <div class = "editor-field"> @Html.EditorFor(model => model.Salary) @Html.ValidationMessageFor(model => model.Salary) </div> <p> <input type = "submit" value = "Create" /> </p> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
Как вы можете видеть, это представление содержит подробные сведения обо всех атрибутах полей, включая сообщения проверки, метки и т. Д. Это представление будет выглядеть следующим образом в нашем конечном приложении.
Подобно UserAdd, теперь мы добавим еще четыре вида, приведенных ниже, с заданным кодом —
Index.cshtml
В этом представлении будут отображаться все пользователи, присутствующие в нашей системе, на странице индекса.
@model IEnumerable<AdvancedMVCApplication.Models.UserModels> @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p> @Html.ActionLink("Create New", "UserAdd") </p> <table> <tr> <th> @Html.DisplayNameFor(model => model.FirstName) </th> <th> @Html.DisplayNameFor(model => model.LastName) </th> <th> @Html.DisplayNameFor(model => model.Address) </th> <th> @Html.DisplayNameFor(model => model.Email) </th> <th> @Html.DisplayNameFor(model => model.DOB) </th> <th> @Html.DisplayNameFor(model => model.Salary) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.FirstName) </td> <td> @Html.DisplayFor(modelItem => item.LastName) </td> <td> @Html.DisplayFor(modelItem => item.Address) </td> <td> @Html.DisplayFor(modelItem => item.Email) </td> <td> @Html.DisplayFor(modelItem => item.DOB) </td> <td> @Html.DisplayFor(modelItem => item.Salary) </td> <td> @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | @Html.ActionLink("Details", "Details", new { id = item.Id }) | @Html.ActionLink("Delete", "Delete", new { id = item.Id }) </td> </tr> } </table>
Этот вид будет выглядеть следующим образом в нашем окончательном приложении.
Details.cshtml
Это представление будет отображать информацию о конкретном пользователе, когда мы нажимаем на запись пользователя.
@model AdvancedMVCApplication.Models.UserModels @{ ViewBag.Title = "Details"; } <h2>Details</h2> <fieldset> <legend>UserModels</legend> <div class = "display-label"> @Html.DisplayNameFor(model => model.FirstName) </div> <div class = "display-field"> @Html.DisplayFor(model => model.FirstName) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.LastName) </div> <div class = "display-field"> @Html.DisplayFor(model => model.LastName) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.Address) </div> <div class = "display-field"> @Html.DisplayFor(model => model.Address) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.Email) </div> <div class = "display-field"> @Html.DisplayFor(model => model.Email) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.DOB) </div> <div class = "display-field"> @Html.DisplayFor(model => model.DOB) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.Salary) </div> <div class = "display-field"> @Html.DisplayFor(model => model.Salary) </div> </fieldset> <p> @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) | @Html.ActionLink("Back to List", "Index") </p>
Этот вид будет выглядеть следующим образом в нашем окончательном приложении.
Edit.cshtml
В этом представлении отобразится форма редактирования для редактирования сведений о существующем пользователе.
@model AdvancedMVCApplication.Models.UserModels @{ ViewBag.Title = "Edit"; } <h2>Edit</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>UserModels</legend> @Html.HiddenFor(model => model.Id) <div class = "editor-label"> @Html.LabelFor(model => model.FirstName) </div> <div class = "editor-field"> @Html.EditorFor(model => model.FirstName) @Html.ValidationMessageFor(model => model.FirstName) </div> <div class = "editor-label"> @Html.LabelFor(model => model.LastName) </div> <div class = "editor-field"> @Html.EditorFor(model => model.LastName) @Html.ValidationMessageFor(model => model.LastName) </div> <div class = "editor-label"> @Html.LabelFor(model => model.Address) </div> <div class = "editor-field"> @Html.EditorFor(model => model.Address) @Html.ValidationMessageFor(model => model.Address) </div> <div class = "editor-label"> @Html.LabelFor(model => model.Email) </div> <div class = "editor-field"> @Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email) </div> <div class = "editor-label"> @Html.LabelFor(model => model.DOB) </div> <div class = "editor-field"> @Html.EditorFor(model => model.DOB) @Html.ValidationMessageFor(model => model.DOB) </div> <div class = "editor-label"> @Html.LabelFor(model => model.Salary) </div> <div class = "editor-field"> @Html.EditorFor(model => model.Salary) @Html.ValidationMessageFor(model => model.Salary) </div> <p> <input type = "submit" value = "Save" /> </p> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") }
Этот вид будет выглядеть следующим образом в нашем приложении.
Delete.cshtml
В этом представлении отобразится форма для удаления существующего пользователя.
@model AdvancedMVCApplication.Models.UserModels @{ ViewBag.Title = "Delete"; } <h2>Delete</h2> <h3>Are you sure you want to delete this?</h3> <fieldset> <legend>UserModels</legend> <div class = "display-label"> @Html.DisplayNameFor(model => model.FirstName) </div> <div class = "display-field"> @Html.DisplayFor(model => model.FirstName) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.LastName) </div> <div class = "display-field"> @Html.DisplayFor(model => model.LastName) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.Address) </div> <div class = "display-field"> @Html.DisplayFor(model => model.Address) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.Email) </div> <div class = "display-field"> @Html.DisplayFor(model => model.Email) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.DOB) </div> <div class = "display-field"> @Html.DisplayFor(model => model.DOB) </div> <div class = "display-label"> @Html.DisplayNameFor(model => model.Salary) </div> <div class = "display-field"> @Html.DisplayFor(model => model.Salary) </div> </fieldset> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <p> <input type = "submit" value = "Delete" /> | @Html.ActionLink("Back to List", "Index") </p> }
Этот вид будет выглядеть следующим образом в нашем окончательном приложении.
Шаг 9 — Мы уже добавили модели и представления в наше приложение. Теперь, наконец, мы добавим контроллер для нашего представления. Щелкните правой кнопкой мыши папку «Контроллеры» и выберите «Добавить» → «Контроллер». Назовите его как UserController.
По умолчанию ваш класс Controller будет создан со следующим кодом —
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using AdvancedMVCApplication.Models; namespace AdvancedMVCApplication.Controllers { public class UserController : Controller { private static Users _users = new Users(); public ActionResult Index() { return View(_users.UserList); } } }
В приведенном выше коде метод Index будет использоваться при отображении списка пользователей на странице Index.
Шаг 10 — Щелкните правой кнопкой мыши по методу Index и выберите Create View, чтобы создать View для нашей страницы Index (в которой будут перечислены все пользователи и предоставлены опции для создания новых пользователей).
Шаг 11 — Теперь добавьте следующий код в UserController.cs. В этом коде мы создаем методы действий для различных пользовательских действий и возвращаем соответствующие представления, которые мы создали ранее.
Мы добавим два метода для каждой операции: GET и POST. HttpGet будет использоваться при извлечении данных и их рендеринге. HttpPost будет использоваться для создания / обновления данных. Например, когда мы добавляем нового пользователя, нам потребуется форма для добавления пользователя, которая является операцией GET. Как только мы заполним форму и отправим эти значения, нам понадобится метод POST.
//Action for Index View public ActionResult Index() { return View(_users.UserList); } //Action for UserAdd View [HttpGet] public ActionResult UserAdd() { return View(); } [HttpPost] public ActionResult UserAdd(UserModels userModel) { _users.CreateUser(userModel); return View("Index", _users.UserList); } //Action for Details View [HttpGet] public ActionResult Details(int id) { return View(_users.UserList.FirstOrDefault(x => x.Id == id)); } [HttpPost] public ActionResult Details() { return View("Index", _users.UserList); } //Action for Edit View [HttpGet] public ActionResult Edit(int id) { return View(_users.UserList.FirstOrDefault(x=>x.Id==id)); } [HttpPost] public ActionResult Edit(UserModels userModel) { _users.UpdateUser(userModel); return View("Index", _users.UserList); } //Action for Delete View [HttpGet] public ActionResult Delete(int id) { return View(_users.UserList.FirstOrDefault(x => x.Id == id)); } [HttpPost] public ActionResult Delete(UserModels userModel) { _users.DeleteUser(userModel); return View("Index", _users.UserList); } sers.UserList);
Шаг 12 — Последнее, что нужно сделать, это зайти в файл RouteConfig.cs в папке App_Start и изменить контроллер по умолчанию на Пользователь.
defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional }
Это все, что нам нужно для запуска нашего расширенного приложения.
Шаг 13 — Теперь запустите приложение. Вы сможете увидеть приложение, как показано на следующем снимке экрана. Вы можете выполнять все функции добавления, просмотра, редактирования и удаления пользователей, как мы видели на предыдущих скриншотах.