ASP.NET MVC 4教程，从入门到实践如何快速掌握？-杰瑞科技汇

ASP.NET MVC 4 完整入门教程

本教程将引导你完成一个完整的 Web 应用程序开发：一个简单的电影数据库（Movie Database）应用，我们将遵循“做中学”的原则，每一步都解释其背后的原理。

（图片来源网络，侵删）

第一部分：准备工作与概念理解

在开始编码之前,我们需要了解一些基本概念和准备开发环境。

什么是 MVC？

MVC 是一种设计模式，它将一个应用程序分为三个相互关联的部分，以实现职责分离，使代码更易于管理、测试和扩展。

Model (模型):
- 职责: 代表应用程序的数据和业务逻辑，它负责数据的存取、验证和业务规则。
- 例子: 在电影应用中，Movie 类就是一个 Model，它定义了电影有哪些属性（如 Id, Title, ReleaseDate, Genre, Price），并可能包含验证逻辑（如 Title 不能为空）。
View (视图):
（图片来源网络，侵删）
- 职责: 负责显示用户界面（UI），它通常从 Model 中获取数据，并将其展示给用户，视图本身不包含业务逻辑。
- 例子: 显示电影列表的页面 (Index.cshtml)，或者显示单个电影详情的页面 (Details.cshtml)。
Controller (控制器):
- 职责: 处理用户的输入和交互，它接收来自用户的请求（点击一个链接或提交一个表单），与 Model 交互获取或更新数据，然后选择一个合适的 View 来返回给用户。
- 例子: MoviesController 可以处理“显示所有电影”的请求，从数据库获取电影列表，然后将这些数据传递给 Index 视图进行渲染。

工作流程: 用户请求 -> Controller -> 处理请求/与Model交互 -> 选择View -> View渲染数据 -> 返回给用户

开发环境准备

你需要安装以下软件：

Visual Studio: 推荐使用 Visual Studio 2012，因为它对 ASP.NET MVC 4 有最好的原生支持，更高版本的 Visual Studio 也可以打开和运行 MVC 4 项目。
.NET Framework 4.5: MVC 4 基于 .NET Framework 4.5 开发，Visual Studio 2012 会自动安装它。

第二部分：创建第一个 ASP.NET MVC 4 项目

让我们动手创建项目。

（图片来源网络，侵删）

步骤 1: 新建项目

打开 Visual Studio。
点击 "文件" -> "新建" -> "项目..."。
在左侧模板中选择 "Visual C#" -> "Web"。
在中间模板列表中,选择 "ASP.NET MVC 4 Web 应用程序"。
为你的项目命名,MvcMovie，并选择一个保存位置。
点击 "确定"。

步骤 2: 选择项目模板

在弹出的对话框中,选择 "Internet 应用程序" 模板，这个模板会为你生成一个包含用户注册、登录等基本功能的完整项目结构，非常适合学习。

视图引擎: 选择 Razor，这是 MVC 4 和 5 中最常用的视图引擎，其语法简洁高效（@Model.Name）。
勾选 "为 Unit Test 创建项目": 这是一个好习惯，但我们现在可以不勾选，以保持项目简单。

点击 "确定"。

步骤 3: 探索项目结构

项目创建成功后,你会在 "解决方案资源管理器" 中看到以下文件夹，这 MVC 应用的核心结构：

Controllers: 存放所有控制器类。HomeController.cs 和 AccountController.cs。
Models: 存放数据模型类，目前是空的，我们稍后会添加自己的 Movie 模型。
Views: 存放所有视图文件。
- Home/: 存放 HomeController 对应的视图，如 About.cshtml, Contact.cshtml, Index.cshtml。
- Account/: 存放与用户账户相关的视图。
- Shared/: 存放所有控制器共用的视图，最重要的是 _Layout.cshtml（主布局文件）和 _ViewStart.cshtml（视图启动文件）。
App_Start: 存放应用程序的配置和启动相关的类，如 RouteConfig.cs（URL路由配置）。
Content: 存放静态文件，如 CSS 样式表、图片等。
Scripts: 存放 JavaScript 文件。
Global.asax: 全局应用程序文件，包含应用程序生命周期事件（如 Application_Start）。

第三部分：创建 Movie 模型

我们来创建自己的数据模型。

步骤 1: 添加 Movie 类

在 "解决方案资源管理器" 中，右键点击 Models 文件夹。
选择 "添加" -> "类..."。
将类命名为 Movie.cs，然后点击 "添加"。

步骤 2: 编写 Movie 类代码

打开 Movie.cs 文件，用以下代码替换其内容：

using System;
using System.ComponentModel.DataAnnotations; // 用于数据验证特性
namespace MvcMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        [StringLength(60, MinimumLength = 3)]
        public string Title { get; set; }
        [Display(Name = "Release Date")]
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
        [RegularExpression(@"^[A-Z]+[a-zA-Z""'\s-]*$")]
        [Required]
        [StringLength(30)]
        public string Genre { get; set; }
        [Range(1, 100)]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }
        [StringLength(5)]
        [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$")]
        public string Rating { get; set; }
    }
}

代码解释:

我们为 Movie 类定义了几个属性，并使用了 DataAnnotations（数据注解）。
[Required]: 表示该字段是必填的。
[StringLength(60, MinimumLength = 3)]: 限制字符串长度在 3 到 60 个字符之间。
[RegularExpression(@"...")]: 使用正则表达式来验证输入格式。
[Range(1, 100)]: 限制数值范围。
[DataType(DataType.Date)]: 指定该字段的数据类型为日期，视图引擎会据此选择合适的编辑器（如日期选择器）。
[Display(Name = "Release Date")]: 指定在视图中显示该字段时使用的友好名称。

第四部分：创建控制器和视图

模型有了,现在我们需要一个控制器来处理它，以及视图来显示它。

步骤 1: 添加 MoviesController

在 "解决方案资源管理器" 中，右键点击 Controllers 文件夹。
选择 "添加" -> "控制器..."。
在 "添加基架" 对话框中，选择 "MVC 5 控制器 - 空"（虽然我们用的是 MVC 4，但这个基架依然适用且更通用），然后点击 "添加"。
将控制器命名为 MoviesController，然后点击 "添加"。

步骤 2: 编写控制器代码

Visual Studio 会为你生成一个 MoviesController.cs 文件，我们手动添加一些操作方法来处理电影数据。

注意: 我们现在使用一个内存中的静态列表来模拟数据库，这样更简单。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMovie.Models; // 引入我们的Movie模型
namespace MvcMovie.Controllers
{
    public class MoviesController : Controller
    {
        // 模拟数据库
        private static List<Movie> _movies = new List<Movie>
        {
            new Movie { ID = 1, Title = "肖申克的救赎", ReleaseDate = DateTime.Parse("1994-9-10"), Genre = "剧情", Price = 25.99M, Rating = "A" },
            new Movie { ID = 2, Title = "霸王别姬", ReleaseDate = DateTime.Parse("1993-1-1"), Genre = "剧情/爱情", Price = 30.50M, Rating = "A" },
            new Movie { ID = 3, Title = "阿甘正传", ReleaseDate = DateTime.Parse("1994-7-6"), Genre = "剧情/爱情", Price = 28.00M, Rating = "A" }
        };
        // GET: Movies
        public ActionResult Index()
        {
            // 返回所有电影列表
            return View(_movies);
        }
        // GET: Movies/Details/5
        public ActionResult Details(int id)
        {
            // 根据ID查找电影
            var movie = _movies.FirstOrDefault(m => m.ID == id);
            if (movie == null)
            {
                return HttpNotFound(); // 如果没找到，返回404
            }
            return View(movie);
        }
        // GET: Movies/Create
        public ActionResult Create()
        {
            // 返回一个空的创建表单
            return View();
        }
        // POST: Movies/Create
        [HttpPost]
        [ValidateAntiForgeryToken] // 防止跨站请求伪造
        public ActionResult Create(Movie movie)
        {
            if (ModelState.IsValid) // 检查模型验证是否通过
            {
                // 在实际应用中，这里会将movie保存到数据库
                // 这里我们只是模拟添加到列表
                movie.ID = _movies.Count + 1;
                _movies.Add(movie);
                return RedirectToAction("Index"); // 重定向到Index页面
            }
            return View(movie); // 如果验证失败，返回表单并显示错误信息
        }
    }
}

代码解释:

Index(): 这是一个 GET 请求，用于显示电影列表，它从 _movies 列表中获取所有电影，并将其传递给 Index 视图。
Details(int id): 根据 id 参数查找并显示单个电影的详细信息。
Create(): GET 请求，显示一个用于创建新电影的空白表单。
Create(Movie movie): POST 请求，用于处理用户提交的创建表单。[HttpPost] 特性表示这个方法只响应 POST 请求。[ValidateAntiForgeryToken] 是一个重要的安全特性。
ModelState.IsValid: 检查在 Movie 模型上定义的 DataAnnotations 规则是否被满足，如果用户输入无效，表单会重新显示并显示验证错误。

步骤 3: 创建视图

我们需要为 Index 和 Create 方法创建视图。

在 Index() 方法内部右键点击，选择 "添加视图..."。
在对话框中：
- 视图名称: Index (默认)。
- 模板: 选择 "List"，这会自动生成一个显示模型列表的视图。
- 模型类: 选择 Movie (MvcMovie.Models)。
- 数据上下文类: 留空（因为我们没有使用Entity Framework）。
- 勾选 "使用布局页"。
点击 "添加"。

用同样的方法为 Create() 方法添加视图：

视图名称: Create。
模板: 选择 "Create"。
模型类: 选择 Movie。
点击 "添加"。

步骤 4: 运行并测试

按 F5 或点击工具栏上的 "▶" 按钮运行应用程序。

浏览器会打开到主页。
在地址栏中,手动输入 /Movies 并按回车，你应该能看到你创建的电影列表。
点击页面上的 "Create New" 链接，它会导航到 /Movies/Create。
填写表单,尝试提交一些无效数据（比如留空必填项），你会看到验证错误，然后填写有效数据并提交，你会被重定向回电影列表页面，新电影已添加。

第五部分：添加和配置数据库

目前我们使用的是静态列表,数据无法持久化，我们将使用 Entity Framework (EF) 来创建一个真正的数据库。

安装 Entity Framework

通过 NuGet 包管理器安装 EF。

在 "解决方案资源管理器" 中，右键点击项目名称。
选择 "管理 NuGet 程序包..."。
在 "浏览" 选项卡中，搜索 EntityFramework。
找到 EntityFramework 包，点击 "安装"。

创建数据上下文

数据上下文是 EF 与数据库交互的桥梁。

在 Models 文件夹中，添加一个新类，命名为 MovieDBContext.cs。
输入以下代码：

using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Data.Entity.ModelConfiguration.Conventions;
namespace MvcMovie.Models
{
    public class MovieDBContext : DbContext
    {
        public MovieDBContext() : base("MovieDBContext") { }
        public DbSet<Movie> Movies { get; set; }
    }
}

MovieDBContext 继承自 DbContext。
DbSet<Movie> Movies 告诉 EF，Movie 类中的数据需要被保存到数据库中，并且数据表名为 Movies。

配置连接字符串

打开 Web.config 文件（在项目根目录下），在 <configuration> 节点内添加 <connectionStrings> 节点：

<connectionStrings>
    <add name="MovieDBContext" 
         connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\Movies.mdf;Integrated Security=True" 
         providerName="System.Data.SqlClient" />
</connectionStrings>

这个连接字符串告诉 EF 使用 SQL Server Express LocalDB，并将数据库文件 Movies.mdf 存储在 App_Data 文件夹中。

修改控制器使用 EF

我们需要修改 MoviesController，让它使用 MovieDBContext 而不是静态列表。

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMovie.Models;
namespace MvcMovie.Controllers
{
    public class MoviesController : Controller
    {
        private MovieDBContext db = new MovieDBContext();
        // GET: Movies
        public ActionResult Index()
        {
            return View(db.Movies.ToList());
        }
        // GET: Movies/Details/5
        public ActionResult Details(int id)
        {
            Movie movie = db.Movies.Find(id);
            if (movie == null)
            {
                return HttpNotFound();
            }
            return View(movie);
        }
        // GET: Movies/Create
        public ActionResult Create()
        {
            return View();
        }
        // POST: Movies/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Movie movie)
        {
            if (ModelState.IsValid)
            {
                db.Movies.Add(movie);
                db.SaveChanges(); // 将更改保存到数据库
                return RedirectToAction("Index");
            }
            return View(movie);
        }
        // ... 你可以继续添加 Edit, Delete 等方法 ...
    }
}

关键修改:

创建了一个 MovieDBContext 实例 db。
在 Index 中，使用 db.Movies.ToList() 从数据库获取数据。
在 Create 中，使用 db.Movies.Add() 和 db.SaveChanges() 将新电影保存到数据库。

启用 Code First 迁移

Code First 迁移允许你通过代码来管理数据库架构的变更（比如添加新字段）。

在 "程序包管理器控制台" (工具 -> NuGet 包管理器 -> 程序包管理器控制台) 中，输入以下命令：
```
Enable-Migrations
```
这会在项目中创建一个 Migrations 文件夹和一个 Configuration.cs 文件。
添加一个初始迁移,这个命令会创建一个描述数据库初始状态的脚本。
```
Add-Migration InitialCreate
```
你会看到 Migrations 文件夹下多了一个 xxxxxxxxxxxxxx_InitialCreate.cs 文件，里面包含了创建 Movies 表的代码。
应用这个迁移,创建数据库。
```
Update-Database
```
App_Data 文件夹下会生成一个 Movies.mdf 文件，你的数据库已经创建好了！

再次运行应用程序,并测试添加新电影，这次，即使你重启应用程序，新添加的电影数据依然会保留在数据库中。

第六部分：总结与进阶

恭喜！你已经成功创建了一个功能完整的 ASP.NET MVC 4 应用，包括：

项目结构: 理解了 MVC 的基本目录结构。
MVC 模式: 创建了 Model、Controller 和 View。
数据验证: 使用 DataAnnotations 进行客户端和服务器端验证。
数据库交互: 使用 Entity Framework Code First 创建和操作数据库。
部署: 将应用部署到 IIS Express 进行测试。

接下来的学习方向:

CRUD 完整实现: 为 MoviesController 添加 Edit 和 Delete 方法。
查询和筛选: 在 Index 页面添加搜索和排序功能。
ASP.NET Identity: 学习使用更现代的会员系统来管理用户。
ASP.NET Web API: 学习如何构建 RESTful API 服务，供移动端或其他客户端调用。
单元测试: 为你的控制器和模型编写单元测试，确保代码质量。

这份教程为你打下了坚实的基础,ASP.NET MVC 是一个强大且灵活的框架，继续探索和学习，你将能够构建出更加复杂和专业的 Web 应用程序。

ASP.NET MVC 4教程，从入门到实践如何快速掌握？