Model-View-Controller (MVC)
它是一种软件架构模式
将一个应用程序分为三个主要组件
模型,视图,控制器
有助于创建可测试和易于维护的应用程序
Model模型
表示应用程序数据的类
执行验证和业务规则
View视图
处理应用程序UX/UI的组件
Controller控制器
处理浏览器请求的类
检索模型数据
指定视图模板
向浏览器返回响应MVC动机
创建应用程序,分离应用程序的不同方面
输入逻辑
业务逻辑
UI逻辑
维护这些元素之间的松散耦合
MVC指定每种逻辑在应用程序中的位置
视图中的UI逻辑
控制器的输入逻辑
模型中的业务逻辑
有助于在构建应用程序时管理复杂性
URL Routing(路由)
MVC URL 路由模式
静态文件如:html,jpeg(图片),css等文件,每个URL必须匹配一个特定的文件在wwwroot
MVC
使用路由消除了将每个URL映射为物理文件的需要
路由允许URL映射到控制器类(Contoller)、动作方法(Action)和参数(Id)
路由配置
路由逻辑在Startup.cs的Configure方法中定义
第一段为控制器
第二段是行动
第三段是id(可选,?)
每段用斜杠(/)分隔
默认控制器是Home(由"=Home"指定)默认操作是Index(由"=Index"指定)url中的Controller和Action不区分大小写。"Home", "hoMe", "HOME", "home"都是一样的
示例:http://locahost/Pokedex/Number/50
Controller 是 Pokedex
Action 是 Number
Id 是50
http://locahost/Pokedex/
Controller 是 “Pokedex”
Action 默认是 Index
Id 是 null
http://locahost/
Controller 是Home
Action 是 Index
Id 默认是null
下面我们将新建一个项目来简单实践MVC 及之前介绍到的HTML和CSS还记得我们在介绍NET的时候创建了一个示例项目的步骤吗?我们还是按照那个步骤在同一个解决方案下面创建一个名位L02的MVC示例项目
项目创建好了如图所示:
因为我们本节实践NetCoreMVC所以我们需要通过Nuget包管理器为项目添加
在L02项目中找到依赖项右键>选择“管理NuGet程序包”
在浏览里面通过搜索“aspnetcore.mvc”然后找到我们需要添加的引用并安装
接下来我们将为MVC添加对应的默认文件夹
所有的控制器存放在Controllers文件夹中
所有的模型存放在Models文件夹中
所有哦的视图存放在Views文件夹中
为了是项目支持MVC运行,则需要通过修改Startup.cs 来配置相关信息
在ConfigureServices方法中注入开启MVC
在Configure方法中启用静态文件访问处理及配置mvc默认路由信息
到此基本的MVC环境以及配置好了,接下来同个一个实例来测试
我们先创建一个名位Greeting模型(Model)
因为默认所有的模型放在Models文件夹中所以我们右键Models文件夹>添加新项>类>更改文件名位Greeting>添加即可
然后打开刚刚创建的Greeting.cs文件书写如下代码,此时我们就用到了我们以前介绍的C#的相关知识,比如属性、构造方法等
To,From,Title,Message为类的可读写属性,如果只有set则为只写属性,只有get则为只读属性,两者皆有则为可读可写属性
publicGreeting(....){}为类的构造方法,注意类的构造方法名与类同名,此构造方法用于在为Greeting创建对象的时候设置各属性的值
创建一个控制器(Controller)
右键Controllers文件夹>添加>选择控制器>选择MVC控制器空>点击添加
一个空的默认控制器就创建好了如图:
然后我们在控制器中创建一个名位Welcome的Action,并编写如下代码
因为控制器中需要用到我们上面创建的Model所以需要在本控制器的上面通过using引用model所在的命名空间
这里重点注意控制器的几个需要关注的知识点从基类派生(继承)
Microsoft.AspNetCore.Mvc.Controller
类的命名必须以“Controller”结束。如。
HomeController
DemoController
StudentController
类中的公共实例方法表示Action
返回一个IActionResult类型的视图对象
使用ViewData将数据传递给View不知道到大家注意到没有上面使用了“ViewData”
下面我们介绍一下ViewData
ViewData是一个字典
包含键值对
每个键必须是字符串
每个值可以是任意对象
它用于将数据从Action传输到View
仅在当前请求期间有效
使用ViewData从Action把数据传输到View在Action中
在View中
注意因为View需要用到Model所以在视图的最上面用using引用Model所在的命名空间“L02.Models”否则视图文件中将不能使用Greeting类
创建一个Welcome Action 对应的视图(View)
首先在Views文件夹中创建一个Home控制器对应的文件夹“Home”此时不需要“Controller”结尾
视图文件夹必须与控制器名称相同
右键Home文件夹>添加>选择视图然后如图所示操作:
注意第一次创建视图估计会需要安装一些视图需要的引用及环境,需要耐心等待一会,放心此过程是完全自动的
打开刚刚创建的Welcome.cshtml视图文件,按图编写对应的代码
到这里一个完整的MVC流程创建完毕,我们来运行一下看看效果。
运行方式:右键需要运行的视图文件>选择在浏览器中查看即可运行该视图
如果能看到上图呈现的结果,那么恭喜你!现在大家应该对MVC有个大概的概念了吧,但是这个只是刚开始,还需要继续努力,后续我们会逐步逐步深入下去
视图(View)的一些要点
View封装了用户与应用程序交互的表示细节视图是带有嵌入式代码的HTML模板,生成内容发送到客户端。视图使用Razor语法允许c#代码轻松地与HTML代码交互。Controller将模型中定义的数据传递给视图View使用模型中定义的数据来呈现网页Controller将呈现的网页返回给客户端(浏览器)。命名约定视图文件夹应该与控制器具有相同的名称视图名称与控制器中的Action名相同Razor介绍Razor 不是一种编程语言。它是服务器端的标记语言Razor 是一种标记语法,可以让您将基于服务器的代码(Visual Basic 和 C#)嵌入到网页中。
基于服务器的代码可以在网页传送给浏览器时,创建动态 Web 内容。当一个网页被请求时,服务器在返回页面给浏览器之前先执行页面中的基于服务器的代码。通过服务器的运行,代码能执行复杂的任务,比如进入数据库。
Razor 是基于 ASP.NET 的,是为创建 Web 应用程序而设计的。它具有传统 ASP.NET 的功能,但更容易使用并且更容易学习Razor语法包括Razor 标记
@
@( 表达式)
@{ 声明语句}
@* 注释*@
C# 代码
HTML 代码更多语法可以自行搜索相关手册学习,当然我们后续会大量使用Razor不同语法、用法,可以边实践边学习,无须担心,学习是个渐进的积累过程