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

时间:2011-10-06 14:58:28

标签: asp.net-mvc-3 razor

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

我需要做这样的事情

局部视图中的

代码:

@{
    var files = new List<string>();
    files.Add("some path");
    files.Add("some path");
    ViewBag.Files = files;
}
布局页面中的

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

这实际上不起作用

3 个答案:

答案 0 :(得分:6)

按照承诺

你不能渲染@section,因为部分视图渲染时不支持它,直到那时你可以做到这一点:

_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"
)

我希望这会有所帮助。

答案 1 :(得分:1)

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

喜欢这个HttpContext.Current.Items.Add("files", files)

答案 2 :(得分:0)

也许您可以使用部分。在你的布局中:

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

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

在您的局部视图中,您可以执行以下操作:

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

这适用于视图,并不完全确定它适用于偏见视图,但它应该:)