Skip to content

Baune8D/AspNetWebpack.AssetHelpers

Repository files navigation

AspNetWebpack.AssetHelpers

Build status codecov NuGet Badge

Asset utilities for AspNetWebpack

Initialize AssetService in Startup.cs:

public IConfiguration Configuration { get; }

public IWebHostEnvironment Env { get; }

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddAssetHelpers(Configuration, Env);
}

Use extensions to get the bundle name:

var bundle = ViewData.GetBundleName() // Gets the bundle name from ViewData["Bundle"]
var bundle = Html.GetBundleName() // Gets the bundle name from the view context

Recommended use in eg. _Layout.cshtml:

var bundle = ViewData.GetBundleName() ?? Html.GetBundleName();
// Gets the bundle name from the view context but allows overriding it in ViewData["Bundle"]

Use AssetService to get assets:

@inject IAssetService AssetService

@await AssetService.AssetPath
// Generates: /Path/To/Assets

@await AssetService.GetBundlePathAsync("SomeBundle.js")
// Generates: /Path/To/Assets/SomeBundle.js?v=cache-buster

@await AssetService.GetScriptTagAsync("SomeBundle")
// Generates: <script src="/Path/To/Assets/SomeBundle.js?v=cache-buster"></script>

@await AssetService.GetLinkTagAsync("SomeBundle")
// Generates: <link href="/Path/To/Assets/SomeBundle.css?v=cache-buster" rel=\"stylesheet\" />

@await AssetService.GetStyleTagAsync("SomeBundle")
// Generates: <style>Inlined CSS</style

Overloads exists on GetBundlePathAsync in case no extension is applied to the bundle name.

Overloads exists on GetScriptTagAsync to change the load behaviour to eg. async and/or defer.

A fallback bundle can be set on: GetScriptTagAsync, GetLinkTagAsync, GetStyleTagAsync

@await AssetService.GetScriptTagAsync("SomeBundle", "FallbackBundle")
// Generates: <script src="/Path/To/Assets/SomeBundle.js?v=cache-buster"></script>
// Or if SomeBundle does not exist: <script src="/Path/To/Assets/FallbackBundle.js?v=cache-buster"></script>

Example _Layout.cshtml

@using AspNetWebpack.AssetHelpers

@inject IAssetService AssetService

@{
    var bundle = ViewData.GetBundleName() ?? Html.GetBundleName();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - AspNetWebpack</title>
    @await RenderSectionAsync("Head", required: false)

    @await AssetService.GetLinkTagAsync(bundle, "Layout");
    @await RenderSectionAsync("Styles", required: false)
</head>
<body>
    @RenderBody()

    @await AssetService.GetScriptTagAsync(bundle, "Layout", ScriptLoad.Defer);
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>