Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 247
Daniel Eldström Avatar asked Mar 15 '11 13:03

Daniel Eldström


People also ask

Can you put JavaScript in a partial view?

JavaScript functions can be bound to elements on the partial view; the partial view is rendered at the same time as the parent view. This happens when loading the partial view with a @Html. Action helper method, as in this section from Edit.

Can we use layout in partial view?

Partial views shouldn't be used to maintain common layout elements. Common layout elements should be specified in _Layout. cshtml files. Don't use a partial view where complex rendering logic or code execution is required to render the markup.

How do you render a partial view inside a view in MVC?

In order to add Partial View, you will need to Right Click inside the Controller class and click on the Add View option in order to create a View for the Controller.


1 Answers

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;
}
like image 105
Marc Gravell Avatar answered Oct 14 '22 06:10

Marc Gravell