尝试添加JS和CSS来布局文件中的MVC从局部视图3剃刀网站 [英] Trying to add JS and CSS to layout file in MVC 3 Razor website from partial views

问题描述

即时通讯目前使用如下所示code脚本和CSS文件添加到布局文件的头部的方法。

Im currently using a method that looks like the following code to add script and css files to the head of the Layout file.

public static class HtmlHelperExtensions
{
    public static MyCompanyHtmlHelpers MyCompany(this HtmlHelper htmlHelper)
    {
        return MyCompanyHtmlHelpers.GetInstance(htmlHelper);
    }    
}

public class MyCompanyHtmlHelpers
{
    private static MyCompanyHtmlHelpers _instance;

    public static MyCompanyHtmlHelpers GetInstance(HtmlHelper htmlHelper)
    {
        if (_instance == null)
            _instance = new MyCompanyHtmlHelpers();

        _instance.SetHtmlHelper(htmlHelper);

        return _instance;
    }

    private HtmlHelper _htmlHelper;

    public ItemRegistrar Styles { get; private set; }
    public ItemRegistrar Scripts { get; private set; }

    public MyCompanyHtmlHelpers()
    {
        Styles = new ItemRegistrar(ItemRegistrarFromatters.StyleFormat);
        Scripts = new ItemRegistrar(ItemRegistrarFromatters.ScriptFormat);
    }

    private void SetHtmlHelper(HtmlHelper htmlHelper)
    {
        _htmlHelper = htmlHelper;
    }
}

public class ItemRegistrar
{
    private readonly string _format;
    private readonly List<string> _items;

    public ItemRegistrar(string format)
    {
        _format = format;
        _items = new List<string>();
    }

    public ItemRegistrar Add(string url)
    {
        if (!_items.Contains(url))
            _items.Insert(0, url);

        return this;
    }

    public IHtmlString Render()
    {
        var sb = new StringBuilder();

        foreach (var item in _items)
        {
            var fmt = string.Format(_format, item);
            sb.AppendLine(fmt);
        }

        return new HtmlString(sb.ToString());
    }
}

public class ItemRegistrarFromatters
{
    public const string StyleFormat = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />";
    public const string ScriptFormat = "<script src=\"{0}\" type=\"text/javascript\"></script>";
}

使用 Html.MyCompany（）Styles.Add（/控制面板/内容/ Dashboard.css）; 添加文件...
和 @ Html.MyCompany（）。Styles.Render（）来使它们在Layout_.cshtml。

Using Html.MyCompany().Styles.Add("/Dashboard/Content/Dashboard.css"); to add files... And @Html.MyCompany().Styles.Render() to render them in Layout_.cshtml.

我的问题是，这是一个静态方法，这意味着它仍然存在样式表和脚本文件的列表。

My problem is that this is a static method meaning it persists the list of stylesheets and script files.

我需要做的是这样做，但没有保持它的持续性同样的事情。

I need to do the same thing that this does but without keeping it persistant.

我需要的清单是重拍在每次请求，因为他们从一个页面切换到页面的外观是特定页面上的内容。

I need the lists to be remade on every request since they change from page to page what the look are on that specific page.

是否有可能以清除在每次请求列表添加所需要或脚本之前，也许在他们已经被渲染出来吗？

Is it possible to clear the lists on every request prior to adding the scripts that are needed or maybe after they have been rendered out?

更新：
之所以不使用一节，或者的RenderPartial RenderaActions是prevent添加不止一次布局文件相同的样式表或脚本文件。

Update: The reason for not using a section, RenderPartial or RenderaActions is to prevent the same stylesheet or script file to be added more than once to the Layout file.

该网站即时通讯建设具有基本的布局Layout_.cshtml。这又由一个视图，通过项目的列表和用于的RenderAction称为该输出用于该项目的特定部分视图的每个项目循环使用。这些局部的观点，有时需要添加样式和脚本。

The site im building has a Layout_.cshtml with the basic layout. This in turn is used by a View that loops through a list of items and for each item a RenderAction is called that outputs the specific partial view for that item. These partial views sometimes need to add stylesheets and scripts.

由于有可能需要从不同的部分景色增添许多不同的脚本和样式表的全局列表样式和脚本是我想这可能是这样做有一个全球性的地方，检查是否媒体链接添加一个脚本的唯一途径到集合与否，然后在添加它们的顺序立刻呈现它们。

As there can be needed to add many different scripts and stylesheets from different partial views a global list for styles and scripts were the only way i thought this could be done so there is a global place to check if a script is allready added to the collection or not and then render them all at once in the order they were added.

更新2：
真正的问题是如何做同一种功能（全局列表），但没有使用静态扩展方法。

Update 2: The real question is how to do the same kind of function (a global list) but without using a static Extension method.

推荐答案

我做这跟部分，即

@section head {
    ...add whatever you want here...
}

和渲染从布局中头部分：

And render the "head" section from the layout:

<head>
...other stuff here...
@RenderSection("head", required: false)
</head>

如果你不想要的部分，而不想通过周围吧，我会在这里使用HttpContext的;针对存储 HttpContext.Current.Items [someKey] 一些数据。如果为null，创建一个新的，并把它存储在上下文中。

If you don't want sections, and don't want to pass it around, I would use the HttpContext here; store some data against HttpContext.Current.Items[someKey]. If it is null, create a new one and store it in the context.

例如：

public static MyCompanyHtmlHelpers GetInstance(HtmlHelper htmlHelper)
{
    const string key = "MyCompanyHtmlHelpersInstance";
    IDictionary items = (htmlHelper == null || htmlHelper.ViewContext == null
        || htmlHelper.ViewContext.HttpContext == null)
        ? HttpContext.Current.Items : htmlHelper.ViewContext.HttpContext.Items;

    MyCompanyHtmlHelpers obj = (MyCompanyHtmlHelpers)items[key];
    if (obj == null)
    {
        items.Add(key, obj = new MyCompanyHtmlHelpers());
    }
    return obj;
}

这篇关于尝试添加JS和CSS来布局文件中的MVC从局部视图3剃刀网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！