Trying to add JS and CSS to layout file in MVC 3 Razor website from partial views

Question

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>";
}

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?

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.

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.

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

I'm not quite sure *why* exactly you need to do it like this? Can't you do this with sections, RenderPartial or RenderActions? — Yngve B-Nilsen, Mar 15 '11 at 13:59
Yes statics are pure evil i have learned from this but the options i had were not many :) I still think i need a global list for scripts and stylesheets to be able to maintain this in a good way. — Daniel Eldström, Mar 15 '11 at 14:30
Wouldn't it be easier to just include the ones you need using `@Url.Content()` in the parent views? — Chris S, Mar 15 '11 at 15:18

Marc Gravell · Accepted Answer · 2011-03-15T14:50:04.500

9

I'd do this with sections, i.e.

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

And render the "head" section from the layout:

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

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.

For example:

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

edited Mar 15 '11 at 14:50

answered Mar 15 '11 at 14:00

Marc Gravell

1,026,079
266
2,566
2,900

@Marc: missing an @ in front of the section-definition. Other than that, Vote up :) – Yngve B-Nilsen Mar 15 '11 at 14:27
If i can define the sections inside the partial views that gets created by the RenderActions i use in the View, that might work but is there really some way i can check that a script or a stylesheet has not allready been added to the section? – Daniel Eldström Mar 15 '11 at 14:28
@Daniel - ah, I see; yes, for that you'd want to collect them in a list or something, for example use the HttpContext approach - just lose that static variable ;p – Marc Gravell Mar 15 '11 at 14:30
Yes the question is then how to do this :) If i just drop the static decleration it doesnt work since an Extension method has to be static. – Daniel Eldström Mar 15 '11 at 14:37
@Daniel the **method** should be static; it is that static *field* that is giving me nightmares. You need to lose that. Really. Store the list (or whatever) in the http-context against a known key. – Marc Gravell Mar 15 '11 at 14:39
@Daniel answer updated to illustrate; this is now thread-safe and per-request – Marc Gravell Mar 15 '11 at 14:51
@Marc so if i understand this correctly. I should modify my code to store the lists in the HttpContext. Is that correctly understood? – Daniel Eldström Mar 16 '11 at 07:58
@Daniel - that is a simple way of binding the list to the request, yes; there are other approaches, of course. But static is not an option on a web app. – Marc Gravell Mar 16 '11 at 08:08
Tried the head approach. It seems the section is loaded after the page is completed or something of that sort, because the css I put in the head takes a bit to load. – Oren A May 30 '11 at 02:33

score 0 · Answer 2 · answered Mar 15 '11 at 13:59

0

What you need to do is extend the Html helper a little differently.

public static MvcHtmlString AddStyle(this HtmlHelper<TModel> html, string styleUrl)
{
    string styleTag = string.Format("<link rel='stylesheet' type='text/css' href='{0}' />", styleUrl);
    return MvcHtmlString.Create(styleTag);
}

Then in your view just do:

<head>
    @Html.AddStyle("/Dashboard/Content/Dashboard.css")
</head>

If you need root relative URLs just throw in the Url content helper.

<head>
    @Html.AddStyle(Url.Content("~/Dashboard/Content/Dashboard.css"))
</head>

answered Mar 15 '11 at 13:59

CatDadCode

58,507
61
212
318

How does this add the styles to the layout file from a partial view? – Daniel Eldström Mar 15 '11 at 14:31
It doesn't I misinterpreted your question. – CatDadCode Mar 15 '11 at 14:34

Trying to add JS and CSS to layout file in MVC 3 Razor website from partial views

2 Answers2

Linked