zoukankan      html  css  js  c++  java
  • ASP.Net Core -- Partial View

    Partial View:顾名思义,就是一部分视图,叫“分布视图”;

    1:主要用来复用代码,它里边的代码可以到处复用,就像公有方法一样。如图:

     

    2:index.cshtml页面继承了布局页,在index页面里又使用@HTML.Partial()语句来调用一个分布视图。

    3:第一个参数是分布视图名称,第二个参数是从index页面传过去的参数内容。

    4:分布视图没有自己的数据,它里边的数据需要从调用的一方传进来。

    5:分布视图的名称一般是以下划线“_”开头,比如:_StudentList.cshtml

    代码示例如下:

    分布视图一般建立在shared文件夹下,这样所有视图都可以调用,这里我放在Home文件夹下,所以Home文件夹里所有的视图都可以使用,如下:

    我先建立一个名为_StudentTable.cshtml的分布视图,用来显示学生信息列表,如下:

    @model IEnumerable<StudentViewModel>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
    
        @foreach (var studentList in Model)
        {
            <tr>
                <td> @studentList.Name</td>
                <td>@studentList.Age</td>
            </tr>
        }
    </table>
    

    然后在index.cshtml调用:

    @model HomeIndexViewModel
    
    <h1>用户信息列表</h1>
    <partial name="_StudentTable" for="studentList"/> @section bottom { <div> <a asp-action="Create">创建一个学生信息</a> </div> }

    这样,在index页面加载的时候,红色部分就会显示学生列表信息。里边的HTML就是_StudentTable里的代码。在这里使用的taghelper标签,所以属性for里边直接放HomeIndexViewModel里的属性就行。

    可以再新建一个名为_StudentRow.cshtml的分布视图,将_StudentTable.cshtml里的tr提取,嵌套着来使用,如下:

    @model StudentViewModel
    <tr>
        <td> @Model.Name</td>
        <td>@Model.Age</td>
    </tr>
    

    然后在_StudentTable.cshtml里调用:

    @model IEnumerable<StudentViewModel>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
    
        @foreach (var studentList in Model)
        {
            <partial name="_StudentRow" for="@studentList"/>
        }
    </table>
    

    这样,这两个存放学生列表信息的分布视图在home文件夹里所有视图都可以这样调用。

    缺点就是它没有自己的model

  • 相关阅读:
    Hibernate中的HQL
    hibernate配置数据库连接池三种用法
    Hibernate的延迟检索和立即检索
    Hibernate关系映射中的注解
    Hibernate的多种关系映射(oto、otm、mtm)
    自然主键和代理主键的区别
    Hibernate的xml方法配置和操作代码
    Hibernate简介
    VirtualBox从USB设备(PE)启动图文教程
    属性动画
  • 原文地址:https://www.cnblogs.com/dcy521/p/13544947.html
Copyright © 2011-2022 走看看