📜  MVC框架-高级示例

📅  最后修改于: 2020-10-21 04:52:40             🧑  作者: Mango


在第一章中,我们学习了控制器和视图如何在MVC中进行交互。在本教程中,我们将前进一步,学习如何使用模型以及如何创建高级应用程序来创建,编辑,删除。并在我们的应用程序中查看用户列表。

创建一个高级MVC应用程序

步骤1-选择文件→新建→项目→ASP.NET MVC Web应用程序。将其命名为AdvancedMVCApplication。单击确定。在下一个窗口中,选择“模板”作为“ Internet应用程序”,然后选择“ View Engine”作为Razor。观察到这次我们正在使用模板而不是Empty应用程序。

MVC新互联网项目

如下面的屏幕快照所示,这将创建一个新的解决方案项目。由于我们使用默认的ASP.NET主题,因此它带有示例视图,控制器,模型和其他文件。

MVC模型视图控制器

步骤2-构建解决方案并运行应用程序以查看其默认输出,如以下屏幕截图所示。

MVC示例Internet应用程序

步骤3-添加一个新模型,该模型将定义用户数据的结构。右键单击Models文件夹,然后单击添加→类。将此命名为UserModel,然后单击“添加”。

MVC添加模型步骤1

MVC添加模型步骤2

步骤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-右键单击模型,然后单击添加→类。将其命名为“用户”。这将在Models中创建users.cs类。将以下代码复制到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之后,我们将在模型中添加视图以查看用户,添加,编辑和删除用户。首先让我们创建一个View以创建一个用户。

步骤6-右键单击视图文件夹,然后单击添加→视图。

mvc_advanced_add_view

步骤7-在下一个窗口中,选择“视图名称”作为UserAdd,选择“视图引擎”作为Razor,然后选择“创建强类型视图”复选框。

MVC高级用户添加视图

步骤8-单击添加。默认情况下,这将创建以下CSHML代码,如下所示-

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "UserAdd"; 
}

UserAdd

@using (Html.BeginForm()) { @Html.ValidationSummary(true)
UserModels
@Html.LabelFor(model => model.FirstName)
@Html.EditorFor(model => model.FirstName) @Html.ValidationMessageFor(model => model.FirstName)
@Html.LabelFor(model => model.LastName)
@Html.EditorFor(model => model.LastName) @Html.ValidationMessageFor(model => model.LastName)
@Html.LabelFor(model => model.Address)
@Html.EditorFor(model => model.Address) @Html.ValidationMessageFor(model => model.Address)
@Html.LabelFor(model => model.Email)
@Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email)
@Html.LabelFor(model => model.DOB)
@Html.EditorFor(model => model.DOB) @Html.ValidationMessageFor(model => model.DOB)
@Html.LabelFor(model => model.Salary)
@Html.EditorFor(model => model.Salary) @Html.ValidationMessageFor(model => model.Salary)

}
@Html.ActionLink("Back to List", "Index")
@section Scripts { @Scripts.Render("~/bundles/jqueryval") }

如您所见,该视图包含字段的所有属性的视图详细信息,包括其验证消息,标签等。此视图在最终应用程序中将类似于以下内容。

MVC高级应用程序1

类似于UserAdd,现在我们将使用给定的代码添加下面给出的四个视图-

Index.cshtml

该视图将在“索引”页面上显示我们系统中存在的所有用户。

@model IEnumerable  

@{ 
   ViewBag.Title = "Index"; 
}  

Index

@Html.ActionLink("Create New", "UserAdd")

@foreach (var item in Model) { }
@Html.DisplayNameFor(model => model.FirstName) @Html.DisplayNameFor(model => model.LastName) @Html.DisplayNameFor(model => model.Address) @Html.DisplayNameFor(model => model.Email) @Html.DisplayNameFor(model => model.DOB) @Html.DisplayNameFor(model => model.Salary)
@Html.DisplayFor(modelItem => item.FirstName) @Html.DisplayFor(modelItem => item.LastName) @Html.DisplayFor(modelItem => item.Address) @Html.DisplayFor(modelItem => item.Email) @Html.DisplayFor(modelItem => item.DOB) @Html.DisplayFor(modelItem => item.Salary) @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | @Html.ActionLink("Details", "Details", new { id = item.Id }) | @Html.ActionLink("Delete", "Delete", new { id = item.Id })

在我们的最终应用程序中,该视图将如下所示。

MVC高级应用程序2

Details.cshtml

当我们单击用户记录时,此视图将显示特定用户的详细信息。

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Details"; 
}  

Details

UserModels
@Html.DisplayNameFor(model => model.FirstName)
@Html.DisplayFor(model => model.FirstName)
@Html.DisplayNameFor(model => model.LastName)
@Html.DisplayFor(model => model.LastName)
@Html.DisplayNameFor(model => model.Address)
@Html.DisplayFor(model => model.Address)
@Html.DisplayNameFor(model => model.Email)
@Html.DisplayFor(model => model.Email)
@Html.DisplayNameFor(model => model.DOB)
@Html.DisplayFor(model => model.DOB)
@Html.DisplayNameFor(model => model.Salary)
@Html.DisplayFor(model => model.Salary)

@Html.ActionLink("Edit", "Edit", new { id = Model.Id }) | @Html.ActionLink("Back to List", "Index")

在我们的最终应用程序中,该视图将如下所示。

MVC高级应用程序详细信息

Edit.cshtml

该视图将显示编辑表单,以编辑现有用户的详细信息。

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Edit"; 
}  

Edit

@using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true)
UserModels @Html.HiddenFor(model => model.Id)
@Html.LabelFor(model => model.FirstName)
@Html.EditorFor(model => model.FirstName) @Html.ValidationMessageFor(model => model.FirstName)
@Html.LabelFor(model => model.LastName)
@Html.EditorFor(model => model.LastName) @Html.ValidationMessageFor(model => model.LastName)
@Html.LabelFor(model => model.Address)
@Html.EditorFor(model => model.Address) @Html.ValidationMessageFor(model => model.Address)
@Html.LabelFor(model => model.Email)
@Html.EditorFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email)
@Html.LabelFor(model => model.DOB)
@Html.EditorFor(model => model.DOB) @Html.ValidationMessageFor(model => model.DOB)
@Html.LabelFor(model => model.Salary)
@Html.EditorFor(model => model.Salary) @Html.ValidationMessageFor(model => model.Salary)

}
@Html.ActionLink("Back to List", "Index")
@section Scripts { @Scripts.Render("~/bundles/jqueryval") }

该视图在我们的应用程序中将如下所示。

MVC高级应用程序详细信息

Delete.cshtml

该视图将显示删除现有用户的表单。

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Delete"; 
} 

Delete

Are you sure you want to delete this?

UserModels
@Html.DisplayNameFor(model => model.FirstName)
@Html.DisplayFor(model => model.FirstName)
@Html.DisplayNameFor(model => model.LastName)
@Html.DisplayFor(model => model.LastName)
@Html.DisplayNameFor(model => model.Address)
@Html.DisplayFor(model => model.Address)
@Html.DisplayNameFor(model => model.Email)
@Html.DisplayFor(model => model.Email)
@Html.DisplayNameFor(model => model.DOB)
@Html.DisplayFor(model => model.DOB)
@Html.DisplayNameFor(model => model.Salary)
@Html.DisplayFor(model => model.Salary)
@using (Html.BeginForm()) { @Html.AntiForgeryToken()

| @Html.ActionLink("Back to List", "Index")

}

在我们的最终应用程序中,该视图将如下所示。

MVC高级应用程序详细信息删除

步骤9-我们已经在我们的应用程序中添加了模型和视图。现在,最后我们将为视图添加一个控制器。右键单击Controllers文件夹,然后单击添加→控制器。将其命名为UserController。

MVC高级添加控制器

默认情况下,将使用以下代码创建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方法。

步骤10-右键单击Index方法,然后选择Create View为我们的Index页面创建一个View(将列出所有用户并提供创建新用户的选项)。

MVC高级添加索引视图

步骤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-最后要做的是转到App_Start文件夹中的RouteConfig.cs文件,并将默认控制器更改为User。

defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional } 

这就是我们启动和运行高级应用程序所需要的。

步骤13-现在运行该应用程序。您将能够看到一个应用程序,如以下屏幕截图所示。您可以执行添加,查看,编辑和删除用户的所有功能,如我们在前面的屏幕快照中所见。

MVC高级添加索引决赛