ASP.NET MVC创建TaskList应用程序

如果你使用过ASP或ASPNET你会发现ASPNET MVC和它们非常相似ASPNET MVC的呈现和ASP应用程序的页面非常相似就像传统的ASPNET Web窗体应用程序ASPNET MVC让你可以完全访问NET框架提供的语言和类

我希望通过本文让你感受到构建ASPNET MVC应用程序的过程和构建ASP应用程序或ASPNET Web窗体应用程序的相似之处和不同之处

任务列表应用程序

为了保持简洁我只创建一个非常简单的任务列表应用程序通过这个程序可以做下面三件事情

列出一套任务

创建新的任务

标记任务已完成

还是那句话为了保持简洁在构建任务列表应用程序时我只使用ASPNET MVC框架的少部分特性如我不会使用测试驱动开发方法或HTML辅助方法

预备

要构建ASPNET MVC应用程序要使用到Visual Studio 或Visual Web Developer Express同时还需要下载ASPNET MVC框架下载地址/mvc/可以从us/vs/products/ccaspx下载天试用期的Visual Studio 如果你决定使用Visual Web Developer Express必须得安装SP可以从x?FamilyId=BDBCCADFFDEBD&displaylang=en下载Visual Web Developer Express的SP包

创建一个ASPNET MVC Web应用程序项目

我们从在Visual Studio 中创建一个ASPNET MVC Web应用程序项目开始选择菜单项文件（File） > 新建项目（New Project）你就会看到如图所示的一个新建项目对话框选择你熟悉的编程语言（Visual Basic 或Visual C#)然后选择ASPNET MVC Web应用程序项目项目名称命名为Tasklist然后点击保存按钮

)thisstylewidth=; border= twffan=done>

图 新建项目对话框

无论你什么时候创建ASPNET MVC Web应用程序项目Visual Studio都会提示你附带创建一个独立的单元测试项目如图所示因为时间限制我们在本文中就不创建测试项目了因此选项No选项点击确定（Ok）按钮

image onmousewheel=javascript:return big(this) height= alt= src=http://imgeducitycn/img_///jpg width= onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done>

图 创建单元测试项目对话框

ASPNET MVC应用程序也有标准的文件夹模块（Models）视图（Views）和控制器（Controllers）文件夹在方案浏览器（Solution Explorer）窗口你应该可以看到这些文件夹我们也需要向modelsViews和Controllers文件夹中条件文件来完成我们的Tasklist应用程序

当你用Visual Studio创建一个新的ASPNET MVC应用程序时你会得到一个示例应用程序因为我们希望从零开始因此需要删除这些示例应用程序内容要将下面的文件和文件夹删除

Controllers\HomeControllercs

Views\Home

创建控制器

在构建ASPNET MVC应用程序时通常是从创建控制器开始的浏览器对ASPNET MVC应用程序的请求由控制器处理控制器包括应用程序逻辑负责响应对应的请求

在控制器文件夹上点右键选择添加 > 新项目再选项MVC控制器类模板将控制器命名为HomeControllervb点击添加按钮这样就在Visual Studio中添加了一个控制器

对于我们的Tasklist应用程序我们需要修改HomeController类让它包括清单中的代码修改后的控制器包括四个函数Index() Create() CreateNew() and Complete()每个函数对应一个控制器行为

清单 HomeControllervb

borderColorDark=#ffffff cellPadding= width= align=center borderColorLight=# border=>ee>

Public Class HomeController Inherits SystemWebMvcController Display a list of tasks Function Index() As ActionResult Return View() End Function Display a form for creating a new task Function Create() As ActionResult Return View() End Function Add a new task to the database Function CreateNew() As ActionResult Add the new task to database Return RedirectToAction(Index) End Function Mark a task as complete Function Complete() As ActionResult Return RedirectToAction(Index) End Function End Class

下面是每个控制器行为的目的

Index（）当你想显示任务清单时调用

Create（）当你想显示创建一个新任务的窗体时显示调用

CreateNew（）当创建一个新任务的窗体被提交时调用

这个控制器行为真实地把新任务添加到数据库中

Complete（）当一个新任务被标记为完成时调用

我们需要向我们的控制器行为中添加额外的逻辑以便它们能够按预期那样工作

控制器类中包括的任何一个公共函数都被当做一个控制器行为暴露在外注意控制器行为是暴露给所有人的任何人都可以在他们的浏览器地址栏中输入正确的URL来调用控制器行为因此当你不想让函数为公共调用就不要将其创建成公共函数

控制器行为返回一个行为结果（ActionResult）一个行为结果代表行为所做的事情前面的Index（）和Create（）行为返回一个MVC视图CreateNew（）和Complete（）行为结果重定向到另一个控制器行为

接下来说一说这些控制器行为如何工作当你请求Create（）控制器行为时返回一个包括创建新任务的窗体的视图当你提交这个窗体时会调用CreateNew（）控制器行为CreateNew（）控制器行为将新任务添加到数据库中并将用户重定向到Index（）控制器行为Index（）控制器行为返回一个任务清单列表的视图最后如果你标记任务完成就会调用Complete（）控制器行为并更新数据库Complete（）控制器行为将用户重定向回Index（）控制器行为并更新显示的任务清单列表

创建视图

视图包括HTML标记和返回给浏览器的内容在ASPNET MVC应用程序中视图是最接近页面的事物通过创建一个扩展名为aspx的文件来创建一个视图

你必须将视图放在正确的位置如果你给HomeController的Index（）行为方法创建了一个视图你必须将这个视图放在\Views\Home\Indexaspx

如果你正在为ProductController的Price() 行为方法创建视图视图就必须放在\Views\Product\Priceaspx

默认情况下视图的名字和它对应的控制器行为的名字一样视图必须放在与它名字对应的控制器文件夹下

在视图文件夹下的子文件夹上点右键选择添加 > 新项目再选择MVC视图模板创建一个新的视图我们需要在下面的路径中创建两个视图

\Views\Home\Indexaspx

\Views\Home\Createaspx

当你创建好这些视图后你的方案浏览器窗口应该包括如图所示的文件

image onmousewheel=javascript:return big(this) height= alt= src=http://imgeducitycn/img_///jpg width= onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done>

图 Indexaspx和Createaspx视图

视图包括HTML内容和脚本Indexaspx视图将用来显示任务清单为了说明这个视图的目的将清单中的代码添加到Indexaspx视图中

清单 Indexaspx

borderColorDark=#ffffff cellPadding= width= align=center borderColorLight=# border=>ee>

＜%@ Page Language=VB AutoEventWireup=false CodeBehind=Indexaspxvb Inherits=TaskListIndex %＞ ＜!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd＞ ＜html xmlns= ＞ ＜head runat=server＞ ＜title＞＜/title＞ ＜/head＞ ＜body＞ ＜div＞ ＜h＞My Tasks＜/h＞ displaying all tasks ＜a ＞Add new Task＜/a＞＞ ＜/div＞ ＜/body＞ ＜/html＞

Indexaspx视图目前还不能显示任何任务清单它只不过声称要显示而已本文后面我们将添加显示任务清单的代码到Indexaspx视图中

注意Indexaspx视图中包括一个链接Add new Task这个链接指向 /Home/Create当你点击这个链接时就会调用HomeController类的Create（）行为Create方法返回Create视图

Createaspx视图包括创建新任务的窗体这个视图的代码显示在清单中

清单 Createaspx

borderColorDark=#ffffff cellPadding= width= align=center borderColorLight=# border=>ee>

＜%@ Page Language=VB AutoEventWireup=false CodeBehind=Createaspxvb Inherits=TaskListCreate %＞ ＜!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd＞ ＜html xmlns= ＞ ＜head runat=server＞ ＜title＞＜/title＞ ＜/head＞ ＜body＞ ＜div＞ ＜h＞Add New Task＜/h＞ ＜form method=post action=/Home/CreateNew＞ ＜label for=task＞Task:＜/label＞ ＜input type=text name=task /＞ ＜br /＞ ＜input type=submit value=Add Task /＞ ＜/form＞ ＜/div＞ ＜/body＞ ＜/html＞

注意清单中的代码会post 下面的URL

/Home/CreateNewaspx

这个URL对应HomeController控制器的CreateNew（）行为窗体数据代表将要发送给这个行为的新任务

创建数据库

接下来是创建存储任务的数据库在App_Data文件夹上点右键选择添加 > 新项目再选择SQL SERVER数据库模板将数据库命名为TaskListDBmdf点击添加按钮

下面就要添加表在数据库中在方案浏览窗口中双击TaskListDBmdf打开服务器浏览窗口在Tables文件夹上点右键选择添加新表打开数据库表设计器创建下面的数据库列

cellPadding= border=>>

列名urn:schemasmicrosoftcom:office:office />

>

数据类型

>

允许为空

>

Id

>

Int

>

不允许

>

Task

>

Nvarchar()

>

不允许

>

IsCompleted

>

Bit

>

不允许

>

EntryDate

>

DateTime

>

不允许

第一列Id有两个特殊的属性首先需要标记Id列作为主键列选择Id列后然后选择设置为主键按钮接下来需要将Id列标记为标识列在列属性窗口向下滚动到Identity Specification

展开然后将Is Identity的值设为yes如图所示

image onmousewheel=javascript:return big(this) height= alt= src=http://imgeducitycn/img_///jpg width= onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done>

图 task表

最后一步是保存新创建的表点击保存按钮将表命名为tasks

创建模型

MVC模型包括应用程序的主体和数据库访问逻辑正常情况下你应该将你主要的类放在MVC应用程序的Models文件夹下所有不在视图或控制器下的应用程序逻辑都应该放在Models文件夹下

在本文中我们将 使用LINQ和SQL与数据库通信就我个人而言我更喜欢LINQ但这里不需要使用LINQ如果你喜欢LINQ你应该要使用另一个技术如Nhibernate或实体框架（Entity Framework）与数据库通信

若要使用LINQ和SQL我们必须先在Models文件夹下创建我们的LINQ和SQL类在Models文件夹上点右键选择添加> 新项目再选择LINQ to SQL Class模板将新创建的LINQ to SQL类命名为TaskListdbml点击添加按钮完成这些步骤后将会显示对象关系设计器（Object Relational Designer）

我们需要创建一个LINQ to SQL实体类表示我们的Tasks数据库表从方案浏览窗口拖动Tasks数据库表到对象关系设计器中执行这一行为将会创建一个新的LINQ to SQL的实体类命名为Task（如图所示）点击保存按钮（软盘图标）保存新的实体

image onmousewheel=javascript:return big(this) height= alt= src=http://imgeducitycn/img_///jpg width= onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done>

图 Task实体类

将数据库逻辑添加到控制器方法

现在我们已经有数据库了我们可以修改我们的控制器行为以便我们可以从数据库存储和检索任务修改好的HomeController包括在清单中

清单 HomeControllervb

borderColorDark=#ffffff cellPadding= width= align=center borderColorLight=# border=>ee>

Public Class HomeController Inherits SystemWebMvcController Private db As New TaskListDataContext() Display a list of tasks Function Index() As ActionResult Dim tasks = From t In dbTasks Order By tEntryDate Descending Return View(tasksToList()) End Function Display a form for creating a new task Function Create() As ActionResult Return View() End Function Adding a new task to the database Function CreateNew(ByVal task As String) As ActionResult Add the new task to database Dim newTask As New Task() newTaskTask = task newTaskIsCompleted = False newTaskEntryDate = DateTimeNow dbTasksInsertOnSubmit(newTask) dbSubmitChanges() Return RedirectToAction(Index) End Function Mark a task as complete Function Complete(ByVal Id As Integer) As ActionResult database logic Dim tasks = From t In dbTasks Where tId = Id For Each Match In tasks MatchIsCompleted = True Next dbSubmitChanges() Return RedirectToAction(Index) End FunctionEnd Class

注意清单中的HomeController类包括一个私有类级别字段dbdb字段是TaskListDataContext类的一个实体HomeController类使用db字段表示TaskListDB数据库

Index（）控制器行为已经被修改可以检索Tasks数据库表中的所有记录任务都传递到Index视图中

CreateNew（）方法也被修改可以在Tasks数据库表中创建一个新任务注意CreateNew（）方法修改后可以接受一个字符串参数命名任务这个参数表示传递自Create视图的任务文本格式字段ASPNET MVC框架将这个格式字段作为一个参数自动传递给控制器行为

最后Complete（）方法也被修改可以改变Tasks表中IsComplete列的值当你标记任务完成时任务的Id会传递给Complete（）行为并更新数据库

修改Index视图

最后我们还需要做一件事情以完成我们的Tasklist应用程序

那就是必须修改Index视图以便它可以显示所有任务清单并允许我们标记任务完成修改后的Index视图包括在清单中

清单 Indexaspx

borderColorDark=#ffffff cellPadding= width= align=center borderColorLight=# border=>ee>

＜%@ Page Language=VB AutoEventWireup=false CodeBehind=Index

aspxvb Inherits=TaskListIndex %＞＜!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN

/TR/xhtml/DTD/xhtmltransitionaldtd＞＜html xmlns= ＞ ＜head id=Head runat=server＞ ＜title＞Index＜/title＞ ＜/head＞ ＜body＞ ＜div＞ ＜h＞My Tasks＜/h＞ ＜ul＞ ＜% For Each task As TaskListTask In ViewDataModel%＞ ＜li＞ ＜% If taskIsCompleted Then%＞ ＜del＞ ＜%= taskEntryDateToShortDateString() %＞ ＜%=taskTask%＞ ＜/del＞ ＜% Else%＞ ＜a /Home/Complete/＜%= taskIdTo

String() %＞＞Complete＜/a＞ ＜%= taskEntryDateToShortDateString() %＞ ＜%=taskTask%＞ ＜% End If%＞ ＜/li＞ ＜% Next%＞ ＜/ul＞ ＜br /＞＜br /＞ ＜a ＞Add new Task＜/a＞ ＜/div＞ ＜/body＞＜/html＞

清单中的Index视图包括一个For…Each循环反复检索所有具有ViewDataModel属性的任务通常你使用ViewDate将数据从一个控制器行为传递给一个视图在循环内使用了一个条件检查任务是否已经完成一个完成的任务使用一根横线（删除线）显示HTML标记＜DEL＞用于创建这根删除线如果任务还没有完成会有一个Complete的链接这个链接是由下面的脚本构成的

＜a /Home/Complete/＜%= taskIdToString() %＞＞Complete＜/a＞

注意任务的Id包括在连接的Url中当你点击这个链接时任务Id传递给HomeController类的Complete（）行为数据库记录也跟着就改变了

Index视图的最后版本显示如图所示的页面

image onmousewheel=javascript:return big(this) height= alt= src=http://imgeducitycn/img_///jpg width= onload=javascript:if(thiswidth>)thisstylewidth=; border= twffan=done>

图 Index视图

小结

本文的目的是让你对构建一个ASPNET MVC应用程序有所感性认识我希望你仔细研究如何构建一个ASPNET MVC Web应用程序实际上它和构建一个asp或应用程序非常的类似本文只分析了ASPNET MVC框架的基本特性在以后的文章中我们将深入讲解控制器控制器行为视图视图数据和HTML助手

原文Creating a Tasklist Application with ASPNET MVC