从局部视图将 js 和 css 文件添加到布局页面答案

【问题标题】：Adding js and css files to layout page from partial view从局部视图将 js 和 css 文件添加到布局页面
【发布时间】：2011-10-06 14:58:28
【问题描述】：

从局部视图添加外部文件的最佳方法是什么？

我需要做这样的事情

部分视图中的代码：

@{
    var files = new List<string>();
    files.Add("some path");
    files.Add("some path");
    ViewBag.Files = files;
}

在布局页面中

@foreach (var file in ViewBag.Files) {
    @file
}

这实际上不起作用

【问题讨论】：

外部文件的内容是什么？ css? js?使用一个简单的client.css 和一个client.js 可以动态添加任何内容不是更好吗？ - 让我知道什么样的文件，我会告诉你我在做什么。
@balexandre 我正在创建一个简单的 cms，开发人员应该能够在其中创建插件作为部分视图（编辑器模板）。插件可以包含该特定插件的 css och js。你和我在一起吗？
@balexandre 你能告诉我你的解决方案是如何工作的吗？

标签： asp.net-mvc-3 razor

【解决方案1】：

如约而至

你不能渲染@section's，因为它在被部分视图渲染时不受支持，在此之前你可以做到这一点：

在你的_Layout.cshtml写下

@RenderSection("scripts", false)
@Html.RenderSection("scripts")

第一行是默认，第二行是你全新的渲染部分的方式，我在我的代码中都使用了...

现在让我们添加一些代码到我们的局部视图

而不是

@section scripts { 
   <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
}

替换为：

@Html.Section(
    @<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>, "scripts"
)
@Html.Section(
    @<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>, "scripts"
)

还有我们的小助手，您只需将其放入您的Models 文件夹并在您的部分视图和布局页面中引用它

// using idea from http://stackoverflow.com/questions/5433531/using-sections-in-editor-display-templates/5433722#5433722
public static class HtmlExtensions
{
    public static MvcHtmlString Section(this HtmlHelper htmlHelper, Func<object, HelperResult> template, string addToSection)
   {
      htmlHelper.ViewContext.HttpContext.Items[String.Concat("_", addToSection, "_", Guid.NewGuid())] = template;
      return MvcHtmlString.Empty;
   }

   public static IHtmlString RenderSection(this HtmlHelper htmlHelper, string sectionName)
   {
      foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
      {
         if (key.ToString().StartsWith(String.Concat("_", sectionName, "_")))
         {
            var template = htmlHelper.ViewContext.HttpContext.Items[key] as Func<object, HelperResult>;
            if (template != null)
            {
               htmlHelper.ViewContext.Writer.Write(template(null));
            }
         }
      }
      return MvcHtmlString.Empty;
   }
}

要呈现 CSS，您只需要使用其他部分名称，例如：

在_Layout.cshtml

@Html.RenderSection("styles")

在您的部分视图中

@Html.Section(
  @<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">, "styles"
)

我希望这会有所帮助。

【讨论】：

这个解决方案似乎工作得很好，我想我需要在

【解决方案2】：

不要在 Viewbag 中保存值，而是尝试在请求范围内的 HttpContext.Current.Items 中保存值。

点赞HttpContext.Current.Items.Add("files", files)

【讨论】：

我永远不会使用它，因为在处理多种场景时您可以轻松地失去上下文，对于繁重的东西，您应该使用 TempData，但对于保存字符串列表... ViewBag 或ViewData 绰绰有余！
如果您使用 ViewBag 或 ViewData，您将无法访问 Layout 中保存的值。 TempData 一直工作到下一个请求，它会导致错误的结果。我想知道什么样的场景会导致失去上下文？我实际上在自己的应用程序中使用了它并且效果很好。

【解决方案3】：

也许您可以为此使用部分。在您的布局中：

<head>
...
    @RenderSection("Head", false)
</head>

false 参数表示该部分不是必需的。

在您的局部视图中，您可以执行以下操作：

@section Head
{
    foreach(file in Model.Files}
    {
        .... render css/js links here
    }
}

这适用于视图，不完全确定它适用于部分视图，但它应该:)

【讨论】：