ASP.NET MVC4教程怎么学？新手入门指南？-杰瑞科技汇

ASP.NET MVC4 教程：从零开始构建一个电影数据库应用

本教程将引导你使用 Microsoft Visual Studio Express 2012 for Web（或更高版本的 Visual Studio）和 ASP.NET MVC4 来创建一个 ASP.NET MVC Web 应用程序，我们将学习 MVC 的核心概念,并完成一个简单的电影列表管理应用。

第一部分：ASP.NET MVC 简介
- 什么是 MVC？
- 为什么选择 MVC？
- 本教程将创建什么？
第二部分：创建第一个 ASP.NET MVC 应用程序
- 创建项目
- 项目结构解析
- 运行应用程序
第三部分：添加一个控制器
- 什么是控制器？
- 添加 HelloWorldController
- 修改视图
第四部分：添加模型
- 什么是模型？
- 使用 Entity Framework Code-First 创建模型类
- 创建数据库上下文
- 初始化并设置数据库
第五部分：创建连接字符串并读取数据
- 设置连接字符串
- 创建控制器和视图
- 运行并测试
第六部分：验证编辑方法和编辑视图
- [HttpGet] 和 [HttpPost] 方法
- 添加验证逻辑
- 更新 Edit 视图以显示验证错误
第七部分：搜索功能
- 添加 SearchIndex 操作方法和视图
- 添加搜索逻辑和查询字符串
第八部分：新字段和数据验证
- 修改模型类
- 更新 DbContext
- 更新数据库架构
- 添加验证规则
- 验证工作原理
第九部分：详细信息和删除方法
- Details 方法
- Delete 方法
第十部分：结论与后续学习
下一步该学什么？

第一部分：ASP.NET MVC 简介

什么是 MVC？

MVC 是一种架构模式,它将一个应用程序分成三个主要部分：

模型：代表应用程序的数据和业务逻辑，它负责与数据库交互，并将数据状态通知给视图,模型是独立于视图和控制器的。
视图：负责显示用户界面，它从模型获取数据，并将其呈现给用户，视图通常只包含 UI 逻辑,不包含业务逻辑。
控制器：是模型和视图之间的协调者，它接收来自用户的输入（通过 HTTP 请求），调用相应的模型处理数据,然后选择一个视图来呈现结果。

这种分离使得代码更易于管理、测试和维护。

ASP.NET MVC4教程怎么学？新手入门指南？-图1

为什么选择 MVC？

关注点分离：代码职责清晰,易于维护和扩展。
可测试性强：由于业务逻辑与 UI 分离,可以轻松地为业务逻辑编写单元测试。
对搜索引擎优化友好：生成的 URL 清晰、易于理解,有利于搜索引擎抓取。
对前端开发友好：前端开发人员可以专注于视图（HTML/CSS/JavaScript）,而后端开发人员则专注于控制器和模型。
ASP.NET MVC 是开源的：拥有活跃的社区和丰富的资源。

本教程将创建什么？

我们将创建一个名为 MvcMovie 的应用程序，用于管理电影列表,该应用将具备以下功能：

显示电影列表。
创建新电影。
编辑现有电影。
查看电影详细信息。
删除电影。
按电影类型进行搜索。

第二部分：创建第一个 ASP.NET MVC 应用程序

创建项目

打开 Visual Studio。
选择文件 -> 新建 -> 项目。
在左侧模板中，选择 Visual C# -> Web。
在中间窗格中，选择 ASP.NET MVC 4 Web 应用程序。
为项目命名，MvcMovie,并选择一个位置。
点击确定。
在弹出的对话框中，选择 Internet 应用程序 模板，并确保视图引擎是 Razor（这是默认选项，也是推荐选项），点击确定。

项目结构解析

Visual Studio 为你创建了一个结构良好的项目,让我们来看一下最重要的文件夹：

Controllers：存放所有控制器类，控制器处理传入的 HTTP 请求,并决定向用户返回哪个响应。
Models：存放模型类，模型类代表应用程序的数据,并使用验证逻辑来强制执行业务规则。
Views：存放所有视图文件，视图是 HTML 模板，使用 Razor 语法动态生成响应发送给浏览器。
Scripts：存放 JavaScript 文件。
Content：存放 CSS、图片等静态内容。
App_Start：包含应用程序的配置文件，如 RouteConfig.cs（用于配置 URL 路由）。
Global.asax：包含应用程序级别的事件和处理程序。

运行应用程序

按 F5 或点击工具栏上的绿色播放按钮来运行应用程序，Visual Web Developer 会启动一个本地 Web 服务器（IIS Express），并在浏览器中打开应用程序的首页，你应该能看到一个欢迎页面,顶部有导航栏。

ASP.NET MVC4教程怎么学？新手入门指南？-图2

第三部分：添加一个控制器

什么是控制器？

控制器是处理用户输入、与模型交互以及选择要返回的视图的类，在本例中，我们将创建一个简单的控制器，它返回一个纯 HTML 字符串。

添加 `HelloWorldController`

在 解决方案资源管理器 中，右键单击 Controllers 文件夹。
选择添加 -> 控制器...。
在 添加控制器 对话框中，将控制器名称设置为 HelloWorldController，然后点击添加。

修改控制器方法

Visual Studio 会为你创建 HelloWorldController.cs 文件，默认情况下，它包含一个名为 Index 的方法,用以下代码替换它：

using System.Web.Mvc;
namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        //
        // GET: /HelloWorld/
        public string Index()
        {
            return "This is my <b>default</b> action...";
        }
        //
        // GET: /HelloWorld/Welcome/
        public string Welcome()
        {
            return "This is the Welcome action method";
        }
    }
}

运行并测试

运行应用程序，在浏览器地址栏中，在末尾追加 /HelloWorld，http://localhost:xxxx/HelloWorld，你应该会看到 Index 方法返回的文本。

在地址栏中追加 /Welcome，http://localhost:xxxx/HelloWorld/Welcome，你应该会看到 Welcome 方法返回的文本。

这个例子展示了浏览器如何向控制器（HelloWorldController）中的操作方法（Index 或 Welcome）发出请求，而该方法则直接返回纯 HTML。

第四部分：添加模型

什么是模型？

模型是应用程序中用于处理数据的部分，模型类通常是 C# 类（POCO - Plain Old CLR Object），它们定义了数据属性，我们使用 Entity Framework (EF) Code-First 来创建和访问数据库。

创建模型类

在 解决方案资源管理器 中，右键单击 Models 文件夹。
选择添加 -> 类。
将类命名为 Movie.cs。
用以下代码替换文件内容：

using System;
using System.Data.Entity;
namespace MvcMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }
    public class MovieDBContext : DbContext
    {
        public DbSet<Movie> Movies { get; set; }
    }
}

Movie 类定义了电影的数据结构。
MovieDBContext 类是 EF Code-First 的核心，它负责与数据库交互，并继承自 DbContext。DbSet<Movie> 表示一个可以查询和保存的 Movie 对象集合。

初始化并设置数据库

为了让 EF 能够找到 MovieDBContext，我们需要在 Web.config 文件中注册它。

打开项目根目录下的 Web.config 文件。
找到 <connectionStrings> 节点。
如果存在一个名为 DefaultConnection 的连接字符串，可以删除它，因为我们使用的是 EF 的默认行为。
在 <connectionStrings> 节点内,添加以下代码：

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

这个连接字符串告诉 EF 在 App_Data 文件夹中创建一个名为 Movies.mdf 的 SQL Server Express LocalDB 数据库文件。

第五部分：创建连接字符串并读取数据

设置连接字符串

我们在上一步已经完成了这一步。

创建控制器和视图

我们需要创建一个控制器来使用我们的 Movie 模型,并显示电影列表。

在 Controllers 文件夹中，右键单击，选择添加 -> 控制器...。
选择 MVC 5 控制器 - 空，点击添加。
将控制器命名为 MoviesController。
在新创建的 MoviesController.cs 文件中，添加以下 using 语句和代码：

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());
        }
        // ... 其他方法将在后面添加 ...
    }
}

我们创建了一个 MovieDBContext 的实例。
Index 方法从 Movies 数据集中获取所有电影，并将其传递给 Index 视图。

创建视图：
- 在 Index 方法内部右键单击，选择 添加视图...。
- 在 添加视图 对话框中：
  - 视图名称：保持 Index。
  - 模板：选择列表。
  - 模型类：选择 Movie (MvcMovie.Models)。
  - 数据上下文类：选择 MovieDBContext (MvcMovie.Models)。
  - 勾选 使用布局页 或 使用母版页。
- 点击添加。

Visual Studio 会为你创建一个 Views\Movies\Index.cshtml 文件，这是一个 Razor 视图模板,它包含一些代码来循环遍历电影列表并显示它们。

运行并测试

按 F5 运行应用程序，在浏览器中，导航到 /Movies URL（http://localhost:xxxx/Movies），由于数据库是空的，你可能会看到一个错误页面,提示数据库不存在。

我们需要初始化数据库，最简单的方法是使用 Code First 迁移。

在 解决方案资源管理器 中，右键单击 Models 文件夹。
选择添加 -> 新建项...。
选择数据 -> ADO.NET 实体数据模型。
命名为 MovieDBContext，点击添加。
在向导中，选择 从数据库生成，点击 下一步。
选择你之前在 Web.config 中添加的 MovieDBContext 连接字符串，点击 下一步。
在 选择数据库对象 页面，展开 Tables 节点，勾选 dbo.Movies，点击完成。

右键单击 解决方案资源管理器 中的 MovieDBContext.edmx 文件，选择 打开方式 -> 文本编辑器，在文件顶部，找到 <edmx:Edmx> 节点,添加以下命名空间映射：

<edmx:Edmx xmlns:edmx="http://schemas.microsoft.com/ado/2009/11/edmx">
  <edmx:Runtime>
    <!-- ... -->
    <edmx:ConceptualModels>
      <!-- ... -->
      <Schema Namespace="MvcMovie.Models" xmlns="http://schemas.microsoft.com/ado/2009/11/edm">
        <!-- 在这里添加 -->
        <EntityType Name="Movie">
          <!-- ... EF 会自动生成这些 ... -->
        </EntityType>
      </Schema>
    </edmx:ConceptualModels>
  </edmx:Runtime>
</edmx:Edmx>

(注：这个过程有点复杂，在 MVC4 中，更推荐使用 NuGet 包管理器来启用 Code First 迁移，但为了简化，我们采用上述方法。)

一个更简单的方法是，直接运行应用程序，当 EF 发现数据库不存在时，它会根据你的模型类自动创建它,你需要手动向数据库中添加一些数据才能在视图中看到。

让我们回到 MoviesController，在 Index 方法中添加一些测试数据：

public ActionResult Index()
{
    // 如果数据库为空，则添加一些测试数据
    if (db.Movies.Count() == 0)
    {
        db.Movies.Add(new Movie { Title = "西部世界", ReleaseDate = DateTime.Parse("2025-10-2"), Genre = "科幻", Price = 9.99M });
        db.Movies.Add(new Movie { Title = "权力的游戏", ReleaseDate = DateTime.Parse("2011-4-17"), Genre = "奇幻", Price = 8.99M });
        db.SaveChanges();
    }
    return View(db.Movies.ToList());
}

再次运行应用程序并访问 /Movies,现在你应该能看到你添加的两部电影了！

第六部分：验证编辑方法和编辑视图

这部分和后面的部分，我们将专注于标准的 CRUD（创建、读取、更新、删除）操作，由于篇幅限制，我将直接展示核心代码和步骤，你可以参考 MSDN 官方文档获取更详细的解释。

添加 `Create` 方法

在 MoviesController 中添加 Create 的 HttpGet 和 HttpPost 版本。

HttpGet Create：返回一个空的创建表单。
HttpPost Create：接收表单提交的数据,验证并保存到数据库。

// 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);
}

创建 `Create` 视图

右键单击 Create 方法，选择 添加视图...，选择创建模板，模型类选择 Movie。

添加 `Edit` 方法

与 Create 类似，Edit 也需要 HttpGet 和 HttpPost 两个版本。

// GET: /Movies/Edit/5
public ActionResult Edit(int id)
{
    Movie movie = db.Movies.Find(id);
    if (movie == null)
    {
        return HttpNotFound();
    }
    return View(movie);
}
// POST: /Movies/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(Movie movie)
{
    if (ModelState.IsValid)
    {
        db.Entry(movie).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(movie);
}

创建 `Edit` 视图

右键单击 HttpGet 版本的 Edit 方法，选择 添加视图...，选择编辑模板。

验证工作原理

我们在 Movie 模型中使用了 [DataType(DataType.Date)] 这样的数据注解，当你在视图中使用 @Html.EditorForModel() 或 @Html.EditorFor() 时，这些注解会自动生效，ReleaseDate 字段会显示为日期选择器。

在 Create 和 Edit 的 HttpPost 方法中，ModelState.IsValid 会检查：

表单是否提交成功。
每个数据字段是否符合模型类上定义的验证规则（如数据类型、必填、字符串长度等）。如果验证失败，ModelState.IsValid 为 false，控制器会返回视图,并显示验证错误信息。

第七部分：搜索功能

添加 `SearchIndex` 方法

在 MoviesController 中添加以下方法：

public ActionResult SearchIndex(string searchString)
{
    var movies = from m in db.Movies
                 select m;
    if (!String.IsNullOrEmpty(searchString))
    {
        movies = movies.Where(s => s.Genre.Contains(searchString));
    }
    return View(movies);
}

创建 `SearchIndex` 视图

右键单击 SearchIndex 方法，选择 添加视图...。

模板：选择列表。
模型类：选择 Movie。
数据上下文类：选择 MovieDBContext。

在视图中，找到 <h2>Index</h2> 下面的 <p> 标签,将其修改为：

@using (Html.BeginForm("SearchIndex", "Movies", FormMethod.Get))
{
    <p>
        Genre: @Html.TextBox("searchString")  
        <input type="submit" value="Filter" />
    </p>
}

现在运行应用，访问 /Movies/SearchIndex，你应该能看到一个搜索框,可以按电影类型进行筛选。

第八部分：新字段和数据验证

这部分与第六部分类似，重点是修改模型后如何更新数据库,你可以：

在 Movie 模型中添加新属性，Rating。
更新 Create 和 Edit 视图，为 Rating 字段添加输入框。
在 Movie 模型上添加验证规则，[Required]。
运行应用，EF Code-First 会检测到模型变化，并更新数据库架构（或使用 Code First 迁移）。

第九部分：详细信息和删除方法

这两个方法的实现相对直接。

`Details` 方法

根据 ID 获取单个电影对象并传递给视图。

public ActionResult Details(int id)
{
    Movie movie = db.Movies.Find(id);
    if (movie == null)
    {
        return HttpNotFound();
    }
    return View(movie);
}

`Delete` 方法

Delete 通常也需要两个版本：一个用于显示确认页面,一个用于执行删除操作。

// GET: /Movies/Delete/5
public ActionResult Delete(int id)
{
    Movie movie = db.Movies.Find(id);
    if (movie == null)
    {
        return HttpNotFound();
    }
    return View(movie);
}
// POST: /Movies/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
    Movie movie = db.Movies.Find(id);
    db.Movies.Remove(movie);
    db.SaveChanges();
    return RedirectToAction("Index");
}

第十部分：结论与后续学习

通过这个教程，你已经走过了 ASP.NET MVC 开发的核心流程：

理解了 MVC 架构。
创建了项目、控制器、模型和视图。
使用了 Entity Framework Code-First 与数据库交互。
实现了 CRUD 操作和搜索功能。
应用了数据验证。

下一步该学什么？

ASP.NET Identity：学习如何使用更现代的身份验证和会员系统来管理用户登录、注册和权限。
ASP.NET Web API：学习如何构建 RESTful API 服务，为移动应用或单页应用（如 Angular, React）提供数据。
ASP.NET Core：这是 Microsoft 目前主推的跨平台框架，它整合了 MVC 和 Web API，并提供了更优的性能和开发体验，如果你要开始新项目，强烈建议从 ASP.NET Core MVC 开始。
前端技术：深入学习 HTML5, CSS3, JavaScript 和现代前端框架（如 jQuery, Bootstrap, Angular, React）。
部署：学习如何将你的应用程序部署到云服务器（如 Azure, AWS）或虚拟主机上。

希望这份详细的教程能帮助你顺利入门 ASP.NET MVC4！祝你编码愉快！

ASP.NET MVC4教程怎么学？新手入门指南？

ASP.NET MVC4 教程：从零开始构建一个电影数据库应用

目录

第一部分：ASP.NET MVC 简介

什么是 MVC？

为什么选择 MVC？

本教程将创建什么？

第二部分：创建第一个 ASP.NET MVC 应用程序

创建项目

项目结构解析

运行应用程序

第三部分：添加一个控制器

什么是控制器？

添加 HelloWorldController

修改控制器方法

运行并测试

第四部分：添加模型

什么是模型？

创建模型类

初始化并设置数据库

第五部分：创建连接字符串并读取数据

设置连接字符串

创建控制器和视图

运行并测试

第六部分：验证编辑方法和编辑视图

添加 Create 方法

创建 Create 视图

添加 Edit 方法

创建 Edit 视图

验证工作原理

第七部分：搜索功能

添加 SearchIndex 方法

创建 SearchIndex 视图

第八部分：新字段和数据验证

第九部分：详细信息和删除方法

Details 方法

Delete 方法

第十部分：结论与后续学习

下一步该学什么？

相关推荐

Python自然语言处理如何高效处理PDF文档？

添加 `HelloWorldController`

添加 `Create` 方法

创建 `Create` 视图

添加 `Edit` 方法

创建 `Edit` 视图

添加 `SearchIndex` 方法

创建 `SearchIndex` 视图

`Details` 方法

`Delete` 方法