ASP.NET MVC5（VS 2019）边做边学（01）创建项目&控制器与视图的关系

ASP.NET MVC模式已经逐步取代传统的WebForm模式，今天直接动手，边做边学，来探索MVC。

首先安装Visual Studio 2019，这种软件建议安装最新版。

官网地址：https://visualstudio.microsoft.com/zh-hans/vs/ ，一般下载professional版即可

安装过程忽略，务必勾选安装“ASP.NET和Web”和你会用的语言

第一步：创建项目

新建项目，选择“ASP.NET Web 应用程序（.NET Framework）”

下一步，填写项目名称，选择目录，选择.NET版本（暂选4.5），点击创建

选择MVC模式。右侧的Web窗体如果勾选，则实现兼容WebForm，这里不选。

点击创建，等待几秒，然后可以看到项目目录。

主要的目录结构如下

此刻，先执行生成解决方案，然后打开调试（建议在本机IIS设置项目目录站点），看到已有的首页内容

这是新项目自动创建的首页和示例内容，VS已自动内置了jquery和bootstrap3.4，所以可以看到熟悉的bootstrap排版

现场的示例代码不要删掉，来分析一下。

我们看到的内容，都是View呈现出来的html内容，而View是由Controller操作的

展开Controller和View目录，可以发现如下文件

名为Home的控制文件和视图目录，视图目录中有：关于、联系、首页三个文件，目测与首页导航的链接对应，分别打开三个cshtml文件，可以验证确实对应。再打开HomeController.cs文件，看到3个ActionResult的function，名称也是对应这3个文件。

那么，第一个问题，首页目录名为什么是Home，不应该是Index吗？

其实，这是路由配置的结果，MVC与Webform最直接的区别就是URL路径，MVC站点你访问 /abc，实际不存在 /abc这个物理文件，而是访问了控制层的 /abc，然后控制层反馈给你一个View让你在浏览器看到。

路由配置在App_Start目录下的RouteConfig.cs，打开后可以看到如下代码：

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

namespace sky
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

这里配置了一个默认路由 url: "{controller}/{action}/{id}"，同时可以看到Home被设定为默认控制，Index被设定为默认action。

关键的 url: "{controller}/{action}/{id}"

可以初步理解为：站点URL中的二级目录为控制层名称，三级目录名是该控制层下的一个action名称，再下级的id是该action的参数（参数是可选的）

举例：按传统WebForm的思路，你的网站有个管理员目录名为 admin，目录下有个登录页，名为 login.aspx

这样的情况，在MVC中的做法是：首先在Controllers目录中创建一个 admin的controller文件，按命名规则应是 adminController.cs，并在这个cs文件中写一个 login的函数；接着，在View目录下，创建名为admin的目录，在admin目录下创建名为 login.cshtml 的视图文件，然后当你在浏览器提交 /admin/login 的时候，程序会执行 adminController对象中的名为 login的函数，然后该函数返回指定的视图给你，如无特别指定，就给你对应视图层中的对于内容 View/admin/login.cshtml

我来画个流程图：

控制器的作用是很大的，它可以接收用户请求的参数，处理数据，可以与Model层连接获取数据，然后根据业务逻辑把数据传输到视图。

在渲染视图上，控制层并不是只能返回对应的视图，也可以自定义返回其他视图，甚至仅返回一串字符。

下面，我们来动手尝试一下：

1、在Controllers目录上右键，新建--控制器，然后选择 MVC5控制器-空，取名为 adminController

然后，在Views下创建 admin 目录，右键admin目录，添加-视图，名为 Index （暂不勾选布局页）

打开视图文件后，我们在<div>标签中输入你好： @ViewBag.msg ，这是 admin/login 的视图内容，代码如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        你好： @ViewBag.msg ，这是 admin/index 的视图内容
    </div>
</body>
</html>

解释一下：

1、最顶部的代码是微软提供的 Razor代码，主要是应用在视图文件中的服务器端标记语言。Layout = null 表示该视图不使用布局页。

2、@ViewBag.msg 是控制层向视图层传输数据的一种方式，还有ViewDate等其他方式。

下面，我们来打开控制层文件 adminController.cs，看到代码如下：

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

namespace sky.Controllers
{
    public class adminController : Controller
    {
        // GET: admin
        public ActionResult Index()
        {
            return View();
        }
    }
}

解析：

1、顶部引用了 System.Web 和System.Web.Mvc

2、主类继承 Controller

3、Index()的类型为 ActionResult，这类需要返回一个 View()，如果你仅需要返回一串字符，那就可以把ActionResult改为string

4、刚才我们在视图文件中输入了 @ViewBag.msg ，这是控制层向视图传输数据的方式，因此，我们在控制层代码中要通过@ViewBag传一个数据，我们在return View();之前加一句代码，修改代码为如下：

public ActionResult Index()
{
      @ViewBag.msg = "聪明的孩子";
      return View();
}

接着，我们编译一下，然后浏览器访问 /admin/ ，我们看到页面输出了：

由于是Index，所以URL中不需要输入index

此刻，已经初步理解了控制层与视图的关系，我们来尝试一下 /admin/login

1、Views/admin 下创建名为 login的视图文件，html中写一句：这是 /admin/login 的视图

2、adminController.cs文件中增加 login() 函数，增加后的adminController.cs如下

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

namespace sky.Controllers
{
    public class adminController : Controller
    {
        // GET: admin
        public ActionResult Index()
        {
            @ViewBag.msg = "聪明的孩子";
            return View();
        }

        public ActionResult login()
        {
            return View();
        }
    }
}

3、执行编译，然后浏览器访问 /admin/login，可以看到渲染的页面