asp.net core2 mvc 基础教程--View 视图

视图（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

@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”,传入需要渲染的数据)

更多的用法可以参考https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/overview?view=aspnetcore-3.1

asp.net core2 mvc 基础教程--View 视图

猜你喜欢