3.使用 Razor 和非介入式 JavaScript 创建 MVC 3 应用程序

英语好的朋友请看官方教程：Creating a MVC 3 Application with Razor and Unobtrusive JavaScript

本片教程是学习怎么通过ASP.NET MVC Razor视图引擎模板创建一个用户列表的简单应用程序的实例。这个小程序用到了新的视图引擎Razor和Visual Studio 2010 ASP.NET MVC3.0来模拟一个可以创建，编辑和删除的用户列表。

这个教程描述了利用ASP.NET MVC 3.0框架怎么一步一步的,构建用户列表实例示范程序。

概述

你将创建一个简单的用户列表网站。用户可以新建，编辑和查看用户详细信息。

创建web应用程序

打开Visual Studio 2010 创建一个新的项目,选择"ASP.NET MVC 3 Web Application"模板，然后修改项目名称为"Mvc3Razor"。然后点击"OK"。

然后出现New ASP.NET MVC 3 Project 对话框，选择Internet Application，选择Razor视图引擎，然后点击OK。

因为在本教程中您将不涉及membership方面的知识，所以可以删除下列所有和登录有关的文件，在解决方案中，可以移除下列文件和文件夹：

• Controller\AccountController
• Models\AccountModels
• Views\Shared\_LogOnPartial
• Views\Account(文件夹内的所有的文件)

编辑_Layout.cshtml文件替换id属性为logindisplay的<div>的内容为Login Disabled。

<div id="logindisplay"> Login Disabled </div>

 

增加模型

在解决方案中右单击Models文件夹选择添加Class。

命名为UserModel，替换里面的内容为下面的代码。（如果想学习可以自己敲入。编程这样的事，就是多打代码。看一遍不如打一遍）。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace Mvc3Razor.Models
{
    public class UserModel
    {
        [Required]
        [StringLength(6, MinimumLength = 3)]
        [Display(Name = "User Name")]
        [RegularExpression(@"(\s)+", ErrorMessage = "White space is not allowed")]
        [ScaffoldColumn(false)]
        public string UserName { get; set; }

        [Required]
        [StringLength(8, MinimumLength = 3)]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required]
        [StringLength(9, MinimumLength = 2)]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Required()]
        public string City { get; set; }

        public class Users 
        {
            public Users()
            { 
                usrList.Add(new UserModel{ UserName = "BenM",FirstName = "Ben", LastName="Miller",City = "Seattle"});
            }

            public List<UserModel> usrList = new List<UserModel>();

            public void Update(UserModel umToUpdate)

            {
                foreach (UserModel um in usrList)
                {
                    if (um.UserName == umToUpdate.UserName)
                    {
                        usrList.Remove(um);
                        usrList.Add(umToUpdate);
                        break;
                    }
                }
            }

            public void Create(UserModel umToUpdate)
            {
                foreach (UserModel um in usrList)
                {
                    if (um.UserName == umToUpdate.UserName)
                        throw new System.InvalidOperationException("Duplicat username:" + um.UserName);
                }
            }

            public void Remove(string userName)
            {
                foreach (UserModel um in usrList)
                {
                    if (um.UserName == userName)
                    {
                        usrList.Remove(um);
                        break;
                    }
                }
            }

            public UserModel GetUser(string uid)
            {
                UserModel usrMdl = null;
                foreach (UserModel um in usrList)
                {
                    if (um.UserName == uid)
                    {
                        usrMdl = um;
                    }
                }
                return usrMdl;
            }
        }
    }
}

 

UserModel类描述了用户成员的每一个属性还包括一些在DataAnnotations命名空间中的特性，这些特性为程序提供自动在客户端和服务器端的验证。

打开HomeController类，引入一个命名空间以便可以用UserModel类。

using Mvc3Razor.Models; 

       public class HomeController : Controller {

        // The __usrs class is replacement for a real data access strategy.
        private static Users _usrs = new Users();

 

在这个教程中，用户类是一个简化的内存中的数据库。在实际应用中你将会用一个数据库存储用户的信息。在HomeController文件的第一行引入Mvc命名空间如下面所示：

using System.Web.Mvc;
using Mvc3Razor.Models;
namespace Mvc3Razor.Controllers {       
    public class HomeController : Controller {

        // The __usrs class is replacement for a real data access strategy.
        private static Users _usrs = new Users();

 

然后先build下以便下一步的时候用户模型是可以用的。

创建默认的视图

这个步骤将介绍为一个action添加一个视图以便现实所有的用户。删除掉存在的Views\Home\Index文件，然后然后创建一个Index文件。 return View(_usrs.usrList); 在View(_usr.usrList)方法内右单击 Add View。

 

弹出"Add View"窗口，选择"Create a strongly-typed view "（创建强类型视图）选项，选择Mvc3Razor.Models.UserModel.如果你下拉列表框为空的话请先编译一遍，刚才的编译就是为了这里可以看到view data class。视图引擎选Razor，scoffold template选List然后点击添加。如下图所示：  

会为你生成新的Views\Home\Index文件并把数据传递到index视图中， 但是Create New Edit ，Details和Delete按钮都不能工作，但是其他的功能是有的，你可以看到一个列表单  

打开index.cshtml文件然后替换下面的代码为：

@Html.ActionLink("Edit", "Edit", new {  id=item.UserName  }) |
@Html.ActionLink("Details", "Details", new {  id=item.UserName  }) |
@Html.ActionLink("Delete", "Delete", new {  id=item.UserName  }) 

 

在这里用户名就例如ID去Edit，delete 和 details

创建Details的视图

这一步我们将在添加一个视图用来显示用户的详细信息， 然后在HomeController中增加一个Details方法。

public ViewResult Details(string id) {
    return View(_usrs.GetUser(id));
}

 

然后同样的在View(_usrs.GetUser(id))中右单击然后选择"Add View"然后 在类型中选择Mvc3Razor.Models.UserModel，然后模板选择"Details"然后点击添加。运行程序选择一行点击details查看它的每一个属性。

创建Edit视图

把下面的代码加入HomeController中。

public ViewResult Edit(string id) {
    return View(_usrs.GetUser(id));
}

[HttpPost]
public ViewResult Edit(UserModel um) {

    if (!TryUpdateModel(um)) {
        ViewBag.updateError = "Update Failure";
        return View(um);
    }

    // ToDo: add persistent to DB.
    _usrs.Update(um);
    return View("Details", um);
}

然后在增加一个view只是在选择Scoffold template的时候选择Edit就可以了。

运行程序然后选择一条用户信息，点击编辑，如果你编辑的字段有DataAnnotation约束的话请不要违反，那样的话，你如果提交表单，你将会看到验证错误。例如你如果改变某个用户的FirstName "Ann"改变为"A"，当你提交表单的时候，会显示下面的这个错误：

The field First Name must be a string with a minimum length of 3 and a maximum length of 8.

在本篇教程中，将用户的名字作为主键，所以用户名是不能改变的，在Edit.cshtml文件中，在Html.BeginForm后面，把用户名作为一个隐藏字段，这样的话可以把数据传递到model层，例如下面的代码片段:

<h2>Edit</h2>
    @using (Html.BeginForm()) {
        @Html.Hidden("UserName", Model.UserName)

 

把@Html.TextBoxFor(model=>model.UserName)和@Html.ValidationMessageFor(model=>model.UserName)把这两段代码注释掉替代为@Html.DisplayFor(model=>model.UserName)，注意在Razor中注释多行代码用（@* *@）.

<div class="editor-label">
  @Html.LabelFor(model => model.UserName)
</div>

<div class="editor-field">
@*
  @Html.TextBoxFor(model => model.UserName)
  @Html.ValidationMessageFor(model => model.UserName)
*@
@Html.DisplayFor(model => model.UserName)
</div>

 

开启客户端验证

在ASP.NET MVC3中开启客户端验证，你必须设置两个标志和引用3个javascript文件。 打开应用程序Web.config 文件，然后修改appsetting节点中 ClientValidationEnabled和UnobtrusiveJavaScriptEnabled的value为true，如果默认是true则不用修改，下面是具体的代码：

<appSettings>
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
 </appSettings>

 

设置UnobtrusiveJavaScriptEnabled为true，开启非介入是Ajax和客户端验证，当你开启非介入式验证，验证规则变成Html5的属性，Html 5属性名称只允许有小写字母和数字和波折号， 设置ClientValidationEnabled为true是为了开启客户端验证，在ASP.NET MVC应用程序中的web.config文件中设置这些keys，你可以为整个应用程序开启客户端的验证和非介入式的javascript，当然你也可以在控制器中通过以下代码开启和禁用这些设置。

HtmlHelper.ClientValidationEnabled = true; 
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

 

你也需要把javascript文件包含在视图内，一个简单的方法就是在Views\Shared\_Layout.cshtml文件中引入这些文件，在Head标记中添加如下：

<head>
  <title>@View.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>

 

微软ajax内容分发网（CDN-Content Delivery Network）络承载了前两个jquery脚本，得益于微软的ajax CDN，你可以提高你的应用程序的性能。 运行程序然后点击编辑连接，然后右单击浏览器查看源代码，你会发现源代码内有比较多的data-val属性，如果说客户端非介入式验证已经开启的话，在input控件中，会生成data-val属性为true的属性并会触发非介入式验证（估计也是利用$.(input[data-val=true])然后选取这个元素验证）例如，如果城市这个字段有必填约束，在html源代码中有如下代码：

<div class="editor-field">
  <input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
  <span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>

 

每一个客户端验证，一个特性会增加一个属性类似data-val-rulename="message"，用之前展现过的City这个字段，这个必填字段在客户端会按规则会生成一个data-val-required和一个提示信息（The City fiel is required）。运行这个程序，点击编辑用户，然后清空city字段，然后点击提交，你会看到客户端提示信息，如下图所示

 

简单的，每一个参数在客户端规则中，每个属性都有data-val-rulename-paramname=paramvalue.例如，FristName属性要求这个字段最少有3个字符组成，和最多8个字符，当你编辑用户的FirstName字段时会得到下面这段HTML代码：

 

<input data-val="true"         
       data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 8." 
       data-val-length-max="8" 
       data-val-length-min="3" 
       data-val-required="The First Name field is required." 
       id="FirstName" 
       name="FirstName" 
       type="text" 
       value="Ben" />

 

创建create视图

下一步是添加一个Create action方法和view视图，为了让用户创建一个新用户。在HomeController控制器中加入下面的方法。

 public ViewResult Create() {
            return View(new UserModel());
        }

        [HttpPost]
        public ViewResult Create(UserModel um) {

            if (!TryUpdateModel(um)) {
                ViewBag.updateError = "Create Failure";
                return View(um);
            }

            // ToDo: add persistent to DB.
            _usrs.Create(um);
            return View("Details", um);
        }

 

还是按照以前的步骤添加一个视图。但是scoffold template选择create

运行程序，然后选择Create连接，然后添加一个新用户，Create方法自动创建客户端和服务器端验证，然后试着在输入用户名的时候中间加一个空格例如"Ben X"，当我们这样填的话，会报这个错（White space is not allowed）。 增加一个Delete 方法 完成教程的过程中，在HomeController中添加Delete方法：

  public ViewResult Delete(string id) {
            return View(_usrs.GetUser(id));
        }

        [HttpPost]
        public RedirectToRouteResult Delete(string id, FormCollection collection) {
            _usrs.Remove(id);
            return RedirectToAction("Index");
        }

 

按上面的步骤增加一个Delete视图，然后设置scoffold template 为Delete 。

到现在你就已经创建一个简单的但是功能完善的并且带验证的ASP.NET MVC 3 应用程序。