时间戳

首页 > 解决方案 > 如何在 ASP.NET Core 中动态添加指向 CSS 和 Javascript 文件的链接

asp.net-mvc - 如何在 ASP.NET Core 中动态添加指向 CSS 和 Javascript 文件的链接

问题描述

我们有一个想要转换为 .NET Core 的 CMS。在我们的 CMS 中，我们可以添加页面和模板，包括 CSS 和 Javascript 模板。在一个页面上，我们可以选择一个或多个应该加载到该页面上的 CSS 和/或 Javascript 模板。

为了使它工作，我想在我的控制器（或服务）内动态构建一个指向 CSS 或 Javascript 文件的 URL，并将该文件添加到我的 _Layout.cshtml 中。目前我做这样的事情：

我的控制器方法：

public IActionResult Test() 
{
    var listOfCssIds = new List<int>() { 1, 2, 3 };
    var cssFile = $"/css/customCss_{String.Join("_", listOfNumbers)}.css";
    ViewData["MyCssFile"] = cssFile;
    return View();
}

我的_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @{
        if (@ViewData["MyCssFile"] != null)
        {
            <link href="@ViewData["MyCssFile"]" rel="stylesheet" />
        }
    }
</head>
<body>
    <h1>Layout from library</h1>
    @RenderBody()
</body>
</html>

我们还可以添加指向外部 CSS / Javascript 文件的链接，例如 CDN。我们还想将这些添加到我们的视图中。我可以像上面的代码那样做，但这感觉不对，我想知道是否有更好的方法来做到这一点？

我考虑过使用部分然后添加@RenderSection()到我的_Layout.cshtml，但我找不到如何通过控制器或服务将内容添加到部分，似乎只能在另一个视图中执行此操作。

我一直在互联网上搜索答案/想法，但实际上找不到任何东西。谁能告诉我这种情况的最佳做法是什么？

我对 HTML 有同样的问题，我们的 CMS 决定了页面应该具有的大部分 HTML。目前我在我的控制器中构建该 HTML，然后将其添加到ViewData并把它放在我的视图中，如下所示@Html.Raw(ViewData["Html"])：我也想知道是否有更好的方法来做到这一点？

标签： asp.net-mvcasp.net-core

解决方案

我假设选择的 CSS 文件由您的 CMS 通过数据库持久保存，而不是拥有 CSS id 的静态列表，您实际上是从数据库中提取信息。在这种情况下，最好的选择是视图组件：

public class CustomCssViewComponent : ViewComponent
{
    private readonly MyContext _context;

    public CustomCssViewComponent(MyContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var ids = // pull in the ids from your context;
        return View(ids); 
    }
}

现在，您实际上只是将 id 作为支持此视图组件的视图的模型传入。因此，继续在以下位置创建该视图Views/Shared/Components/CustomCss/Default.cshtml：

@model List<int>
<link href="/css/customCss_@(String.Join("_", Model)).css" rel="stylesheet" />

最后，在您的布局中或您希望包含的任何位置：

@await Component.InvokeAsync("CustomCss")

用您的自定义 JS 冲洗并重复。您可能可以以相同的方式处理您的自定义 HTML，但您也可以考虑使用自定义标签助手。

推荐阅读