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

概述

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

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

创建应用程序

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

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

在新建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)

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

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

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

增加模型层文件

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

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

用如下代码替换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方法里点击右键,选择添加视图
一步一步创建ASP.NET MV3应用程序
选择创建强类型选项,选择类Mvc3Razor.Models.UserModel,视图引擎设置为RazorView content设置为List,点击添加,运行项目出现如下:
一步一步创建ASP.NET MV3应用程序

打开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