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: adminpublic 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: adminpublic ActionResult Index(){@ViewBag.msg = "聪明的孩子";return View();}public ActionResult login(){return View();}}
}

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

尝试成功！

下面我们修改 login() 中的 return View() ，改为 return View("Index")

然后编译，刷新 /admin/login ，你会看到

对，这就是index的视图，并且由于@ViewBag.msg没有值，因此不显示了。这就是自定义渲染视图的效果。

这篇，就写到这里，下一篇我们尝试一下参数的接收。

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

ASP.NET MVC5+EF6+EasyUI 后台管理系统（4）-创建项目解决方案
系列目录前言为了符合后面更新后的重构系统,文章于2016-11-1日重写设计中术语,概念这种东西过于模糊,我们必须学习累积才能认识这些概念模型. 我无法用文章来下详细解析此系统的深层概念,需要大 ...
从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板
标题:从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/11155 ...
ASP.NET MVC5 + EF6 通过model层创建controller时需要重新生成解决方案。
在用ASP.NET MVC5 + EF6 开发网页的时候,首先创建了model层的.cs文件,然后通过添加带有EF的控制器时报错,需要重新生成解决方案,才能通过models层直接生成controlle ...
ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html 上一节:ASP.NET MVC ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 日程管理 http:// ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（51）-系统升级
系统很久没有更新内容了,期待已久的更新在今天发布了,最近花了2个月的时间每天一点点,从原有系统 MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+E ...
ASP.NET MVC5使用Area区域
转载:http://www.lanhusoft.com/Article/217.html 在大型的ASP.NET mvc5项目中一般都有许多个功能模块,这些功能模块可以用Area(中文翻译为区域)把它 ...
构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统（52）-美化EasyUI皮肤和图标
构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(52)-美化EasyUI皮肤和图标系列目录我很久以前就想更新系统的皮肤功能,Easyui 自带的 ...
【.NET框架】—— ASP.NET MVC5路由基础（五）
1.1.ASP.NET MVC5路由概念及设置路由是实现资源交互访问的接口,路由匹配传入请求,并把这些请求映射到控制器操作,构造传出的URL,用来响应控制器操作. 路由的分类: 传统路由特性路由 ...

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

第一步：创建项目

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

最新文章

热门文章