MVC Framework - przykład zaawansowany
W pierwszym rozdziale dowiedzieliśmy się, jak kontrolery i widoki współdziałają w MVC. W tym samouczku zrobimy krok naprzód i nauczymy się, jak korzystać z modeli i tworzyć zaawansowaną aplikację do tworzenia, edytowania i usuwania. i przeglądaj listę użytkowników w naszej aplikacji.
Utwórz zaawansowaną aplikację MVC
Step 1- Wybierz opcję Plik → Nowy → Projekt → Aplikacja internetowa ASP.NET MVC. Nazwij go AdvancedMVCApplication. Kliknij OK. W następnym oknie wybierz opcję Szablon jako aplikacja internetowa i Wyświetl aparat jako Razor. Zauważ, że tym razem używamy szablonu zamiast pustej aplikacji.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_new_internet_project.jpg)
Spowoduje to utworzenie nowego projektu rozwiązania, jak pokazano na poniższym zrzucie ekranu. Ponieważ używamy domyślnego motywu ASP.NET, zawiera on przykładowe widoki, kontrolery, modele i inne pliki.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_model_view_controller.jpg)
Step 2 - Skompiluj rozwiązanie i uruchom aplikację, aby wyświetlić jej domyślne dane wyjściowe, jak pokazano na poniższym zrzucie ekranu.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_sample_internet_application.jpg)
Step 3- Dodaj nowy model, który zdefiniuje strukturę danych użytkowników. Kliknij prawym przyciskiem myszy folder Modele i kliknij Dodaj → Klasa. Nazwij to UserModel i kliknij Dodaj.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_add_model_step_1.jpg)
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_add_model_step_2.jpg)
Step 4 - Skopiuj następujący kod w nowo utworzonym 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; }
}
}
W powyższym kodzie określiliśmy wszystkie parametry, które posiada model użytkownika, ich typy danych i walidacje, takie jak wymagane pola i długość.
Teraz, gdy nasz model użytkownika jest gotowy do przechowywania danych, utworzymy plik klasy Users.cs, który będzie zawierał metody do przeglądania użytkowników, dodawania, edytowania i usuwania użytkowników.
Step 5- Kliknij prawym przyciskiem myszy Modele i kliknij Dodaj → Klasa. Nazwij go jako Użytkownicy. Spowoduje to utworzenie klasy users.cs w modelach. Skopiuj następujący kod z klasy 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;
}
}
}
}
}
Gdy już będziemy mieli nasze UserModel.cs i Users.cs, dodamy widoki do naszego modelu w celu przeglądania użytkowników, dodawania, edytowania i usuwania użytkowników. Najpierw stwórzmy Widok, aby utworzyć użytkownika.
Step 6 - Kliknij prawym przyciskiem myszy folder Widoki i kliknij Dodaj → Widok.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_add_view.jpg)
Step 7 - W następnym oknie wybierz opcję Wyświetl nazwę jako UserAdd, Wyświetl silnik jako Razor i zaznacz pole wyboru Utwórz widok o jednoznacznie określonym typie.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_user_add_view.jpg)
Step 8- Kliknij Dodaj. Spowoduje to domyślne utworzenie następującego kodu CSHML, jak pokazano poniżej -
@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")
}
Jak widać, ten widok zawiera szczegóły widoku wszystkich atrybutów pól, w tym ich komunikaty walidacyjne, etykiety itp. Ten widok będzie wyglądał następująco w naszej ostatecznej aplikacji.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_application_1.jpg)
Podobnie jak w przypadku UserAdd, teraz dodamy cztery kolejne widoki podane poniżej z podanym kodem -
Index.cshtml
Ten widok wyświetli wszystkich użytkowników obecnych w naszym systemie na stronie indeksu.
@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>
Ten widok będzie wyglądał następująco w naszej ostatecznej aplikacji.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_application_2.jpg)
Details.cshtml
W tym widoku zostaną wyświetlone szczegóły konkretnego użytkownika, gdy klikniemy rekord użytkownika.
@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>
Ten widok będzie wyglądał następująco w naszej ostatecznej aplikacji.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_application_details.jpg)
Edit.cshtml
W tym widoku zostanie wyświetlony formularz edycji umożliwiający edycję szczegółów istniejącego użytkownika.
@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")
}
W naszej aplikacji ten widok będzie wyglądał następująco.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_application_details_edit.jpg)
Usuń.cshtml
W tym widoku zostanie wyświetlony formularz do usunięcia istniejącego użytkownika.
@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>
}
Ten widok będzie wyglądał następująco w naszej ostatecznej aplikacji.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_application_details_delete.jpg)
Step 9- Dodaliśmy już modele i widoki w naszej aplikacji. Teraz w końcu dodamy kontroler do naszego widoku. Kliknij prawym przyciskiem myszy folder Kontrolery i kliknij Dodaj → Kontroler. Nazwij go UserController.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_add_controller.jpg)
Domyślnie Twoja klasa kontrolera zostanie utworzona z następującym kodem -
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);
}
}
}
W powyższym kodzie metoda Index zostanie wykorzystana podczas renderowania listy użytkowników na stronie Index.
Step 10 - Kliknij prawym przyciskiem myszy metodę Index i wybierz opcję Utwórz widok, aby utworzyć widok dla naszej strony indeksu (która wyświetli listę wszystkich użytkowników i zapewni opcje tworzenia nowych użytkowników).
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_add_index_view.jpg)
Step 11- Teraz dodaj następujący kod w pliku UserController.cs. W tym kodzie tworzymy metody akcji dla różnych działań użytkownika i zwracamy odpowiednie widoki, które stworzyliśmy wcześniej.
Dodamy dwie metody dla każdej operacji: GET i POST. HttpGet będzie używany podczas pobierania danych i renderowania ich. HttpPost będzie używany do tworzenia / aktualizowania danych. Na przykład, kiedy dodajemy nowego użytkownika, będziemy potrzebować formularza do dodania użytkownika, który jest operacją GET. Po wypełnieniu formularza i przesłaniu tych wartości będziemy potrzebować metody 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);
Step 12 - Ostatnią rzeczą do zrobienia jest przejście do pliku RouteConfig.cs w folderze App_Start i zmiana domyślnego kontrolera na User.
defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional }
To wszystko, czego potrzebujemy, aby uruchomić i uruchomić naszą zaawansowaną aplikację.
Step 13- Teraz uruchom aplikację. Będziesz mógł zobaczyć aplikację, jak pokazano na poniższym zrzucie ekranu. Możesz wykonywać wszystkie funkcje dodawania, przeglądania, edycji i usuwania użytkowników, jak widzieliśmy na wcześniejszych zrzutach ekranu.
![](https://post.nghiatu.com/assets/tutorial/mvc_framework/images/mvc_advanced_add_index_final.jpg)