视图（View）用于展示模型（Model）数据。
view 常用的方式有引用母版页或者不引用母版页
@model IEnumerable<myfirstweb.models.Student> //@model声明controller传入的数据类型,传入的是一个可枚举类型 <html> <head> <h1>this view page by lys</h1>
@{ var testName="你好"； } </head> <body>
<i>@testName</i> <h2> @foreach (var st in Model) //Model代表从controller传入的数据 { <ul>@st.Id</ul> <ul>@st.Firstname</ul> //前面如果带有html的元素，使用Model的元素之前必须先用@引用 <ul>@st.Lastname</ul> } </h2> </body> </html>
这个是不引用母版页的
@{ } 这是代码块 可以在里面编写代码
@foreach() 循环
if switch 这些都能用只需在前面加上@ 或者写在代码块中
@model myfirstweb.ViewModels.StudentViewModel @{ ViewBag.Title = "创建页面";
Layout = "~/Shared/_Layout.cshtml";
} <body> <div> <form method="post" action=""> <div> <label asp-for="Firstname"></label> <input asp-for="Firstname" /> <span asp-validation-for="Firstname"></span> </div> <div> <label asp-for="Lastname"></label> <input asp-for="Lastname" /> <span asp-validation-for="Lastname"></span> </div> <div> <label asp-for="Id"></label> <input asp-for="Id" /> <span asp-validation-for="Id"></span> </div> <button type="submit" name="save">新增</button> </form> </div> </body>
@section fotter{
<div>------底部下划线------</div>
}
Layout 就是引用母版页 ,也可以不在这里引用 在_ViewStart.cshtml 里引用
@{ Layout = "_Layout"; }
_ViewStart.cshtml 只作用于当前目录
母版页
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
<div>
@RenderSection("fotter",false)
</div>
</body>
</html>
这是一个公共的布局：@RenderBody指渲染特定的目标视图；@RenderSection("fotter",false)是我手工加上去的，表示执行片段，片段名为fotter，而且false并不是每一个视图都需要执行这个片段
_ViewImports.cshtml 页面是全局引用
@namespace myfirstweb.Views @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @using myfirstweb.ViewModels
namespace myfirstweb.Views:表示命名空间是myfirstweb.Views
addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers：表示使用了TagHelper
using myfirstweb.ViewModels：表示使用了命名空间myfirstweb.ViewModels，这样就可以直接使用命名空间下的文件，而不需要带完整路径
在add.cshtml下使用@uisng myfirstweb.ViewModels.StudentViewModel就需要写完整名字，而可以直接using StudentViewModel
using myfirstweb.ViewModels
@model StudentViewModel @{ ViewBag.Title = "创建页面"; } <body> <div> <form method="post" action=""> <div> <label asp-for="Firstname"></label> <input asp-for="Firstname" /> <span asp-validation-for="Firstname"></span> </div> <div> <label asp-for="Lastname"></label> <input asp-for="Lastname" /> <span asp-validation-for="Lastname"></span> </div> <div> <label asp-for="Id"></label> <input asp-for="Id" /> <span asp-validation-for="Id"></span> </div> <button type="submit" name="save">新增</button> </form> </div> </body> @section fotter{ <div>------底部下划线------</div> }
局部视图用@Html.Partial(“局部视图页一般用下划线开始例如:_footer”,传入需要渲染的数据)
Partial View
- 复用 View 代码
- 可以嵌套
- 没有自己的 Model
- 两种用法
- partial Tag Helper（推荐）
@Html.Partial("_PartialViewName", data)
View Components
- 可复用
- 独立的组件
- 有独立的逻辑/数据
- 相当于迷你 MVC 请求
- 不依赖于父级 View 的数据
-
和 Partial View 类似，View Component 也有两种用法，依然推荐 Tag Helper 用法。
@await Component.InvokeAsync("Welcome")<vc:welcome-students></vc:welcome-students>（推荐）
更多的用法可以参考https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/overview?view=aspnetcore-3.1