MVC框架 - 高级示例
在第一个MVC教程章中，我们学会了如何在MVC控制器和视图进行交互。在本教程中，我们将向前更进一步，学习如何使用模型创建高级应用程序来创建，编辑，删除用户，在我们的应用程序中查看列表。
下面是用来创建高级MVC应用程序的步骤
第1步：选择 File->New->Project->ASP.NET MVC Web应用. 并命名为：AdvancedMVCApplication. 单击确定。在接下来的窗口中，选择模板作为互联网应用程序和视图引擎为Razor。注意，我们这个时候使用的是模板，而不是一个空的应用程序。
这将创建一个新的解决方案的项目，如下图所示。由于我们使用的是默认的ASP.NET主题，它带有样本视图，控制器，模型和其他文件。
构建解决方案，并运行应用程序，看看它的默认输出，如下：
第2步：我们将增加一个新的模式，将定义的用户数据结构。右键单击Models文件夹，然后点击 Add->Class. 命名为UserModel，然后单击Add。
第3步：现在将以下代码复制到新创建的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; }
}
}
在上面的代码中，我们指定的用户模型验证所有的参数，其数据类型和如所需的字段和长度。
第4步：现在，我们有用户模型准备保存数据，现在创建一个类文件Users.cs 其中将包含用于查看用户，添加，编辑和删除用户的方法。右键单击模型，然后单击 Add->Class. 命名为：Users. 这将创建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;
}
}
}
}
}
第5步：一旦我们有UserModel.cs和Users.cs，将增加浏览模型查看，添加，编辑和删除用户。首先，让我们创建一个视图用来创建用户。右键单击Views文件夹，然后点击 Add->View.
在接下来的窗口中，选择视图名称为UserAdd，视图引擎为Razor，并选择创建一个强类型的视图复选框。
单击添加。在默认情况下这将创建下列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
该视图将显示所有存在于我们的系统中的用户在Index页面上。
@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>
}
此视图在我们最终的应用程序看起来像这样：
第6步：我们已经增加模型和视图在应用程序中。现在添加一个控制器，用于视图。 右键单击Controllers文件夹，然后点击 Add->Controller. 命名为： UserController.
默认情况下，控制器类将用下面的代码来创建：
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页面上。
第6步：右键单击Index方法，并选择创建视图来创建Index页面视图（其中会列出所有用户，并提供选项来创建新的用户）。
第7步：现在添加以下代码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);
}
第8步：最后要做的就是到App_Start文件夹找到RouteConfig.cs文件，并更改默认的控制器。
defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional }
第9步：下面是高级应用示例程序启动和运行。现在运行应用程序。将能够看到这样的应用程序，并可以执行添加，查看，编辑，删除用户，因为在前面的截图已经看到了所有功能
MVC框架 - 高级示例的更多相关文章
- 手写MVC框架（二）-代码实现和使用示例
--------上一篇:手写MVC框架(一)-再出发----- 背景 书接上文,之前整理了实现MVC框架需要写哪些东西.这周粗看了一下,感觉也没多少工作量,所以就计划一天时间来完成.周末的时间,哪会那 ...
- DotnetBrowser高级教程-（4）使用MVC框架5-使用视图
mvc框架理所当然的要支持view了,我们看下前面上传文件的地方,在展示页面时,我们使用了如下的代码: public string UploadImgPage() { return "< ...
- DotnetBrowser高级教程-（4）使用MVC框架3-文件上传
网站有时候需要上传文件,本节以上传一张图片为例,在UserController.cs里添加如下代码: public string UploadImgPage() { return "< ...
- DotnetBrowser高级教程-（4）使用MVC框架1-搭建基础框架
我们这次重点介绍下MVC框架的使用. 如果您之前使用过微软的mvc web框架,那么dotnetbrowser的mvc框架相信您也会很快上手,两者之间相似度约有80%. 所谓的mvc,以一个例子为例: ...
- DotnetBrowser高级教程-（4）使用MVC框架2-接收与返回模型
在上一节,我们搭建了基本的mvc框架,这一节,我们将实现数据的接受与返回,具体操作如下: 1.新建Model目录,新增模型类Person.cs,代码如下: public class Person { ...
- Spring MVC 框架的架包分析，功能作用，优点
由于刚搭建完一个MVC框架,决定分享一下我搭建过程中学习到的一些东西.我觉得不管你是个初级程序员还是高级程序员抑或是软件架构师,在学习和了解一个框架的时候,首先都应该知道的是这个框架的原理和与其有关j ...
- Spring 4 官方文档学习（十一）Web MVC 框架之配置Spring MVC
内容列表: 启用MVC Java config 或 MVC XML namespace 修改已提供的配置 类型转换和格式化 校验 拦截器 内容协商 View Controllers View Reso ...
- 框架学习笔记：Unity3D的MVC框架——StrangeIoC
作为从AS3页游走过来的人,看见StrangeIoC会额外亲切,因为StrangeIoC的设计和RobotLegs几乎一致,作为一款依赖注入/控制反转(IoC)的MVC框架,StrangeIoC除了使 ...
- 由浅入深吃透MVC框架，驯服烂代码
MVC 已经成为客户端的主流编程框架,相信客户端工程师对它并不陌生,甚至在开发过程中,不通过思考都会自动使用 MVC 框架编程.但在工作过程中,发现许多小伙伴也只是使用 MVC,对于为什么这样使用并不 ...
随机推荐
- [原创]Devexpress XtraReports 系列 4 创建多栏报表
昨天我们完成了 [原创]Devexpress XtraReports 系列 3 创建主从报表 今天我们继续学习新的一种报表模式:多栏报表.(Demo源码,数据库最后附上) 或许很多人会问什么是多栏报表 ...
- POJ3321 Apple Tree （树状数组）
Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 16180 Accepted: 4836 Descr ...
- c++中指针类型在c#中怎么对应？
int[] a=new int[5]; //取a[3]的地址 IntPtr addr=System.Runtime.InteropServices.Marshal.UnsafeAddrOfPinned ...
- Linux下查看文件和文件夹大小的df和du命令
转自:http://www.yayu.org/look.php?id=162 当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的选择. df可以查看一级文件夹大小.使用比 ...
- 集成Jenkins Notifier for Chrome到Jenkins CI
Jenkins也算是现在最流行的CI工具了,我们team也使用它来做持续化集成的工作.最近需要增加弹出式窗口来提醒相关人员job的状态,故选择Jenkins Notifier for Chrome这个 ...
- [置顶] Linux信号相关笔记
最近又温习了一遍Linux中的信号知识,发现有很多东西以前没有注意到,就通过这篇博客记录一下,巩固一下知识点. 一,信号基础: 信号是什么?为了回答这个问题,首先要从异常说起,这里的异常不是指c++/ ...
- C++学习之const整理总结
1什么是const? (const类型)常类型是指使用类型修饰符const说明的类型,常类型的变量或对象的值是不能被更新的.(但可以偷梁换柱进行更新) 2为什么引入const? const 推出的初始 ...
- Function.caller
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/caller 非标准 ...
- myeclipse中working Sets
最近myeclipse中的项目太多了,看起来老不爽,查找还不方便,发现这个working Sets还是挺好用的 接下来的步骤,太简单了有木有,就不写了 0.0
- linux下mysql开启慢查询
mysql中最影响速度的就是那些查询很慢的语句.这些慢的语句,可能是写的不够合理或者是大数据下多表的联合查询等等.所以我们要找出这些语句,分析原因,加以优化. 1.方法1:用命令开启慢查询 1).查看 ...