从零开始学习ASP.NET CORE（十四）视图

最新推荐文章于 2024-07-15 21:34:14 发布

一个正在途中的程序员

最新推荐文章于 2024-07-15 21:34:14 发布

阅读量332

点赞数

分类专栏： .NET 文章标签： asp.net 学习 html

本文链接：https://blog.csdn.net/father6/article/details/129248778

版权

.NET 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

布局页（一）

布局页，顾名思义，就是用来布局，我们平时的网站的顶部和底部的样式是一样的，如果每个html都添加顶部和底部，需要改的时候，就得把每个html都改一遍，所以布局页就是拿来复用，让每一个页面拥有同样的某个部分样式
按url的路径，在Views文件夹下面添加两个视图布局页文件，用于测试布局页
在这里插入图片描述

在Controller的Detail方法添加以下代码

        public IActionResult Detail()
        {
            //用View传数据给Page页面，见上一期文章
            ViewBag.Content = "ViewBag.Content";

            //通过参数传数据给Page页面，见上一期文章
            HomeDetailsViewModel homeDetailsViewModel = new HomeDetailsViewModel()
            {
                PageTitle = "Detail页面",
                Student = studentRepository.GetStudent(1)
            };

            return View(homeDetailsViewModel);
        }
        public IActionResult text()
        {
            HomeDetailsViewModel homeDetailsViewModel = new HomeDetailsViewModel()
            {
                PageTitle = "text页面",
                Student = studentRepository.GetStudent(1)
            };

            return View(homeDetailsViewModel);
        }

同时需要在Detail和text文件里面添加以下代码

@model WebApplication3.ViewModels.HomeDetailsViewModel//上一期内容

@{
    Layout = "~/Views/Shared/_Layout.cshtml";//布局页的路径，可以直接拖拉过来
    ViewBag.Title = "ViewBag.Title"; //ViewBag可以通过这种方式直接添加数据
}



@*以下代码是布局页面里面需要添加的内容，所以不需要正常html的布局，只需要有内容就行,可以看布局页代码来理解*@

<h3>@Model.PageTitle</h3>

<h3>ViewBag.Title</h3>

<div>
    姓名：@Model.Student.Name
</div>

<div>
    id：@Model.Student.Id
</div>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "学生详情页面";
}


<h1>文件是text.cshtml</h1>

布局页两个页面代码

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <h3>_Layout第一行</h3>

    <div>
        @RenderBody()
    </div>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <h3>_Layout1第一行</h3>

    <div>
        @RenderBody()
    </div>
</body>
</html>

运行代码，路径https://localhost:44323/HOME/DETAIL，可以看到下面的结果
在这里插入图片描述
路径https://localhost:44323/HOME/text，可以看到不同的布局页面就被复用了

修改布局页的路径_Layout.cshtml为_Layout1.cshtml可以有以下结果，可以看到不同的布局页面就被添加到里面来

布局页（二）

如果想要添加js文件，就可以通过以下方式来添加，在项目下面先添加一个CustomScript.js文件，路径如下
在这里插入图片描述
在Detail.cshtml文件添加如下代码

@model WebApplication3.ViewModels.HomeDetailsViewModel//上一期内容

@{
    Layout = "~/Views/Shared/_Layout1.cshtml";//布局页的路径，可以直接拖拉过来
    ViewBag.Title = "ViewBag.Title"; //ViewBag可以通过这种方式直接添加数据
}



@*以下代码是布局页面里面需要添加的内容，所以不需要正常html的布局，只需要有内容就行*@

<h3>@Model.PageTitle</h3>

<h3>ViewBag.Title</h3>

<div>
    姓名：@Model.Student.Name
</div>

<div>
    id：@Model.Student.Id
</div>


@section ScriptsE
{
    <script src="~/js/customscript.js"></script>
}

_Layout.cshtml文件下面添加如下代码

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <h3>_Layout第一行</h3>

    <div>
        @RenderBody()
    </div>

    @if (IsSectionDefined("ScriptsCeShi"))//判断是否有ScriptsCeShi名称的变量
    {
        @RenderSection("ScriptsCeShi", required:false)//引用有ScriptsCeShi名称的变量
    }
</body>
</html>

运行可以看到下面的内容，具体如下
在这里插入图片描述

布局页（三）

1、无论是text还是detail，其实也都还是有重复性的东西，所以需要将重复性的东西提取出来，引入视图开始，这个文件的位置添加在Views文件夹下面
在这里插入图片描述

@{
    Layout = "_Layout";
}

这样的话，text和detail文件里面的Layout = "~/Views/Shared/_Layout.cshtml"可以删除，可以获得同样的效果。
2、不过当前的_ViewStart.cshtml是针对同路径下的所有路由，如果有些路由希望引用其他的布局页面，可以进行覆盖如下
在这里插入图片描述

@{
    Layout = "_Layout1";
}

这样子的话，_Layout1就会覆盖掉_Layout1
3、如果在Detail.cshtml中添加

@{
    Layout = "_Layout2";
}

那么_Layout2又会覆盖掉_Layout1，层层递进

布局页（四）

1、还有个视图导入的视图页面，添加如下
在这里插入图片描述

@using WebApplication3.ViewModels;

这个作用呢，其实和c#平时编写时引用类库的效果一样，引用了前缀，后面就不需要在编写的时候加前缀，有了这个，之后的detail.cshtml文件里面引用就可以不用这么长

@model HomeDetailsViewModel
.......

2、同样视图导入和视图开始都是一层层叠加覆盖，最里面的是最后的效果

总结

ASP.NET Core MVC中布局页面的使用：
1、让web应用程序中所有的视图保持外观一致性
2、布局视图看起来像ASP.NET Web Form中的母版页
3、布局视图也具有.cshtml扩展名
4、在ASP.NET Core MVC中，默认情况下布局文件名为_Layout.cshtml
5、布局视图文件通常放在“Views/Shared”的文件夹中
6、在一个应用程序中可以包含多个布局视图文件
布局视图文件中的Sections使用：
1、布局视图中的节点，提供了一种方法来让某些页面元素有组织的放置在一起
2、Section可以强制性使用或者为可选择性使用
需要渲染Section的时候调用RenderSetion（）方法
在这里插入图片描述
ASP.NET Core MVC中的_ViewStart.cshtml：
1、ViewStart中的代码会在单个视图中的代码之前执行
2、移动公用代码到ViewStart视图中，如给布局视图文件设置属性
3、ViewStart减少了代码冗余，提高了可维护性
4、ViewStart文件支持分层
在这里插入图片描述
ASP.NET Core MVC中的_ViewImports.cshtml：
1、_ViewImports.cshtml文件通常放在Views文件夹中
2、ViewImports用于包含公共命名空间
3、需要使用@using指令包含公共命名空间
4、_ViewImports文件还支持以下指令