如何在 MVC3 的局部视图中呈现部分？答案

【问题标题】：How to render a Section in a Partial View in MVC3?如何在 MVC3 的局部视图中呈现部分？
【发布时间】：2012-11-25 17:46:21
【问题描述】：

在 MVC3 项目中，我有一个包含此代码的“_Layout.vbhtml”文件

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    ...
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>
    @RenderSection("Scripts", false)
  </body>
</html>

然后，我在共享文件夹中有一个部分视图“ValidationScripts.vbhtml”

@Section Scripts
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.fix.js")"></script>  
    <script src="@Url.Content("~/Scripts/localization/messages_de.js")"></script>      
End Section

如果我从这样的视图中调用部分视图...

@ModelType MvcExample.MyModel
@Code
    ViewData("Title") = "Test"
End Code

@Html.Partial("ValidationScripts")

<h2>Just a Test</h2>
...

“脚本”部分未在页面上呈现，输出 HTML 为

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    ...
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>

  </body>
</html>

如何在局部视图中呈现部分？

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-3 razor asp.net-mvc-partialview asp.net-mvc-views

【解决方案1】：

我在重复脚本上遇到了同样的问题，所以我创建了几个扩展方法：

public static class HtmlHelperExtensions
{
  private const string _jSViewDataName = "RenderJavaScript";
  private const string _styleViewDataName = "RenderStyle";

  public static void AddJavaScript(this HtmlHelper htmlHelper, 
                                   string scriptURL)
  {
    List<string> scriptList = htmlHelper.ViewContext.HttpContext
      .Items[HtmlHelperExtensions._jSViewDataName] as List<string>;
    if (scriptList != null)
    {
      if (!scriptList.Contains(scriptURL))
      {
        scriptList.Add(scriptURL);
      }
    }
    else
    {
      scriptList = new List<string>();
      scriptList.Add(scriptURL);
      htmlHelper.ViewContext.HttpContext
        .Items.Add(HtmlHelperExtensions._jSViewDataName, scriptList);
    }
  }

  public static MvcHtmlString RenderJavaScripts(this HtmlHelper HtmlHelper)
  {
    StringBuilder result = new StringBuilder();

    List<string> scriptList = HtmlHelper.ViewContext.HttpContext
      .Items[HtmlHelperExtensions._jSViewDataName] as List<string>;
    if (scriptList != null)
    {
      foreach (string script in scriptList)
      {
        result.AppendLine(string.Format(
          "<script type=\"text/javascript\" src=\"{0}\"></script>", 
          script));
      }
    }

    return MvcHtmlString.Create(result.ToString());
  }

  public static void AddStyle(this HtmlHelper htmlHelper, string styleURL)
  {
    List<string> styleList = htmlHelper.ViewContext.HttpContext
      .Items[HtmlHelperExtensions._styleViewDataName] as List<string>;

   if (styleList != null)
   {
     if (!styleList.Contains(styleURL))
     {
       styleList.Add(styleURL);
     }
   }
   else
   {
     styleList = new List<string>();
     styleList.Add(styleURL);
     htmlHelper.ViewContext.HttpContext
       .Items.Add(HtmlHelperExtensions._styleViewDataName, styleList);
   }
 }

 public static MvcHtmlString RenderStyles(this HtmlHelper htmlHelper)
 {
   StringBuilder result = new StringBuilder();

   List<string> styleList = htmlHelper.ViewContext.HttpContext
     .Items[HtmlHelperExtensions._styleViewDataName] as List<string>;

   if (styleList != null)
   {
     foreach (string script in styleList)
     {
       result.AppendLine(string.Format(
         "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />", 
         script));
     }
   }

  return MvcHtmlString.Create(result.ToString());
  }
}

在任何视图或部分视图或显示/编辑模板上，您只需添加您需要的内容：

@{
  Html.AddJavaScript("http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js");
}

在你的布局中，你可以在你想要的地方渲染它：

<!DOCTYPE html>
<html lang="en">
  <head>
  @Html.RenderStyles()
  @Html.RenderJavascripts()

您可能遇到的唯一问题是脚本的呈现顺序，如果您变得复杂的话。如果这成为问题，只需将脚本添加到视图/模板的底部，然后在渲染它们之前简单地反转扩展方法中的顺序。

【讨论】：

任何使用 MVC 4（或更高版本）查看此内容的人，您可能应该考虑使用 Bundling Instead。
如果您在布局文件中调用部分，这将不起作用。那时 Html.AddJavaScript 已经运行了。
@LiverpoolsNumber9 仅当您在部分视图（已测试）之前调用 RenderJavaScripts() 时。
@ErikPhilips 是的，当然。但大概你会在头脑中调用这个？如果不是，那么最好在布局中将其称为最后一件事。为了安全起见，我会在“RenderJavaScripts()”上设置一个布尔值，然后由“AddJavascript(..)”检查 - 这样如果有人把事情颠倒过来，你就可以抛出异常。显然，您需要布尔值才能具有请求上下文。
很棒的扩展。我已经为 MVC4 修改了它，其中扩展函数现在将虚拟路径 params string[] paths 作为参数

【解决方案2】：

您不能在局部视图中使用部分。您可以使用here 中提到的自定义助手。

【讨论】：

感谢您提供“您不能在局部视图中使用部分”的信息。

【解决方案3】：

我认为您应该为此使用帮助器 http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx

如果您可以升级到 MVC4，您可以使用新的捆绑和缩小功能：http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification。它专门用于解决您想要实现的目标（包括脚本）。

或者，您可以将 http://combres.codeplex.com/ 与 MVC3 一起使用

【讨论】：

能否详细说明如何使用@helper添加脚本？

【解决方案4】：

如果我理解正确，你有一个结构

Layout.cshtml
查看 - X
- PartialView Y（在 View-X 内部调用）

那么你需要定义

@section Script{ .... } 在 View-X 和 NOT PartialView Y 中，因为 View-X 的 View.Layout 设置为 Layout.cshtml

【讨论】：

当然，我可以在任何视图中手动添加“脚本”部分。但是，如果我想将一个地方的所有脚本标签分组并在视图中重用它，我该怎么做呢？
如果脚本被所有使用该布局的视图使用，或者您必须在部分中引用布局，您可以只在布局本身中渲染部分！如果你想走这条路，你可以尝试在布局中继承，其中部分使用的布局只是将其余的东西呈现为空。这有意义吗？
什么？ :) 是的，我可以这样做，但我认为@Erik 的扩展方法更有用。
完全同意:)

【解决方案5】：

所有这些都是很棒的信息，但是如果您查看他的原始代码，Section 是大写的，因此无法识别。

应该是@section blahblah 而不是@Section

【讨论】：

他的页面语言是VB而不是C#