小白学 asp net core --- 视图View

最新推荐文章于 2024-04-28 14:16:20 发布

lysddp

最新推荐文章于 2024-04-28 14:16:20 发布

阅读量1.5k

点赞数 5

分类专栏： net core 文章标签： c# asp net core web

本文链接：https://blog.csdn.net/lysddp/article/details/91403803

版权

net core 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

前言：View视图，MVC架构中的展现层，本文主要介绍了视图的默认文件存放路径、_ViewStart.cshtml和_ViewImports.cshtml、部分视图和视图组件

一、Controller控制器对应的View文件寻找路径

工程目录结构

1、Controller返回的结果要放入view中进行渲染，需要现在工程目录下创建如下的文件路径

Views/控制器名，例如HomeController访问路径是 /Views/Home

2、先看下原先Controller代码

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using myfirstweb.models;
using myfirstweb.Services;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace myfirstweb.Controllers
{
    public class HomeController : Controller
    {


        /*默认的控制器*/
        // GET: /<controller>/
        //public IActionResult Index()
        //{
        //    return View();
        //}

        //新建属性
        public IRepository<Student> _repository { get; }

        //新建构造函数，从ioc容器引入服务
        public HomeController(IRepository<Student> repository)
        {
            _repository = repository;
        }

        public IActionResult Mytest()
        {
            var st = new Student
            {
                Id = 10,
                Firstname = "lin",
                Lastname = "ys"
            };  // 使用model
      
            //return "setting by lys";
            //return new ObjectResult(st); //返回的是一个json
           
            return View(st);  //寻找视图,默认寻找路径为 /Views/Home/Mytest.cshtml
        }

        public IActionResult Myservice()
        {
            var list = _repository.GetAll();
            return View(list);     //寻找视图，默认路径是 /Views/Home/Myservice.cshtml
        }

    }
}

当HomeController对应的方法return view的时候，会去调用默认的视图文件，例如 Mytest方法return view，会去寻找 Views/Home/Mytest.cshtml;如果Myservice方法return view,会去寻找 Views/Home/Myservice.cshtml

( 如果Controller名字为TaskController，view为People，则寻找的视图文件路径是 /VIews/Task/People.cshtml。总之寻找的路径是 /VIews/Controller名字/view名字.cshtml)

3、现在我们来看看对应的view

Myservice.cshtml

@model IEnumerable<myfirstweb.models.Student>  //@model声明controller传入的数据类型,传入的是一个可枚举类型

<html>
<head>
    <h1>this view page by lys</h1>
</head>
<body>
    <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>

Mytest.cshtml

@model myfirstweb.models.Student


<html>
<head>
    <h1>this view page by lys</h1>
</head>
<body>
    <h2>@Model.Id</h2>
    <h3>@Model.Firstname</h3>
       
    <h3>@this.Model.Lastname</h3>
    <h4></h4>
</body>
</html>

二、两个特殊的view文件：_ViewStart.cshtml和_ViewImports.cshtml

1）在 Views下新建“MVC视图起始页”，默认文件名为_ViewStart.cshtml，以下为_ViewStart.cshtml默认内容：

@{
    Layout = "_Layout";  
}

Views目录下的所有视图在开始执行之前，需要先执行_ViewStart.cshtml，而Layout = "_Layout" 代表所有的视图的Layout是_Layout.cshtml文件。所有的视图共用一个Layout。既然是共用的视图文件，可以在Views目录下创建文件夹Shared，然后在Shared文件夹下创建"视图布局页面"_Layout.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并不是每一个视图都需要执行这个片段。下面以Create.cshtml页面为例：

@model myfirstweb.ViewModels.StudentViewModel

@{
    ViewBag.Title = "创建页面";

}
@section fotter{
    <div>------底部下划线------</div>
}


<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>

ViewBag.Title = "创建页面"，先将变量 ViewBag.Title赋值，并将变量传给_Layout.cshtml

@section fotter{ <div>------底部下划线------</div>} . 声明了片段fotter,所以在Create视图中会渲染这个片段。

2）在Views文件夹下新建“mvc视图导入文件”，默认文件名为_ViewImports.cshtml。_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，这样就可以直接使用命名空间下的文件，而不需要带完整路径

在Create.cshtml下使用myfirstweb.ViewModels.StudentViewModel就需要写完整名字，而可以直接using StudentViewModel

@model StudentViewModel

@{
    ViewBag.Title = "创建页面";

}
@section fotter{
    <div>------底部下划线------</div>
}


<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>

三、partial view (局部视图)

1、partival view的特点：

1）复用view代码

2) 通过 @Html.Partial("_PartialViewName",data) 调用局部视图,_PartialViewName是局部视图名，data是传入给局部视图的参数

3) 局部视图可以再去调用局部视图

4）异步版本是Html.PartialAsync

2、在/Views/Shared下创建局部视图文件_PartivalView.cshtml

<h1>@Model</h1>

3、在/Views/Home/Create.cshtml视图文件中调用这个局部视图

@model StudentViewModel

@{
    ViewBag.Title = "创建页面";

}
@section fotter{
    <div>------底部下划线------</div>
}


<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>

@Html.Partial("_PartivalView","创建的局部视图")

四、View Components 视图组件

1、view Componets的特点：

1）可复用

2）独立的组件

3）有独立的逻辑和数据

4）相当于迷你mvc请求

5) 不依赖于父级view的组件

2、在工程主目录下新建文件夹ViewComponets，然后在ViewComponets下新建一个文件WelcomeViewComponent.cs

using System;
using myfirstweb.Services;
using myfirstweb.models;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace myfirstweb.ViewComponents
{
    public class WelcomeViewComponent : ViewComponent
    {
        private readonly IRepository<Student> _repository;
        public WelcomeViewComponent(IRepository<Student> repository)
        {
            _repository = repository;
        }

        public IViewComponentResult Invoke(string inputstr)
        {

            return View("Testname", inputstr);
        }


    }
}

3、在 /Views/Shared/Components/Welcome 新建文件 Testname.cs

@model  string
<h1>学生姓名 @Model </h1>

4、在一般的View中调用该ComponentView，以下是在Create.cshtml视图中调用视图组件

@model StudentViewModel

@{
    ViewBag.Title = "创建页面";

}
@section fotter{
    <div>------底部下划线------</div>
}


<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>

@Html.Partial("_PartivalView","创建的局部视图")

@await Component.InvokeAsync("Welcome","输入参数")

欢迎到我的个人博客踩一踩

lysddp

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
小白学 asp net core --- 视图View

前言：View视图，MVC架构中的展现层，本文主要介绍了视图的默认文件存放路径、_ViewStart.cshtml和_ViewImports.cshtml、部分视图和视图组件一、Controller控制器对应的View文件寻找路径1、Controller返回的结果要放入view中进行渲染，需要现在工程目录下创建如下的文件路径Views/控制器名，例如HomeController访问...
复制链接

扫一扫

专栏目录