如何在 MVC3 的局部视图中渲染一个部分? [英] How to render a Section in a Partial View in MVC3?

查看:32
本文介绍了如何在 MVC3 的局部视图中渲染一个部分?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在 MVC3 项目中,我有一个带有此代码的_Layout.vbhtml"文件

In a MVC3 project, I have a "_Layout.vbhtml" file with this code

<!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"

Then, I have a Partial View "ValidationScripts.vbhtml" in the Shared folder with

@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

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

If I call the Partial View from a View like this...

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

@Html.Partial("ValidationScripts")

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

页面上没有呈现Scripts"部分,输出的HTML是

the Section "Scripts" is not rendered on the page, and the output HTML is

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

  </body>
</html>

如何在局部视图中渲染部分?

How can I render the Section in the Partial View ?

推荐答案

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

I had the same issue on top of duplicate scripts, so I created a couple of Extension methods:

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());
  }
}

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

On any View or Partial View or Display/Edit Template you simply add what you need:

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

在您的布局中,您可以将其呈现在您想要的位置:

In your Layouts you render it where you want it:

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

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

The only issue you may have is the order in which the scripts are rendered if you get to complex. If that becomes an issue, simply add the scripts to the bottom of your views/templates, and simply reverse the order in the extension method before rendering them.

这篇关于如何在 MVC3 的局部视图中渲染一个部分?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆