上一篇:MVC 概念(一)
不多说了,去微软找了一个例子---任务列表应用程序,实践了一下。
准备工作
需要安装 Visual Studio 2008 或 Visual Web Developer 2008 Express 来构建 ASP.NET MVC 应用程序。还需要下载 ASP.NET MVC Framework。
如果没有 Visual Studio 2008,可以从下面的网址下载 90 天试用版:
http://msdn.microsoft.com/en-us/vs2008/products/cc268305.aspx
另外,也可以使用 Visual Web Developer Express 2008 创建 ASP.NET MVC 应用程序。如果决定使用 Visual Web Developer Express,则必须安装 Service Pack 1。可以从以下网址下载带有 Service Pack 1 的 Visual Web Developer 2008 Express:
安装 Visual Studio 2008 或 Visual Web Developer 2008 后,需要安装 ASP.NET MVC Framework。可以从以下网址下载 ASP.NET MVC Framework:
任务列表应用程序
我们将创建一个非常简单的任务列表应用程序。这一简单的任务列表应用程序将执行以下三项任务:
1.列出一系列任务
2.创建新任务
3.标记某项任务已完成
为了尽量简单,我们将利用极少几项 ASP.NET MVC Framework 功能来构建应用程序。例如,我们不会使用 Test-Driven Development 或 HTML Helper 方法。
创建项目
我们首先在 Visual Studio 2008 中创建一个新的 ASP.NET MVC Web Application 项目。选择菜单选项 File, New Project,然后将看到如图 1 所示的 New Project 对话框。选择偏爱的编程语言(Visual Basic 或 Visual C#)并选择 ASP.NET MVC Web Application 项目。将项目命名为 TaskList 并单击 OK 按钮。
图 1:
每当创建新的 ASP.NET MVC Web Application 项目时,Visual Studio 都会提示您创建单独的单元测试项目。将出现如图 2 所示的对话框。在本教程中,由于时间关系我们将不创建测试(对此表示遗憾),因此选择 No 选项并单击 OK 按钮。
ASP.NET MVC 应用程序有一系列标准文件夹:Models、Views 和 Controllers 文件夹。可以在 Solution Explorer 窗口中看到这一系列文件夹。我们需要向 Models、Views 和 Controllers 文件夹添加文件以构建任务列表应用程序。
当使用Visual Studio 创建新的ASP.NET MVC 应用程序时,可以使用示例应用程序。因为我们想要从头开始,所以需要删除示例应用程序的一些内容。需要删除以下文件和文件夹:
Controllers/HomeController.cs
Views/Home
添加HomeController代码:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
// Display a list of tasks
public ActionResult Index()
{
return View();
}
// Display a form for creating a new task
public ActionResult Create()
{
return View();
}
// Add a new task to the database
public ActionResult CreateNew()
{
return RedirectToAction("Index");
}
// Mark a task as complete
public ActionResult Complete()
{
// database logic
return RedirectToAction("Index");
}
// POST: /Home/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
下面是每个控制器操作的目的:
· Index() 要显示任务列表时调用此函数。
· Create() 要显示用于添加新任务的表单时调用此函数。
· CreateNew() 提交添加新任务的表单时调用此函数。控制器操作实际上是将新任务添加到数据库。
· Complete() 任务标记为完成时调用此函数。
值得注意: 控制器中的任何公共函数都公开为控制器操作, 在不需要调用函数时,不要意外地在控制器中创建公共函数。
创建控制器
通常,在构建 ASP.NET MVC 应用程序时,将首先构建控制器。每个对应于 ASP.NET MVC 应用程序发出的浏览器请求都由控制器处理。控制器包含负责响应请求的应用程序逻辑。
通过右键单击 Controllers 文件夹并选择菜单项 Add, New Item,向 Visual Studio 项目添加控制器。选择 MVC Controller Class 模板。将新的控制器命名为 HomeController.cs,然后单击 Add 按钮。
对于 TaskList 应用程序,我们将修改 HomeController 类,在其中添加程序清单 1 中的代码。修改后的控制器包含 4 个函数,分别为 Index()、Create()、CreateNew() 和 Complete()。每个函数对应一个控制器操作。
程序清单 1 HomeController.cs
1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Mvc;
6. using TaskList.Models;
7.
8. namespace TaskList.Controllers
9. {
10. public class HomeController : Controller
11. {
12. // Display a list of tasks
13. public ActionResult Index()
14. {
15. return View();
16. }
17. // Display a form for creating a new task
18. public ActionResult Create()
19. {
20. return View();
21. }
22. // Add a new task to the database
23. public ActionResult CreateNew()
24. {
25. return RedirectToAction("Index");
26. }
27. // Mark a task as complete
28. public ActionResult Complete()
29. {
30. // database logic
31. return RedirectToAction("Index");
32. }
33. }
34. }
下面是每个控制器操作的目的:
· Index() 要显示任务列表时调用此函数。
· Create() 要显示用于添加新任务的表单时调用此函数。
· CreateNew() 提交添加新任务的表单时调用此函数。控制器操作实际上是将新任务添加到数据库。
· Complete() 任务标记为完成时调用此函数。
我们需要向控制器添加其他逻辑以使其按希望的方式工作。
控制器中的任何公共函数都公开为控制器操作。请注意这一点。控制器操作是公开的。通过向 Web 浏览器地址栏键入正确的 URL,任何人都可以调用控制器操作。所以,在不需要调用函数时,不要意外地在控制器中创建公共函数。
请注意,控制器操作返回 ActionResult。ActionResult 代表操作将要执行的内容。前两个控制器操作 Index() 和 Create() 返回 MVC 视图。第三和第四个操作将用户重定向到另一个控制器操作。
下面是这些控制器操作的工作方式。在请求 Create() 控制器操作时,返回一个包含用于创建新任务的表单的视图。当提交此表单时,调用 CreateNew() 控制器操作。CreateNew() 控制器操作将新任务添加到数据库并将用户重定向到 Index() 控制器操作。Index() 控制器操作返回一个视图,显示整个任务列表。最后,如果完成一项任务,则调用 Complete() 控制器操作并更新数据库。Complete() 操作将用户重定向到 Index() 操作并更新显示的任务列表。
创建视图
视图包括发送到浏览器的 HTML 标记和内容。视图是 ASP.NET MVC 应用程序中最接近页面的内容。通过创建扩展名为 .aspx 的文件创建视图(还有cshtml,暂时不不去理会)。
必须将视图放在正确的位置。如果正在为 HomeController 的 Index() 操作方法创建视图,则必须将视图置于具有以下路径的文件夹内:
/Views/Home/Index.aspx
如果为 ProductController 的 Index() 操作方法创建视图,那么必须将视图放到以下文件夹中:
/Views/Product/Price.aspx
默认情况下,视图应该与其对应的控制器操作的名称相同。视图必须放置在与其控制器名称相对应的文件夹中。
在 Views 文件夹中右键单击子文件夹并选择菜单项 Add, New Item 可创建视图。选择 MVC View Page 模板以添加新视图。我们需要在下面的路径下创建两个视图:
/Views/Home/Index.aspx
/Views/Home/Create.aspx
/Views/Home/CreateNew.aspx
创建这两个视图后,Solution Explorer 窗口应该包含如图 3 所示的文件。
视图包括 HTML 内容和脚本。添加html和脚本如下:
创建数据库
这里我在SQLServer2008 中写的一段脚本
1:
if exists(select * from sys.sysdatabases where name='TaskListDB' and Status <>512)
begin
drop database TaskListDB
end
2:
Create Database TaskListDB
-- 创建表
use TaskListDB
go
create table tasks
(
id int identity(1,1) ,
Task Nvarchar(300) not null,
IsCompleted bit not null,
EntryDate DateTime not null default(getdate()),
Description Nvarchar(300) not null,
CONSTRAINT [PK_Keys] PRIMARY KEY CLUSTERED
(
id
)
)
创建模型
MVC 模型包含大量的应用程序和数据库访问逻辑。通常,将 MVC 应用程序包含的大多数类放在 Models 文件夹中。所有未包含在视图或控制器中的应用程序逻辑,都放在 Models 文件夹中。
在本教程中,我们将使用 LINQ to SQL 与上一节创建的数据库通信。我个人很喜欢 LINQ to SQL。但是,不是必须在 ASP.NET MVC 应用程序中使用 LINQ to SQL。如果愿意,也可以使用其他技术(如 NHibernate 或 Entity Framework)与数据库通信。
要使用 LINQ to SQL,必须首先在 Models 文件夹中创建自己的 LINQ to SQL 类。右键单击 Models 文件夹,选择 Add, New Item菜单项,然后选择 LINQ to SQL Classes模板项。将 LINQ to SQL 类命名为 TaskList.dbml 并单击 Add 按钮。完成此步骤后,将出现 Object Relational Designer。
我们需要创建表示 Tasks 数据库表的单个 LINQ to SQL 实体类。将 Tasks 数据库表从 Solution Explorer 窗口拖放到 Object Relational Designer 上。执行最后一步操作将创建新的名称为 Task 的 LINQ to SQL 实体类,如图 5 所示。单击 Save 按钮(软盘图标)保存新的实体。
改写代码:
控制器(HomeController):
public class HomeController : Controller
{
private TaskListDataContext db = new TaskListDataContext();
// Display a list of tasks
public ActionResult Index()
{
var tasks = from t in db.Tasks
orderby t.EntryDate
descending
select t;
return View(tasks.ToList());
}
// Display a form for creating a new task
public ActionResult Create()
{
return View();
}
// Add a new task to the database
public ActionResult CreateNew(string description)
{
// Add the new task to database
Tasks newTask = new Tasks();
newTask.Description = "test description";
newTask.IsCompleted = false;
newTask.EntryDate = DateTime.Now;
newTask.Task = "测试任务";
db.Tasks.InsertOnSubmit(newTask);
db.SubmitChanges();
return RedirectToAction("Index");
}
// Mark a task as complete
public ActionResult Complete(int id)
{
// database logic
var tasks = from t in db.Tasks where t.id == id select t;
foreach (Tasks match in tasks)
match.IsCompleted = true;
db.SubmitChanges();
return RedirectToAction("Index");
}
/// <summary>
/// POST: /Home/Create
/// 只是想说明一下,默认请求方式是Get;要想使用Post方式请求,需要显示指定
/// </summary>
/// <param name="collection"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
视图页面:
---------------------------------------------------------------------------------------------------------------------------------
Index.aspx(对应该HomeController控制器中Index()方法)
---------------------------------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Index</title>
</head>
<body>
<div>
<h1>
添加任务</h1>
<ul>
<% foreach (WT.Study.MVC.TaskListTest.Models.Tasks task in (IEnumerable)ViewData.Model)
{ %>
<li>
<% if (task.IsCompleted)
{%>
<del>
<%= task.EntryDate.ToShortDateString() %>
--
<%=task.Description%>
</del>
<% }
else
{%>
<a href="/Home/Complete/<%= task.id.ToString() %>">Complete</a>
<%= task.EntryDate.ToShortDateString() %>
--
<%=task.Description%>
<% }%>
</li>
<% } %>
</ul>
<br />
<br />
<a href="/Home/Create">Add new Task</a>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
Create.aspx(对应Create()方法)
---------------------------------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Index</title>
</head>
<body>
<div>
<h1>
添加任务</h1>
<ul>
<% foreach (WT.Study.MVC.TaskListTest.Models.Tasks task in (IEnumerable)ViewData.Model)
{ %>
<li>
<% if (task.IsCompleted)
{%>
<del>
<%= task.EntryDate.ToShortDateString() %>
--
<%=task.Description%>
</del>
<% }
else
{%>
<a href="/Home/Complete/<%= task.id.ToString() %>">Complete</a>
<%= task.EntryDate.ToShortDateString() %>
--
<%=task.Description%>
<% }%>
</li>
<% } %>
</ul>
<br />
<br />
<a href="/Home/Create">Add new Task</a>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
CreateNew.aspx(对应CreateNew ()方法)--页面上没显示,具体原因自己可想想。
---------------------------------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>CreateNew</title>
</head>
<body>
<div>
空页面
</div>
</body>
</html>
结果
1 直接运行,控制器运行Index(),将页面指定到Index.aspx。
2 添加任务(Add new Task),运行Create(),控件器指导跳转到Create.aspx
3 添加新任务 CreateNew(),无页面,控件页直接跳转到Index.aspx
总结:
对于新手而言,能明显感觉到的是:控件器与视图、Model强制分离,美工与开发人员可以各司其职,基本上不用像WebForm那样花时间在配合解决页面的展示问题。
Source:http://msdn.microsoft.com/zh-cn/dd408813