在第一个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框架 - 高级示例的更多相关文章

  1. 手写MVC框架（二）-代码实现和使用示例

    --------上一篇:手写MVC框架(一)-再出发----- 背景 书接上文,之前整理了实现MVC框架需要写哪些东西.这周粗看了一下,感觉也没多少工作量,所以就计划一天时间来完成.周末的时间,哪会那 ...

  2. DotnetBrowser高级教程-（4）使用MVC框架5-使用视图

    mvc框架理所当然的要支持view了,我们看下前面上传文件的地方,在展示页面时,我们使用了如下的代码: public string UploadImgPage() { return "< ...

  3. DotnetBrowser高级教程-（4）使用MVC框架3-文件上传

    网站有时候需要上传文件,本节以上传一张图片为例,在UserController.cs里添加如下代码: public string UploadImgPage() { return "< ...

  4. DotnetBrowser高级教程-（4）使用MVC框架1-搭建基础框架

    我们这次重点介绍下MVC框架的使用. 如果您之前使用过微软的mvc web框架,那么dotnetbrowser的mvc框架相信您也会很快上手,两者之间相似度约有80%. 所谓的mvc,以一个例子为例: ...

  5. DotnetBrowser高级教程-（4）使用MVC框架2-接收与返回模型

    在上一节,我们搭建了基本的mvc框架,这一节,我们将实现数据的接受与返回,具体操作如下: 1.新建Model目录,新增模型类Person.cs,代码如下: public class Person { ...

  6. Spring MVC 框架的架包分析，功能作用，优点

    由于刚搭建完一个MVC框架,决定分享一下我搭建过程中学习到的一些东西.我觉得不管你是个初级程序员还是高级程序员抑或是软件架构师,在学习和了解一个框架的时候,首先都应该知道的是这个框架的原理和与其有关j ...

  7. Spring 4 官方文档学习（十一）Web MVC 框架之配置Spring MVC

    内容列表: 启用MVC Java config 或 MVC XML namespace 修改已提供的配置 类型转换和格式化 校验 拦截器 内容协商 View Controllers View Reso ...

  8. 框架学习笔记：Unity3D的MVC框架——StrangeIoC

    作为从AS3页游走过来的人,看见StrangeIoC会额外亲切,因为StrangeIoC的设计和RobotLegs几乎一致,作为一款依赖注入/控制反转(IoC)的MVC框架,StrangeIoC除了使 ...

  9. 由浅入深吃透MVC框架，驯服烂代码

    MVC 已经成为客户端的主流编程框架,相信客户端工程师对它并不陌生,甚至在开发过程中,不通过思考都会自动使用 MVC 框架编程.但在工作过程中,发现许多小伙伴也只是使用 MVC,对于为什么这样使用并不 ...

随机推荐

  1. session与缓存

    分布式系统开发常见问题-1. session的复制与共享 2. 分布式缓存的设计 1. session的复制与共享 在web应用中,为了应对大规模访问,必须实现应用的集群部署.要实现集群部署主要需要实 ...

  2. putty 中文乱码解决方法

    解决putty.exe 中文乱码的问题 export NLS_LANG="AMERICAN_AMERICA.ZHS16GBK"

  3. CMSIS Example - osTimer osTimerCreate osTimerStart

    osTimerId timer; uint32_t cnt=; void timerHandler( void * arg ) { cnt++; osTimerStart( timer, ); } o ...

  4. Slony-I 文摘

    http://www.onlamp.com/pub/a/onlamp/2004/11/18/slony.html  我特别喜欢这篇文章,就进行了转载和翻译. Introducing Slony by  ...

  5. GPS原始经纬度转百度经纬度

    protected void runTest() throws Throwable { try { BaiduLocation bl = new BaiduLocation(); bl.gpsx = ...

  6. JS可以做什么，它的能力范围 View----------Request/Submit------------------Server

    View----------Request/Submit------------------Server javascript--------><script>标签方式(页面,动态插 ...

  7. Citrix 服务器虚拟化之二十八 XenApp6.5发布文档内容

    Citrix 服务器虚拟化之二十八  XenApp 6.5发布文档内容 XenApp可发布以下类型的资源向用户提供信息访问,这些资源可在服务器或桌面上虚拟化: 1)  服务器桌面:发布场中服务器的整个 ...

  8. TOJ3651确定比赛名次

    确定比赛名次   Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByte Total Submit: 23          ...

  9. jQuery 属性操作 - addClass() 方法

    使用 addClass() 和 removeClass() 来移除 class,并添加新的 class. <html> <head> <script type=" ...

  10. JAVA学习第五十七课 — IO流（十一）

    一.管道流 PipedInputStream 和 PipedOutPutStream 输入和输出能够直接进行连接.结合线程使用 管道流,顾名思义,写一个读一个.连成一个管子 API文档:管道输入流应该 ...