使用 MVC 进行 ASP.NET 应用程序开发
4.79/5 (22投票s)
一个使用 MVC 进行 ASP.NET 应用程序开发的示例。
概述
ASP.NET 提供了 MVC 框架，作为 ASP.NET Web Forms 模式的替代方案，用于开发 Web 应用程序。MVC（模型-视图-控制器）是一个轻量级、高度可测试的表示层框架，它集成了现有的 ASP.NET 功能，如母版页和基于成员身份的身份验证。
引言
System.Web.Mvc 命名空间用于 ASP.NET MVC。MVC 是一个标准的设计模式。MVC 包含以下组件：
- 控制器 (Controller)
- 模型
- 视图
处理应用程序传入请求、检索模型数据，然后指定返回响应给客户端的视图模板的类。
代表应用程序数据并使用验证逻辑来强制执行这些数据业务规则的类。
应用程序用于动态生成 HTML 响应的模板文件。
背景
在此演示中，我将使用 SQL Server Management Studio 2005 设计一个数据库。我将开发一个 ASP.NET MVC 应用程序，并描述其所有部分。
开始吧
打开 SQL Management Studio 2005。创建一个数据库并将其命名为 *Inventory*。设计一个如下所示的数据库表：
- 打开 Microsoft Visual Studio 2010
- 创建一个新项目（文件 > 新建 > 项目 > Visual C#）：ASP.NET MVC 3 Web Application
- 将其命名为 *ASPNETMVCApplication*
- 点击 OK 按钮
- 为 **Internet Application** 选择一个模板
- 视图引擎选择 **Razor**
- 创建单元测试项目 **取消勾选**
- 点击 OK 按钮
默认项目将被创建。现在 **添加程序集引用**。我们将使用一种称为实体框架的 .NET Framework 数据访问技术。实体框架（通常简称为“EF”）支持一种称为代码优先的开发模式。代码优先允许您通过编写简单的类来创建模型对象。然后，您可以根据您的类动态创建数据库，从而实现非常干净且快速的开发流程。
我们将首先使用 NuGet 包管理器（由 ASP.NET MVC 3 自动安装）将 EFCodeFirst 程序集添加到 ASPNETMVCApplication 项目。此程序集允许我们使用代码优先方法。要添加 **实体框架** 引用：
从“工具”菜单中，选择“程序集包管理器”，然后选择“添加程序集包引用”。
在 **添加程序集包引用** 窗口中，点击 **联机**。
点击 **NuGet Official package source**。
找到 **EFCodeFirst**，然后点击 **install**。
点击 **I Accept**。实体框架将安装并向项目添加引用。
点击 **Close** 按钮。
添加模型类
- 在 **Solution Explorer** 中右键点击 **Models**
- 选择 **Add**
- 选择 **Class**
- 将其命名为 *Book.cs*
在 *Book.cs* 文件中添加以下属性：
namespace ASPNETMVCApplication.Models
{
public class Book
{
public Int64 Id { get; set; }
public String Title { get; set; }
public String ISBN { get; set; }
public Decimal Price { get; set; }
}
}
按照创建 *Book.cs* 的方式再添加一个类，并将其命名为 *BookDBContext.cs*。在 *BookDBContext.cs* 文件中添加一个 System.Data.Entity 命名空间引用。
using System.Data.Entity;
在 BookDBContext 类中添加以下代码。并使其继承自 DbContext 类，以便所有数据操作都可以由 Books 属性处理。
**注意**：属性名 Books 必须与数据库表名 *Books* 相同。
这是完整的代码
using System;
using System.Web;
using System.Data.Entity;
namespace ASPNETMVCApplication.Models
{
public class BookDBContext:DbContext
{
public DbSet<Book> Books { get; set; }
}
}
在 *web.config* 文件中添加一个连接字符串。请记住，连接字符串的名称必须与 BookDBContext 相同。
<connectionStrings>
<add name="BookDBContext"
connectionString="data source=Home-PC;
uid=sa;pwd=1234;Initial Catalog=Inventory"
providerName="System.Data.SqlClient" />
</connectionStrings>
添加控制器
- 在 **Solution Explorer** 中右键点击 **Controller**
- 选择 **Add**
- 选择 **Controller**
- 将其命名为 *BookController*
- 为创建、更新、删除和详细信息场景添加操作方法以 **检查**
这将添加以下代码：
namespace ASPNETMVCApplication.Controllers
{
public class BookController : Controller
{
//
// GET: /Book/
public ActionResult Index()
{
return View();
}
//
// GET: /Book/Details/5
public ActionResult Details(int id)
{
return View();
}
//
// GET: /Book/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Book/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: /Book/Edit/5
public ActionResult Edit(int id)
{
return View();
}
//
// POST: /Book/Edit/5
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: /Book/Delete/5
public ActionResult Delete(int id)
{
return View();
}
//
// POST: /Book/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
}
现在在 *BookController.cs* 文件中添加以下命名空间：
using System.Linq;
using ASPNETMVCApplication.Models;
在 BookController 类中声明 BookDBContext 类的一个全局实例变量。
BookDBContext _db = new BookDBContext();
在 Index() 方法中添加以下代码：
public ActionResult Index()
{
var books = from book in _db.Books
select book;
return View(books.ToList());
}
这是用于获取书籍的 LINQ 代码，books.ToList() 用于在视图中显示书籍列表。
现在右键点击 **Solution** 并选择 **Build** 来编译解决方案。
添加视图
- 在 **Index** 方法中右键点击
- 选择 **View**
- 创建强类型视图 **勾选**
- 选择 Model 类为 **Book (ASPNETMVCApplication.Models)**
- Scaffold 模板为 **List**
- 点击 OK 按钮
这将添加 *Index.cshtml* 文件。
@model IEnumerable<ASPNETMVCApplication.Models.Book>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th></th>
<th>
Title
</th>
<th>
ISBN
</th>
<th>
Price
</th>
</tr>
@foreach (var item in Model) {
<tr>
<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>
<td>
@item.Title
</td>
<td>
@item.ISBN
</td>
<td>
@String.Format("{0:F}", item.Price)
</td>
</tr>
}
</table>
现在，添加创建视图。
添加创建视图
- 右键点击 **Create** 方法
- 选择 **View**
- 创建强类型视图 **勾选**
- 选择 Model 类为 **Book (ASPNETMVCApplication.Models)**
- Scaffold 模板为 **Create**
- 点击 OK 按钮
这将添加 *Create.cshtml* 文件。
@model ASPNETMVCApplication.Models.Book
@{
ViewBag.Title = "Create";
}
<h2>Create</h2><script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script><script
src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Book</legend><div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ISBN)
</div>
<div class="editor-field">
@Html.EditorFor(model =>
现在在 BookController 类中的 Create 方法中添加以下代码：
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
Book book = new Book();
if (ModelState.IsValid)
{
book.Title = collection["Title"].ToString();
book.ISBN = collection["ISBN"].ToString();
book.Price = Convert.ToDecimal(collection["Price"]);
_db.Books.Add(book);
_db.SaveChanges();
return RedirectToAction("Index");
}
else
{
return View(book);
}
}
catch
{
return View();
}
}
现在我们将添加编辑视图。
添加编辑视图
- 右键点击 **Edit** 方法
- 选择 **View**
- 创建强类型视图 **勾选**
- 选择 Model 类为 **Book (ASPNETMVCApplication.Models)**
- Scaffold 模板为 **Edit**
- 点击 OK 按钮
这将添加 *Edit.cshtml* 文件。
@model ASPNETMVCApplication.Models.Book
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2><script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script><script
src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Book</legend>@Html.HiddenFor(model => model.Id)
<div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ISBN)
</div>
<div class="editor-field">
@Html.EditorFor(model =>
现在在 BookController 类中的 Edit 方法中添加以下代码：
public ActionResult Edit(int id)
{
Book book = _db.Books.Find(id);
if (book == null)
return RedirectToAction("Index");
return View(book);
}
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
var book = _db.Books.Find(id);
UpdateModel(book);
_db.SaveChanges();
return RedirectToAction("Index");
}
catch
{
ModelState.AddModelError("", "Edit Failure, see inner exception");
return View();
}
}
现在我们将添加详细信息视图。
添加详细信息视图
- 右键点击 **Edit** 方法
- 选择 **View**
- 创建强类型视图 **勾选**
- 选择 Model 类为 **Book (ASPNETMVCApplication.Models)**
- Scaffold 模板为 **Details**
- 点击 OK 按钮
这将添加 *Details.cshtml* 文件。
@model ASPNETMVCApplication.Models.Book
@{
ViewBag.Title = "Details";
}
<h2>Details</h2><fieldset>
<legend>Book</legend><div class="display-label">Title</div>
<div class="display-field">@Model.Title</div>
<div class="display-label">ISBN</div>
<div class="display-field">@Model.ISBN</div>
<div class="display-label">Price</div>
<div class="display-field">@String.Format("{0:F}", Model.Price)</div>
</fieldset>
<p>
@Html.ActionLink("Edit", "Edit", new { id=Model.Id }) |
@Html.ActionLink("Back to List", "Index")
</p>
将以下代码添加到 BookController 类的 Details 方法中。
public ActionResult Details(int id)
{
Book book = _db.Books.Find(id);
if (book == null)
return RedirectToAction("Index");
return View("Details", book);
}
现在我们将添加删除视图。
添加删除视图
- 右键点击 **Edit** 方法
- 选择 **View**
- 创建强类型视图 **勾选**
- 选择 Model 类为 **Book (ASPNETMVCApplication.Models)**
- Scaffold 模板为 **Delete**
- 点击 OK 按钮
这将添加 *Delete.cshtml* 文件。
@model ASPNETMVCApplication.Models.Book
@{
ViewBag.Title = "Delete";
}
<h2>Delete</h2><h3>Are you sure you want to delete this?</h3><fieldset>
<legend>Book</legend><div class="display-label">Title</div>
<div class="display-field">@Model.Title</div>
<div class="display-label">ISBN</div>
<div class="display-field">@Model.ISBN</div>
<div class="display-label">Price</div>
<div class="display-field">@String.Format("{0:F}", Model.Price)</div>
</fieldset>
@using (Html.BeginForm()) {
<p>
<input type="submit" value="Delete" /> |
@Html.ActionLink("Back to List", "Index")
</p>
}
将以下代码添加到 BookController 类的 Delete 方法中：
public ActionResult Delete(int id)
{
Book book = _db.Books.Find(id);
if (book == null)
return RedirectToAction("Index");
return View(book);
}
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
Book book = _db.Books.Find(id);
_db.Books.Remove(book);
_db.SaveChanges();
return RedirectToAction("Index");
}
现在运行应用程序。在 URL 中输入 */Book*，并记住您的端口号可能不同。
点击 _Create New Link_ 以添加新书。
通过这种方式，您可以编辑、删除和查看书籍的详细信息。
结论
本文将帮助您创建自己的健壮的 ASP.NET MVC 应用程序。
谢谢！