ASP.NET Core MVC 入门

.NET Core MVC在网上有很多介绍入门的文章，包括官方指导文档也有介绍。按照文档的步骤是很快的能够入门。那么，我们今天来个不一样的入门方式，用Asp.NET Core Web应用程序空模板来配置MVC。主要内容如下：

1. Startup类配置MVC服务
2. 配置请求管道
3. 添加控制器
4. 创建页面
5. 添加模型

首先创建一个空模板的Asp.Net Core应用程序，这里使用的是之前创建好的项目就不在详细的介绍创建步骤。接下来我们一步一步看下怎么通过MVC服务来配置Asp.NET Core Web应用程序成为MVC应用程序，然后窥探下MVC的结构。

1.Startup类配置MVC服务

首先，我们需要将所需的MVC服务添加到依赖项注入的容器中。因此，得在Startup类中的ConfigureServices()方法内添加如下代码。

services.AddMvc();

这行代码包含了开发Asp.Net Core MVC应用程序所需的所有必需服务。这里我们除了AddMvc()方法外，也可以使用AddMvcCore(),AddControllers(),AddControllersWithViews(),AddRazorPages()，后面我们再来讨论他们的区别。这里我们先使用AddMvc()。

2.配置Mvc请求管道

添加完MVC服务，我们还需将MVC中间件添加到应用程序的请求管道中。这里框架提供了两种中间件，即UseMvcWithDefaultRoute()和UseMvc()。我们先使用UseMvcWithDefaultRoute()中间件，后面再介绍UseMvc()。在Startup类中的Configure()方法里添加Mvc管理代码如下：

app.UseMvcWithDefaultRoute();

添加完这行代码，会出现绿色波浪线，鼠标放在代码上有相关提示，是否配置为终结点。改为false就好。提示如下图：

我们根据提示，在ConfigureServices()添加Mvc服务稍作修改，代码如下：

services.AddMvc(options=> { options.EnableEndpointRouting = false;});

以上配置添加完毕，Startup类的代码如下：

using Microsoft.AspNetCore.Builder;using Microsoft.Extensions.DependencyInjection;
namespace FirstWebApp{ public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc(options=> { options.EnableEndpointRouting = false; }); }
 public void Configure(IApplicationBuilder app) { app.UseMvcWithDefaultRoute(); } }}

我们先运行下项目，看结果如何？恩，在没有其它代码的前提下，运行结果直接报404。这是因为还没有添加控制器，也没有配置终结点，配置路由管道时用的是默认，具体可以来看下UseMvcWithDefaultRoute()这个方法，直接右键跳转到定义。该方法的摘要如下：

红色框起来的是Mvc运行起来根Url的默认路由设置。对于我们现在项目默认控制器为Home，默认操作为Index。为了让项目运行起来，继续往下走——添加控制器。

3.添加控制器

右击项目名称先添加一个Controllers文件夹用于存放项目里控制器类。在Controllers文件夹下创建一个HomeController类。类名是以名称+Controller的固定形式来命名。在HomeController类添加一个Index方法，代码如下：

public string Index(){ return "Hello World!";}

这时我们再运行下项目，浏览器输出”Hello World!”。这是一个简单的输出字符串的mvc，没有涉及到视图及模型。假设我们现在不想输出一串字符串，我们展示图片、表格、文字段落等。这就需要我们Index返回视图。

4.添加视图

添加视图前，我们修改下HomeController这个类。让HomeController继承Controller抽象类，然后修改Index()返回类型为IActionResult，方法体直接return View()。此时HomeController类的代码如下：

using Microsoft.AspNetCore.Mvc;
namespace FirstWebApp.Controllers{ public class HomeController : Controller { public IActionResult Index() { return View(); } }}

代码改造完毕，我们运行看下结果，此时由于没有创建视图，直接报500错误，原因Index视图不存在。所以我们要创建一个Index的页面。

右键项目名称，添加一个Views文件夹，在Views文件夹创建一个以控制器名称(Home)命名的文件夹，在Home这个文件夹创建一个Index命名的Razor 空页面。在这个Index.cshtml页面上添加一个span标签，内容为“Index视图”。

这时我们运行项目，浏览器输出“Index视图”。当浏览呈现这句话说明视图返回成功，这时展现你的审美到了。

看到这里大家会有疑惑，从用户输入地址mvc是怎么找到相应的页面的？另外，视图的路径为什么是views/home/index.cshtml？在配置mvc中间件时，我们使用的是mvc默认的路由配置，即用户输入地址格式是：http://localhost:23234/{controller}/{action}，而它对应的视图路径为~/views/{controller}/{action}.cshtml。而我们项目启动时是根地址，默认找到的是Home控制器下的Index。

好了，我们现在来思考一个问题，假设我们从数据库获取到一个对象或者列表，我们怎么将这个数据传递到页面并呈现。实现的方式主要是通过Model进行传递。接下我们来看下是怎么从控制器传递到页面上的。

5.添加模型

假设我们现在有一个订单，订单里有订单号，下单时间，下单描述，价格等这些信息，我们要将这些信息传递到页面呈现出来，来看下代码实现步骤。

首先右击项目名称创建一个文件夹名为Models，该文件夹专门存放数据对象信息。在Models下创建一个类为OrderDetail，并添加OrderNo,CreatedAt,Descript,Price这些属性。我们再为OrderDetail类添加一个构造方法，主要是给属性做初始值。代码如下：

using System;
namespace FirstWebApp.Models{ public class OrderDetail { public string OrderNo { get; set; }
 public string Descript { get; set; }
 public decimal Price { get; set; }
 public DateTime CreatedAt { get; set; }
 public OrderDetail(string orderNo,string descript,decimal price,DateTime createdAt) { OrderNo = orderNo; Descript = descript; Price = price; CreatedAt = createdAt; } }}

接下来我们回到那个HomeController类来，在Index方法里，创建一个OrderDetail对象，并传参。return View(对象名);具体代码如下：

using FirstWebApp.Models;using Microsoft.AspNetCore.Mvc;using System;
namespace FirstWebApp.Controllers{ public class HomeController : Controller { public IActionResult Index() {
 OrderDetail detail = new OrderDetail("2020092210001", "iPhone 12 128G", 6999, DateTime.Now);
 return View(detail); } }}

最后在页面输出，在Index.cshtml文件的顶部添加@model FirstWebApp.Models.OrderDetail才能在html里调用Model，具体代码如下：

@model FirstWebApp.Models.OrderDetail<span>Index视图</span>
<ul> <li>订 单 号：@Model.OrderNo</li> <li>价 格：￥@Model.Price</li> <li>描 述：@Model.Descript</li> <li>创建时间：@Model.CreatedAt</li></ul>

好了，收工，整体的mvc创建流程就是这样，项目的整体文件结构如下：

写在后面，其实创建webapi跟mvc一样，大家可以自己试着写下。

最后，祝大家学习愉快！