一步一步创建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