MVC 编程模型
MVC 是三个 ASP.NET 开发模型之一。
MVC 是用于构建 web 应用程序的一种框架,使用 MVC (Model View Controller) 设计:
Model(模型)表示应用程序核心(比如数据库记录列表)
View(视图)对数据(数据库记录)进行显示
Controller(控制器)处理输入(写入数据库记录)
MVC 模型同时提供对 HTML、CSS 以及 JavaScript 的完整控制。
MVC 模型通过三个逻辑层来定义 web 应用程序:
business layer(业务层、模型逻辑)
display layer(显示层、视图逻辑)
input control(输入控件、控制器逻辑)
模型(Model)
模型(Model)是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象在数据库中存取数据。
View(视图)
View(视图)是应用程序中处理数据显示的部分。
通常从模型数据中创建视图。
控制器
控制器是应用程序中处理用户交互的部分。
通常控制器从视图读取数据、控制用户输入,并向模型发送数据数据。
MVC 的这种拆分有助于我们管理复杂的应用程序,因为您能够在同一时间关注一个方面。例如,您可以在不依赖业务逻辑的情况下对视图进行设计。同时对应用程序的设计也更加
容易。
MVC 的这种拆分同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。
Web Forms vs MVC
MVC 编程模型是与传统的 ASP.NET (Web Forms) 相比更轻量级的替代方案。它是轻量级的高可测试性的框架,同时整合了所有已有的 ASP.NET 特性,比如模板页、安全性和认证。
Visual Studio Express 2012/2010
Visual Studio Express 是 Microsoft Visual Studio 的免费版本。
Visual Studio Express 是为 MVC (以及 Web Forms)量身定制的开发工具。
Visual Studio Express 包含:
MVC 和 Web Forms
拖拽 web 控件和 web 组件
web 服务器语言(Razor 使用 VB 和 C#)
web 服务器 (IIS Express)
数据库服务器 (SQL Server Compact)
完整的 web 开发框架 (ASP.NET)
如果您已经安装了 Visual Studio Express,您将从本教程获得更多益处。
如果您希望安装 Visual Studio Express,请点击以下链接:
Visual Web Developer 2012(Windows 7 或 Windows 8)
Visual Web Developer 2010(Windows Vista 或 XP)
在首次安装 Visual Studio Express 之后,它会再次运行安装程序,来安装补丁和服务包。请再次点击链接。
为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序。
部分 1:创建应用程序
我们将构建什么
我们将构建一个 Internet 应用程序,它支持添加、编辑、删除以及列出数据库中的信息。
我们将做什么
Visual Web Developer 提供了构建 web 应用程序的不同模板。
我们将使用Visual Web Developer来创建使用HTML5 标记的空白 MVC Internet 应用程序。
当这个空白的 Internet 应用程序被创建之后,我们将逐步向该应用添加代码,直到彻底完成。我们将使用C#作为编程语言,以及最新的Razor服务器代码标记。
沿着这个路径,我们将讲解该应用程序的内容、代码和所有组件。
创建 web 应用程序
如果您已安装 Visual Web Developer,请启动 Visual Web Developer 并选择新项目。否则您只能通过阅读教程来学习了。
新建项目对话框中:
打开Visual C#模板
选取模板ASP.NET MVC 3 Web 应用程序
把项目名称设置为MvcDemo
设置磁盘位置,比如c:\w3school_demo
点击确定
当新项目对话框打开时:
选择Internet Application模板
选择Razor 引擎
选择HTML5 标记
点击确定
Visual Studio Express 会创建类似这样的一个项目:
我们将在本教程的下一章中搞清楚文件和文件夹的内容。
为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序。
部分 2:了解应用程序文件夹。
MVC 文件夹
典型的 ASP.NET MVC web 应用程序拥有如下文件夹内容:
应用程序信息
Properties
引用
应用程序文件夹
App_Data文件夹
Content 文件夹
Controllers 文件夹
Models 文件夹
Scripts 文件夹
Views 文件夹
配置文件
Global.asax
fig
fig
所有 MVC 应用程序中的文件夹名称都是相等的。MVC 框架基于默认的命名。控制器位于 Controllers 文件夹,视图位于 Views 文件夹,模型位于 Models 文件夹。您不必在应用程序代码中使用文件夹名称。
标准化的命名减少了代码量,同时有利于开发者对 MVC 项目的理解。
下面是对每个文件夹内容的简要描述:
App_Data 文件夹
App_Data文件夹用于存储应用程序数据。
我们将在本教程稍后的章节向App_Data文件夹添加 SQL 数据库。
Content 文件夹
Content 文件夹用于静态文件,比如样式表(CSS 文件)、图表和图像。
Visual Web Developer 会自动向 Content 文件夹添加一个themes文件夹。这个 themes 文件夹存放jQuery样式和图片。在这个项目中,您可以删除这个主题文件夹。
Visual Web Developer 同时向项目添加标准的样式表文件:Content 文件夹中的文件Site.css。这个样式表文件是您希望改变应用程序样式时需要编辑的文件。
我们将在本教程的下一章中编辑这个样式表文件 (Site.css)。
Controllers 文件夹
Controllers 文件夹包含负责处理用户输入和响应的控制器类。
MVC 要求所有控制器文件的名称以 "Controller" 结尾。
Visual Web Developer 已创建好一个 Home 控制器(用于首页和关于页面)以及一个 Account 控制器(用于登录页面):
我们将在本教程稍后的章节创建更多控制器。
Models 文件夹
Models 文件夹包含表示应用程序模型的类。模型存有并操作应用程序的数据。
我们将在本教程稍后的章节创建模型(类)。
jquery框架搭建Views 文件夹
Views 文件夹存有与应用程序的显示相关的 HTML 文件(用户界面)。
Views 文件夹中含有每个控制器对于的一个文件夹。
Visual Web Developer 已创建了一个 Account 文件夹、一个 Home 文件夹、一个 Shared 文件夹(在 Views 文件夹内)。
Account 文件夹包含用于注册并登录用户帐户的页面。
Home 文件夹用于存储诸如首页和关于页之类的应用程序页面。
Shared 文件夹用于存储控制器间分享的视图(模板页和布局页)。
我们将在本教程的下一章编辑这些布局文件。
Scripts 文件夹
Scripts 文件夹存储应用程序的 JavaScript 文件。
默认地,Visual Web Developer 在这个文件夹中放置标准的 MVC、Ajax 以及jQuery文件:
注释:文件 "modernizr" 是用于在应用程序中支持 HTML5 和 CSS3 的 JavaScript 文件。
为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序。
部分 3:添加样式和统一的外观(布局)。
添加布局
文件 _Layout.cshtml表示应用程序中每个页面的布局。它位于 Views 文件夹中的 Shared 文件夹。
打开这个文件,把其内容替换为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Movies", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright W3schools 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML 帮助器
在上面的代码中,HTML 帮助器用于修改 HTML 输出:
@Url.Content() - URL 内容在此处插入。
@Html.ActionLink() - HTML 链接在此处插入。
我们将在本教程稍后的章节讲解 HTML 帮助器。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。