一步一步创建ASP.NET MV3应用程序

概述

主要是建立一个CRUD的用户列表应用程序,效果如下:

创建应用程序

打开Visual Studio2010创建一个ASP.NET MVC3 的应用程序，命名为"Mvc3Razor".

在新建ASP.NET MVC3项目对话框中，选择Internet Application,选择视图引擎为"Razor”,然后点击OK完成创建,由于在本项目中您不需要用到membership,所以您能删除所有相关联的membership以及登陆文件,在解决方案资源管理器里,删除如下文件:

Controllers/AccountController

Models/AccountModels

Views/Shared/_LogOnPartial

Views/Account (and all the files in this directory)

用如下代码替换_Layout.cshtml的相应位置代码

<div id="logindisplay" 
> 
   Login Disabled 



</div>

增加模型层文件

在解决方案资源管理中,右击Models文件夹,选择增加，然后选择类,类名叫"UserModel”

用如下代码替换UserModel类里的内容:

using System.ComponentModel.DataAnnotations; 
using System.Collections.Generic; 
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" }); 
            _usrList.Add(new UserModel { UserName = "AnnB", FirstName = "Ann", LastName = "Beebe", City = "Boston" }); 
        } 
        public List _usrList = new List(); 
        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); 
                } 
            } _usrList.Add(umToUpdate); 
        } 
        public void Remove(string usrName) 
        { 
            foreach (UserModel um in _usrList) 
            { 
                if (um.UserName == usrName) 
                { 
                    _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; 
        } 
    } 
}

打开HomeController类,添加using语句引用

using Mvc3Razor.Models;

在控制器里添加对Users的引用

public class HomeController : Controller 
    { 
        private static Users _usrs = new Users(); 

Build应用程序,以至于user模型在后面编写代码中有效

创建默认视图

下一步是增加一个Action方法和一个视图去显示users.删除/Home下存在的Index页面,在HomeController类里，用如下代码替换Index方法里的内容：

return View(_usrs._usrList); 

在Index方法里点击右键，选择添加视图

选择创建强类型选项,选择类Mvc3Razor.Models.UserModel，视图引擎设置为Razor，View content设置为List，点击添加,运行项目出现如下：

打开Index.cshtml文件，替换Edit,Delete,Details的ActionLink为如下:

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

用户名作为编辑，详细，删除等的选择记录列

创建详细视图

添加如下代码到Home控制器

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

像上面步骤一样，在这个Action里右键选择添加视图，但是视图类型选择Details,其他和上面那个一样，运行应用程序，就可观看每个条目的详细信息

创建编辑视图

添加如下代码到Home控制器里

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

        } 
        [HttpPost] 
        public ViewResult Edit(UserModel um) 
        { 
            if (!TryUpdateModel(um)) 
            { 
                ViewModel.updateError = "Update Failure"; 
                return View(um); 
            } 
            _usrs.Update(um); 
            return View("Details", um); 
        }

添加视图，但是视图内容选择编辑，运行应用程序就可以编辑，但是用户名是不能更改，为只读。所以打开Edit.cshtml文件，修改为

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
    @Html.Hidden("UserName", Model.UserName) 
    
     @Html.LabelFor(model => model.UserName) 
          @*  
            @Html.TextBoxFor(model => model.UserName)   
            @Html.ValidationMessageFor(model => model.UserName) 
         *@ 
        @Html.DisplayFor(model => model.UserName) 

其中@*表示注释

允许客户端验证

打开_Layout.cshtml，修改Head之间的内容如下：

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

创建创建和删除视图

操作和前面几个视图是一样的，也是在Home控制器里添加如下代码，添加视图的时候选择相应的视图内容为创建，和删除

public ViewResult Create() 
       { 
           return View(new UserModel()); 
       } 
       [HttpPost] 
       public ViewResult Create(UserModel um) 
       { 
           if (!TryUpdateModel(um)) 
           { 
               ViewModel.updateError = "Create Failure"; 
               return View(um); 
           } 
           _usrs.Create(um); 
           return View("Details", um); 
       } 
       public ViewResult Delete(string id) 
       { 
           return View(_usrs.GetUser(id)); 
       } 
       [HttpPost] 
       public RedirectToRouteResult Delete(string id, FormCollection collection) 
       { 
           _usrs.Remove(id); 
           return RedirectToAction("Index"); 
       }

至此一个CRUD的MVC3项目就完成了。
您可以下载本教程的源码：http://download.csdn.net/source/2827170