html转成cshtml通用篇

最新推荐文章于 2021-06-17 02:55:51 发布

QQ两个人

最新推荐文章于 2021-06-17 02:55:51 发布

阅读量1.6k

点赞数 1

分类专栏： ASP .NET MVC html 文章标签： html bootstrap 前端

本文链接：https://blog.csdn.net/qq_44938451/article/details/115435195

版权

ASP .NET 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

MVC

4 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

html转成cshtml通用篇

问题描述:在基础篇中，已经成功将html转成cshtml页面，但是css文件、js文件却全部放在了布局页中，导致布局页无法重用。

接下来，搭建一个可重用的布局页，在布局页中搭建bootstrap框架以及jQuery。

工具:一个html页面、VS2019、一个MVC项目

代码	描述
IsSectionDefined(“CssLink”)	判断视图页中是否有结点
@RenderSection("");	读取视图页中的节点
@section	在视图页中创建结点

1、在Shard文件夹下新建一个布局页MyLayout.cshtml

在这里插入图片描述

2、设置基本配置

在这里插入图片描述

那么，就可以用 @RenderSection(""); 搭建结点，如图

在这里插入图片描述

贴出代码，根据项目改一下路径即可

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>

    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
    <link rel="stylesheet" href="~/Content/font-awesome.min.css" />

    @if (IsSectionDefined("CssLink"))
    {
		@RenderSection("CssLink");
	}

    @if (IsSectionDefined("Style"))
    {
		@RenderSection("Style");
	}

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>

    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>


</head>
<body>

    @RenderBody()

    <script src="~/Scripts/popper.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

    @if (IsSectionDefined("JavascriptLink"))
    {
		@RenderSection("JavascriptLink");
	}

    @if (IsSectionDefined("Javascript"))
    {
		@RenderSection("Javascript");
	}
</body>
</html>

3、分布页怎么用呢

在这里插入图片描述

贴出代码，根据项目改一下路径即可

@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/MyLayout.cshtml";
}

@section CssLink{

}

@section Style{

}

@section JavascriptLink{

}

@section Javascript{

}

示例：
在这里插入图片描述
到此，一个通用的布局页MyLayout.cshtml就完成了,分布页只需要有相应的结点与之匹配即可。

End

QQ两个人

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
html转成cshtml通用篇

html转成MVC(cshtml)通用篇问题描述:在基础篇中，已经成功将html转成cshtml页面，但是css文件、js文件却全部放在了布局页中，导致布局页无法重用。接下来，搭建一个可重用的布局页，在布局页中搭建bootstrap框架以及jQuery。工具:一个html页面、VS2019、一个MVC项目相关代码代码描述IsSectionDefined(“CssLink”)判断视图页中是否有结点@RenderSection("");读取视图页中的节点@sect
复制链接

扫一扫