码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-06-22 14:44:29      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:overflow   you   add   form   写代码   cti   width   import   letter   

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

标签:overflow   you   add   form   写代码   cti   width   import   letter   

原文地址:https://www.cnblogs.com/cqqinjie/p/13176341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!