「asp.net core 系列」教你如何引用靜態(tài)資

「asp.net core 系列」教你如何引用靜態(tài)資源和布局頁(yè)的使用

. 前言

在之前的4篇的內(nèi)容里，我們較為詳細(xì)的介紹了路由以及控制器還有視圖之間的關(guān)系。也就是說(shuō)，系統(tǒng)如何從用戶的HTTP請(qǐng)求解析到控制器里，然后在控制器里處理數(shù)據(jù)，并返回給視圖，在視圖中顯示出來(lái)。這一篇我將為大家介紹基礎(chǔ)的最后一部分，布局頁(yè)和靜態(tài)資源引入。

1. 布局頁(yè)

在控制器和視圖那一篇，我們了解到_ViewStart 里設(shè)置了一個(gè)Layout屬性的值，這個(gè)值正是用來(lái)設(shè)置布局頁(yè)的。所謂的布局頁(yè)，就是視圖的公用代碼。在實(shí)際開(kāi)發(fā)中，布局頁(yè)通常存放我們?yōu)檎麄€(gè)系統(tǒng)定義的頁(yè)面框架，視圖里寫每個(gè)視圖的頁(yè)面。

回顧一下，默認(rèn)的_ViewStart里的內(nèi)容是：

@{
    Layout="_Layout";
}

默認(rèn)的布局頁(yè)指定的是名為_(kāi)Layout的布局頁(yè)，在本系列第三篇中，我們得知這個(gè)視圖應(yīng)當(dāng)在Shared文件夾下，那我們進(jìn)去看一下這個(gè)視圖有什么內(nèi)容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MvcWeb</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcWeb</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            ? 2020 - MvcWeb - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

這是默認(rèn)的布局頁(yè)內(nèi)容，看著挺多的，但是除了一些html代碼，里面還有一些關(guān)鍵的地方需要注意。

1.1 RenderSection

RenderSection 分部渲染，在頁(yè)面中創(chuàng)建一個(gè)標(biāo)記，表示這個(gè)頁(yè)面塊將在子視圖（或者是路由的實(shí)際渲染視圖）中添加內(nèi)容。

來(lái)，我們看一下微軟官方給的注釋：

In layout pages, renders the content of the section named name.

意思就是在布局頁(yè)中，渲染名稱為name的分部?jī)?nèi)容。

新創(chuàng)建一個(gè)分布頁(yè)，名稱為_(kāi)Layout1：

<html>
    <head>
        <title>Render 測(cè)試</title>
    </head>
    <body>
        @RenderSection("SectionDemo")
    </body>
</html>

這個(gè)布局頁(yè)里什么都沒(méi)有，只有一個(gè)RenderSection。現(xiàn)在我們新建一個(gè)控制器：

using Microsoft.AspNetCore.Mvc;

namespace MvcWeb.Controllers
{
    public class RenderTestController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

創(chuàng)建對(duì)應(yīng)的視圖：

Views / RenderTest/Index.cshtml

先設(shè)置布局頁(yè)為_(kāi)Layout1：

@{
    Layout="_Layout1";
}

先試試啟動(dòng)應(yīng)用，訪問(wèn)：

http://localhost:5006/RenderTest/Index

正常情況下，你應(yīng)該能看到這個(gè)頁(yè)面：

仔細(xì)看一下信息，意思是在 RenderTest/Index.cshtml 視圖中沒(méi)有找到 SectionDemo 的分部?jī)?nèi)容。

那么，如何在視圖中設(shè)置分部?jī)?nèi)容呢？

@{
    Layout="_Layout1";
}
@section SectionDemo{
    <h1>你好</h1>

}

使用 @section <Section 名稱> 后面跟一對(duì)大括號(hào)，在大括號(hào)中間的內(nèi)容就是這個(gè)section（分部）的內(nèi)容。

重啟應(yīng)用，然后刷新頁(yè)面，你能看到這樣的頁(yè)面：

如果不做特殊要求的話，定義在布局頁(yè)中的分部塊，視圖必須實(shí)現(xiàn)。當(dāng)然，RenderSection還有一個(gè)參數(shù)，可以用來(lái)設(shè)置分部不是必須的：

public HtmlString RenderSection(string name, bool required);

1.2 RenderBody

先看下微軟給的官方注釋：

In a Razor layout page, renders the portion of a content page that is not within a named section.

簡(jiǎn)單講，如果在布局頁(yè)中設(shè)置了@RenderBody，那么在使用了這個(gè)布局頁(yè)的視圖里所有沒(méi)被分部塊包裹的代碼都會(huì)渲染到布局頁(yè)中聲明了@RenderBody的地方。

修改_Layout1.cshtml:

<html>
    <head>
        <title>Render 測(cè)試</title>
    </head>
    <body>
        <h1>RenderBody 測(cè)試 -之前</h1>
        @RenderBody()
        <h1>RenderBody 測(cè)試 -之后</h1>
    </body>
</html>

修改RenderTest/Index.cshtml：

@{
    Layout="_Layout1";
}

RenderBody測(cè)試
<h1>我是視圖的內(nèi)容！</h1>

重啟應(yīng)用，刷新剛剛訪問(wèn)的頁(yè)面：

可以看出，RenderBody渲染的位置。

2. 靜態(tài)資源引入

通常情況下，靜態(tài)資源的引入與HTML引用js和css等資源是一致的，但是對(duì)于我們?cè)诰帉懴到y(tǒng)時(shí)自己創(chuàng)建的腳本和樣式表，asp.net core提供了不同的處理方式。那就是服務(wù)器端壓縮功能。

asp.net core 3.0 的mvc 默認(rèn)項(xiàng)目是不啟動(dòng)這個(gè)功能的，需要我們額外的開(kāi)啟支持。

2.1 開(kāi)啟支持

先引入 BuildBundleMinifier

cd MvcWeb # 切換目錄到MvcWeb項(xiàng)目下
dotnet add package BuildBundleMinifier

創(chuàng)建 bundleconfig.json

[
    {
        "outputFileName": "wwwroot/css/site.min.css",
        "inputFiles": [
            "wwwroot/css/site.css"
        ]
    },
      {
        "outputFileName": "wwwroot/js/site.min.js",
        "inputFiles": [
          "wwwroot/js/site.js"
        ],
        "minify": {
          "enabled": true,
          "renameLocals": true
        },
        "sourceMap": false
      }
]

每個(gè)節(jié)點(diǎn)允許設(shè)置項(xiàng)：

outputFileName 生成的捆綁壓縮文件，通常路徑攜帶wwwroot
inputFiles 數(shù)組，包含要壓縮到此次輸出文件的文件路徑，會(huì)按照添加的順序依次加入
minify 輸出類型的縮小選項(xiàng)，可選。默認(rèn)是 enabled: true
sourceMap 表示是否為捆綁的文件生成源映射的標(biāo)記
sourceMapRootPath 源映射文件的路徑

2.2 使用

正常情況下在布局頁(yè)中，把壓縮后的文件路徑引入即可。不過(guò)在開(kāi)發(fā)中，通常按照以下方式引用：

<environment exclude="Development">
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
<environment include="Development">
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

注： asp-append-version 表示在引用路徑追加一個(gè)版本號(hào)，這是針對(duì)html靜態(tài)資源緩存的問(wèn)題的一個(gè)解決方案，這一步是由程序決定的。

environment表示環(huán)境，現(xiàn)在大家知道這個(gè)寫法就行，在接下來(lái)的篇幅會(huì)講。

3. 靜態(tài)資源目錄

我們知道到目前為止，我們的靜態(tài)資源都是在wwwroot目錄下。那么我們是否可以修改或者添加別的目錄作為靜態(tài)資源目錄呢？

在Startup.cs文件內(nèi)的Configure方法下有這樣一行代碼：

app.UseStaticFiles();

這行代碼的意思就是啟用靜態(tài)文件，程序自動(dòng)從 wwwroot尋找資源。那么，我們就可以從這個(gè)方法入手，設(shè)置我們自己的靜態(tài)資源：

public static IApplicationBuilder UseStaticFiles(this IApplicationBuilder app, StaticFileOptions options);

我們找到了這個(gè)方法的另一個(gè)重載版本，里面有一個(gè)參數(shù)類：

public class StaticFileOptions : SharedOptionsBase
{
    public StaticFileOptions();
    public StaticFileOptions(SharedOptions sharedOptions);
    public IContentTypeProvider ContentTypeProvider { get; set; }
    public string DefaultContentType { get; set; }
    public HttpsCompressionMode HttpsCompression { get; set; }
    public Action<StaticFileResponseContext> OnPrepareResponse { get; set; }
    public bool ServeUnknownFileTypes { get; set; }
}

并沒(méi)有發(fā)現(xiàn)我們想要的，先別慌，它還有個(gè)父類。我們?cè)偃ニ母割惱锟纯矗?/p>

public abstract class SharedOptionsBase
{
    protected SharedOptionsBase(SharedOptions sharedOptions);
    public IFileProvider FileProvider { get; set; }
    public PathString RequestPath { get; set; }
    protected SharedOptions SharedOptions { get; }
}

這下就比較明了了，需要我們提供一個(gè)文件提供器，那么我們來(lái)找一個(gè)合適的IFileProvider實(shí)現(xiàn)類吧：

public class PhysicalFileProvider : IFileProvider, IDisposable

這個(gè)類可以滿足我們的要求，它位于命名空間：

namespace Microsoft.Extensions.FileProviders

那么，添加一組我們自己的配置吧：

using Microsoft.Extensions.FileProviders;

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 省略其他代碼，僅添加以下代碼
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider=new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),"OtherStatic")),
    });
}

在項(xiàng)目的根目錄創(chuàng)建名為OtherStatic的文件夾，然后在里面創(chuàng)建個(gè)文件夾，例如： files，并在這個(gè)文件夾里隨便添加一個(gè)文件。

然后啟動(dòng)應(yīng)用訪問(wèn)：

http://localhost:5006/files/<你添加的文件(包括后綴名)>

然后能在瀏覽器中看到這個(gè)文件被正確響應(yīng)。

當(dāng)然，這里存在一個(gè)問(wèn)題，如果在 OtherStatic中的文件在wwwroot也有相同目錄結(jié)構(gòu)的文件存在，這樣訪問(wèn)就會(huì)出現(xiàn)問(wèn)題。這時(shí)候，可以為我們新加的這個(gè)配置設(shè)置一個(gè)請(qǐng)求前綴：

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider=new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),"OtherStatic")),
    RequestPath="/other"
});

重啟程序，然后訪問(wèn)：

http://localhost:5006/other/files/<你添加的文件(包括后綴名)>

然后就能看到剛才響應(yīng)的文件，重新訪問(wèn)之前的路徑，發(fā)現(xiàn)瀏覽器提示404。

4. 總結(jié)

在這一篇，我們講解了布局頁(yè)的內(nèi)容，靜態(tài)資源的壓縮綁定以及添加一個(gè)新的靜態(tài)資源目錄。通過(guò)這幾篇內(nèi)容，讓我們對(duì)asp.net core mvc有了一個(gè)基本的認(rèn)知。下一篇，我們將重新創(chuàng)建一個(gè)項(xiàng)目，并結(jié)合之前的內(nèi)容，以實(shí)戰(zhàn)為背景，帶領(lǐng)大家完成一個(gè)功能完備的web系統(tǒng)。

求關(guān)注，求點(diǎn)贊，求轉(zhuǎn)發(fā)~~有啥可以評(píng)論喲

4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來(lái)看看這些方式和它們的優(yōu)缺點(diǎn)。

內(nèi)聯(lián)方式

內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。

示例：

<div style="background: red"></div>

這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見(jiàn)的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。

導(dǎo)入方式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來(lái)比較這兩種方式，并且說(shuō)明為什么不推薦使用 @import。

link 屬于 HTML，通過(guò) <link> 標(biāo)簽中的 href 屬性來(lái)引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語(yǔ)句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫在樣式表的開(kāi)頭，否則無(wú)法正確導(dǎo)入外部文件；
@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無(wú)法正確導(dǎo)入外部樣式文件；
當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載；

小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。

在線咨詢

上一篇：當(dāng)初紅遍網(wǎng)絡(luò)的FLASH與現(xiàn)在流行的HTML5相比，
下一篇：Spring-Boot（七) Thymeleaf 模

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商