前言

因为工作需要，开始接触 ASP.NET MVC 框架，对于我来说是一个全新的东西，需要从最基本的概念开始学习，特此记录学习过程中的各种心得体会，方便以后回忆。

什么是MVC？

MVC由三个部分组成，即Model，View和Controller。
Model：负责整个系统的逻辑运算，数据库，数据模型等相关部分。
View：负责所有和视图有关的部分。
Controller：从model取得数据，并决定显示哪一个View。

关注点分离：Seperation of Concerns

SoC的意思，就是当你在进行开发时，可以只关注与当前的对象上面，一次仅关注一个比较容易理解的部分，不会受到其他对象的干扰，也不会影响到其他对象的运作，在MVC当中是一个非常重要的开发原则。应时刻谨记！

Helloworld

安装VS，不管什么版本，一定要包含MVC。
打开VS，新建MVC的WEB项目。
Ctrl + F5运行试试~~~~第一个网页就建立好了

关键目录及文件

MVC 框架基于默认的命名，所有 MVC 应用程序中的文件夹名称都是相等的。
控制器位于 Controllers 文件夹，视图位于 Views 文件夹，模型位于 Models 文件夹。
标准化的命名减少了代码量，同时有利于开发者对 MVC 项目的理解。这点非常重要！！！

App_Data 文件夹：App_Data 文件夹用于存储应用程序数据。
Content 文件夹：Content 文件夹用于静态文件，比如样式表（CSS 文件）、图表和图像。
Models 文件夹：Models 文件夹包含表示应用程序模型的类。模型存有并操作应用程序的数据。
Controllers 文件夹：包含负责处理用户输入和响应的控制器类。MVC 要求所有控制器文件的名称以 “Controller” 结尾。
Views 文件夹：Views 文件夹存储的是与应用程序显示（用户界面）相关的文件（HTML 文件）。

~/Views/shared/_Layout.cshtml

文件 _Layout.cshtml 表示应用程序中每个页面的布局。

<!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-3.3.1.min.js")"></script>
	<script src="@Url.Content("~/Scripts/modernizr-2.8.3.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>@DateTime.Now</p>
	</section>
</body>
</html>

HTML帮助器

@Url.Content() - URL 内容在此处插入。
@Html.ActionLink() - HTML 链接在此处插入。

Razor语法

@ViewBag.Title - 在此处插入页面标题。
@RenderBody() - 此处呈现页面内容。

~/Content/Site.css

样式表Site.css定义了整个项目所有html的样式

body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}

h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}

#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}

a
{
color: #034af3; 
}

/* 菜单样式 ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}

ul#menu li
{
display: inline;
}

ul#menu li a 
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}

ul#menu li a:hover
{
background-color: #ffffff;
} 

/* 表单样式 ------------------------------*/
fieldset
{
padding-left: 12px;
} 

fieldset label
{
display: block;
padding: 4px;
}

input[type="text"], input[type="password"]
{
width: 300px;
}

input[type="submit"]
{
padding: 4px;
}

/* 数据样式 ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}

table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}

table.data td 
{
border:1px solid #c3c3c3;
padding:3px;
}

~/Controllers/ 文件夹

Controllers 文件夹包含负责处理用户输入和响应的控制器类。MVC 要求所有控制器文件的名称以 “Controller” 结尾。

web 服务器通常会将进入的 URL 请求直接映射到服务器上的磁盘文件。例如：某个 URL 请求（比如 “http://www.w3school.com.cn/index.asp”）将映射到服务器根目录上的文件 “index.asp”。

MVC 框架的映射方式有所不同。MVC 将 URL 映射到方法，这些方法在类中被称为Controller。

Controller负责处理进入的请求、处理输入、保存数据、并把响应发送回客户端。

一般情况下，主页控制器就是

~/Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcDemo.Controllers {
	public class HomeController : Controller {
		public ActionResult Index() { return View(); }
		public ActionResult About() { return View(); }
	}
}

该控制器定义了两个控件：Index和About，与之对应的视图文件则位于：

~/Views/Home/Index.cshtml
~/Views/Home/About.cshtml

~/Views/ 文件夹

Views 文件夹存储的是与应用程序显示（用户界面）相关的文件（HTML 文件）。

根据语言的不同，这些文件的扩展名可能是 html、asp、aspx、cshtml 以及 vbhtml。

文件类型	扩展名
纯HTML	.htm or .html
经典ASP	.asp
经典ASP.NET	.aspx
ASP.NET Razor C#	.cshtml
ASP.NET Razor VB	.vbhtml

Home 文件夹用于存储诸如首页和关于页之类的应用程序页面（默认情况）。
此外，每个Controller在Views中对应的一个文件夹。
Shared 文件夹用于存储控制器间分享的视图（模板页和布局页）。
~/Views/ _ViewStart 文件包含以下内容：
```
@{Layout = "~/Views/Shared/_Layout.cshtml";}
```
这段代码被自动添加到由应用程序显示的所有视图。
如果删除该文件，则必须向所有视图添加这段代码。

~/Views/Home/Index.cshtml

Index.cshtml 通常表示对应视图的首页。

@{ViewBag.Title = "Home Page";}
<h1>第一个主页</h1>
<p>这是我的第一个主页</p>

~/Views/Home/About.cshtml

About.cshtml 表示应用程序的关于页面。

@{ViewBag.Title = "Home Page";}
<h1>第一个主页</h1>
<p>这是我的第一个主页</p>

至此，第一个MVC项目就算初步完成。

古月河图

发布了45 篇原创文章 · 获赞 46 · 访问量 18万+

私信关注

ASP.NET MVC框架学习#1：创建第一个MVC项目

前言