mvc项目html文件路径,NetCore/Net5 Web应用开发基础-MVC入门

原标题：NetCore/Net5 Web应用开发基础-MVC入门

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示例项目

项目创建好了如图所示：

因为我们本节实践NetCore MVC 所以我们需要通过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则为只读属性，两者皆有则为可读可写属性

public Greeting(....){}为类的构造方法，注意类的构造方法名与类同名，此构造方法用于在为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不同语法、用法，可以边实践边学习，无须担心，学习是个渐进的积累过程

下一节我们将学习MVC表单输入处理返回搜狐，查看更多

责任编辑：