基于.netcore的MVC应用开发经验共享

1 起个头
html

不少95后的程序员没有搞明白MVC,须要多练习才行。程序员

MVC实际上不是设计模式,而是架构模式/体系结构模式,体系结构是老称呼了,如今基本上都叫架构了。正则表达式


模型-视图-控制器 (MVC) 体系结构模式将应用分红 3 个主要组件:模型 (M)、视图 (V) 和控制器 (C)。 MVC 模式有助于建立比传统单片应用更易于测试和更新的应用。 数据库

模型 (M):表示应用数据的类。 模型类使用验证逻辑来对该数据强制实施业务规则。 一般,模型对象检索模型状态并将其存储在数据库中。json

视图 (V):视图是显示应用用户界面 (UI) 的组件。 此 UI 一般会显示模型数据。设计模式

控制器 (C):处理浏览器请求的类。 它们检索模型数据并调用返回响应的视图模板。 在 MVC 应用中,视图仅显示信息;控制器处理并响应用户输入和交互。 例如,控制器处理路由数据和查询字符串值,并将这些值传递给模型。 该模型可以使用这些值查询数据库。浏览器



1.1 MVC优势服务器

MVC 模式可帮助建立分隔不一样应用特性(输入逻辑、业务逻辑和 UI 逻辑)的应用,同时让这些元素之间实现松散耦合。 网络

该模式可指定应用中每种逻辑的位置。 UI 逻辑位于视图中。 输入逻辑位于控制器中。 业务逻辑位于模型中。架构

这种隔离有助于控制构建应用时的复杂程度,由于它可用于一次处理一个实现特性,而不影响其余特性的代码。 例如,处理视图代码时没必要依赖业务逻辑代码



1.2 建立一个MVC项目

image.png


1.3 新增一个控制器

image.png

image.png


image.png


image.png


1.4 新增HTTP终结点调用

控制器中的每一个 public 方法都可做为 HTTP 终结点调用。

HTTP 终结点是 Web 应用程序中可定向的 URL(例如 https://localhost:44399/EdisonTest ),其中结合了所用的协议HTTPS TCP 端口等 Web 服务器的网络位置 localhost:44399 ,以及目标 URI EdisonTest

image.png




image.png


2 进一步

2.1 路由


MVC 根据入站 URL 调用控制器类(及其中的操做方法)。 MVC 所用的默认 URL 路由逻辑使用以下格式来肯定调用的代码:

/[Controller]/[ActionName]/[Parameters]


Startup.cs 文件的 Configure 方法中设置路由格式。

若是浏览到应用且不提供任何 URL 段,它将默认为左边红线行中指定的“Home”控制器和“Index”方法。


第一个 URL 段决定要运行的控制器类。 localhost: 44399映射到 EdisonTestController 类。

第二个 URL段决定类上的操做方法。  localhost:44399/EdisonTest/GetOwnerName 将触发 EdisonTestController 类的GetOwnerName 运行。 请注意,只需浏览到 localhost:xxxx/EdisonTest ,而GetOwnerName 方法默认调用。 缘由是 GetOwnerName 是默认方法,若是未显式指定方法名称,则将在控制器上调用它。

第三个URL ( id ) 针对的是路由数据。 

image.png

测试:

image.png


2.2 增长参数

修改代码,将一些参数信息从 URL 传递到控制器。

 image.png

使用 C# 可选参数功能指示,未为 numTimes 参数传递值时该参数默认为 1。

使用 HtmlEncoder.Default.Encode 防止恶意输入(即 JavaScript)损害应用。

$"I am Edison.Feng, you are {name}. Number of Times:{numTimes}"中使用内插字符串。


测试:

image.png


2.3 参数路由

参数也能够做为路由:

image.png

测试:

image.png


问题1:路由的第三部分怎么解析的?

问题2:路由的第三部分的问号表示什么?

image.png



2.4 增长一个View视图


目的:消除前面的硬编码,不直接返回HTML文件内容,而是返回视图对象:

使用 Razor 视图文件来顺利封装为客户端生成 HTML 响应。

使用 Razor 建立视图模板文件。 基于 Razor 的模板具备“.cshtml”文件扩展名。 它们提供了一种巧妙的方法来使用 C# 建立 HTML 输出。

 

右键单击Views”文件夹,而后单击“添加”>“新文件夹”,并将文件夹命名为“EdisonTest”。

右键单击Views/EdisonTest”文件夹,而后单击“添加”>“新项”。

“添加新项 - MvcMovie”对话框中

在右上角的搜索框中,输入“视图”

选择Razor 视图”

保持“名称”框的值:getownername.cshtml

选择“添加”

image.png




image.png


修改视图文件getownername.cshtml:

image.png


修改默认路由,Startup.cs:


image.png


修改控制器,增长一个get方法:

image.png

测试:

image.png


2.5 给视图传点数据


使用ViewData在视图和控制器之间传递数据:

(1)修改控制器

image.png

(2)修改视图

image.png


(3)测试

image.png



3 数据库操做


3.1 将真实的数据存在数据库中,并取出来


结合 Entity Framework Core (EF Core) 使用这些类来处理数据库。 EF Core 是对象关系映射 (ORM) 框架,能够简化须要编写的数据访问代码。

要建立的模型类称为 POCO 类(源自“简单传统 CLR 对象”),由于它们与 EF Core 没有任何依赖关系。 它们只定义将存储在数据库中的数据的属性。


3.2 新增一个模型Model


选中Models文件夹,右键菜单......


image.png


3.3 增长属性


数据库须要 Id 字段以获取主键。

 

[DataType(DataType.Date)] DataType 属性指定数据的类型 ( Date )

经过此特性:

用户无需在数据字段中输入时间信息。

仅显示日期,而非时间信息。

DataAnnotations



image.png


3.4 “脚手架”工具

脚手架:Scaffold,或者翻译为基架

.net core经过脚手架工具(Scaffolded Item)生成页面,用于对模型Model执行建立、读取、更新和删除 (CRUD) 操做


image.png


3.5 使用EF Core的视图


模型类:选择刚刚建好的模型类Movie

数据Context类:新建,默认命名为MvcMovie1Context

视图:默认

控制器名称:默认

image.png



3.6 “搭建基架”过程自动建立哪些文件?


EF Core数据库Context类

控制器

Razor视图文件(CRUD

Create

Index

Details

Edit

Delete


3.7 EF Core迁移功能


不使用EFCore迁移功能,只“搭建基架”则程序运行提示SqlException:不能打开数据库

image.png


初始迁移

进入PMC(即程序包管理控制台)

输入Add-Migration Initial并回车,生成用于建立初始数据库架构的代码,数据库架构基于在 MvcMovieContext 类中指定的模型。Initial 参数是迁移名称

输入Update-Database并回车,在 Migrations/{time-stamp}_InitialCreate.cs 文件中运行 Up 方法。Migrations/{time-stamp}_InitialCreate.cs用于建立数据库

依赖注入

脚手架工具已经把数据上下文类MvcMovie1Context注入到容器services

AddDbContext 指定数据库和链接字符串

=>Lambda运算符


image.png


数据上下文类为 Movie 模型协调 EF Core 功能

(建立、读取、更新、删除等)

实体集DbSet对应数据库的数据表

经过调用 DbContextOptions 对象中的一个方法将链接字符串名称传递到上下文。

进行本地开发时, ASP.NET Core 配置系统 在 appsettings.json 文件中读取数据库链接字符串。

image.png


3.8 CRUD: Details

Details方法

将强类型模型对象传递给视图:凭借此强类型方法可更好地对代码进行编译时检查

FirstOrDefaultAsync返回知足条件的第一个元素,或者在不知足条件下的默认元素

m => m.Id == id 元素的ID等于给定的ID

Details.cshtml

@model MvcMovie1.Models.Movie

经过将 @model 语句包括在视图文件的顶端,

能够指定视图指望的对象类型

image.png


image.png


3.9 CRUD: Index

Index方法

ToListAsync异步建立一个List

image.png


Index.cshtml

image.png


3.10 CRUD: Edit


image.png



3.11 CRUD: Create


image.png

3.12 CRUD: Delete



image.png


4 扩展更多的

4.1 数据库链接字符串


DbContextOptionsBuilder.UseSqlServer

IConfiguration.GetConnectionString

image.png


image.png

AppSettings.json

image.png



3.2 SQL Server Express LocalDB

SQL Server对象资源管理器

image.png

视图设计器

image.png

image.png


l 查看数据

image.png


image.png


4.3 数据库种子


数据库种子:没有任何数据时初始化数据

修改Main方法

增长SeedData类


image.png


image.png

测试:

删除数据库的数据以后测试,如图。

image.png

刷新数据库后查看数据

image.png


4.4 修改显示列表


修改列Title。

修改列数据显示格式



image.png



4.5 按标题搜索

Index操做增长一个参数。

s => s.Title.Contains() 代码是 Lambda 表达式

Lambda 表达式在基于方法的 LINQ 查询中用做标准查询运算符方法的参数,如 Where 方法或 Contains,在对 LINQ 查询进行定义或经过调用方法(如 WhereContains OrderBy)进行修改前不会被执行。这意味着表达式的计算会延迟,直到真正循环访问其实现的值或者调用 ToListAsync 方法为止。

Contains 方法在数据库上运行,而不是在 C# 代码中运行  

cshtml中绑定两个input标签。

 <form> 标记使用表单标记帮助器,提交表单时筛选器字符串会发布到电影控制器的 Index 操做。

image.png


image.png



增长一个POST Index操做

测试

再也不出现过滤页面

image.png


image.png


image.png



修改index.cshtml

测试:可以转到过滤页面

image.png


image.png


4.6 按流派搜索

修改index操做方法

System.linq命名空间,有两个静态类:QueryableEnumerable

IQueryablewhere条件接收表达式,延迟执行

IEnumerablewhere条件接收一个谓词表达式(委托),当即执行

SelectListSelectListItem的集合,和<select>标签联合使用

修改index.cshtml

最上面一句改成:@model MvcMovie1.Models.GenreViewModel

Title: <input......上面增长:

<select asp-for="MovieGenre" asp-items="Model.Genres">

            <option value="">all</option>

        </select>

修改Title: <input......Title: <input type="text" asp-for="searchString">

model.Title改成model.Movies[0].Title

model.ReleaseDate改成model.Movies[0].ReleaseDate

model.Genre改成model.Movies[0].Genre

model.Price改成model.Movies[0].Price

@foreach (var item in Model) {改成@foreach (var item in Model.Movies) {

image.png



image.png


image.png


image.png


4.7 增长新属性

修改Models/Movie.cs

修改控制器

更新Create方法的[Bind]属性

更新Edit方法的[Bind]属性

修改Views/Movies/Index.cshtml

更新 /Views/Movies/Create.cshtml

更新 /Views/Movies/Edit.cshtml

更新 SeedData

更新数据库

EF Core重建数据库

对数据库直接修改表结构

使用Code First迁移(将新字段添加到模型,将新字段迁移到数据库)

进入PMC

执行Add-Migration Rating

Add-Migration 命令会通知迁移框架使用当前 Movie DB 架构检查当前 Movie 模型,并建立必要的代码,将 DB 迁移到新模型。

名称Rating”是任意的,用于对迁移文件进行命名。 为迁移文件使用有意义的名称是有帮助的。

执行Update-Database

若是删除 DB 中的全部记录,初始化方法会设定 DB 种子,并将包括 Rating 字段。

image.png


image.png


image.png

image.png


image.png


image.png


image.png



image.png

image.png


image.png



4.8 预校验

以下图,有以下几种标注:

Required

必需,缺乏则返回400错误

MinimumLength

最小长度

RegularExpression

正则表达式

Range

范围

StringLength

字串长度

DataType

数据类型

须要禁用 jQuery 日期验证才能使用具备 DateTime Range 特性

image.png


image.png



image.png


image.png


image.png




DRY原则是很是有用的:

image.png

相关文章
相关标签/搜索