get macro partials to insert javascript at bottom of body

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Alex Burr 77 posts 128 karma points

Feb 24, 2014 @ 16:35

Using Umbraco 7

Hi everyone, I'm putting this here in case anyone runs into the same issues I did.

I like my websites to have JavaScript at the bottom of the body. I typically include dependencies (such as jQuery) in the template, or allow users to add them through a document property. However it's been difficult to get macros to respect this structure -- if I ever wanted macros to include JavaScript (for a calendar widget, or image carousel), it had to be inserted inline with the macro content.

No more! I now have macro partials that place JavaScript where I want them.

Extension Method

First I created a new file under App_Code called ExtensionMethods.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.WebPages;

public static class ExtensionMethods
{    
    private const string SCRIPTBLOCK_BUILDER = "ScriptBlockBuilder";

    public static MvcHtmlString MacroScriptBlock(this WebViewPage webPage, Func<dynamic, HelperResult> template)
    {
        if (!webPage.IsAjax)
        {
            var scriptBuilder = webPage.Context.Items[SCRIPTBLOCK_BUILDER] as StringBuilder ?? new StringBuilder();

            scriptBuilder.Append(template(null).ToHtmlString());

            webPage.Context.Items[SCRIPTBLOCK_BUILDER] = scriptBuilder;

            return new MvcHtmlString(string.Empty);
        }
        return new MvcHtmlString(template(null).ToHtmlString());
    }

    public static MvcHtmlString MacroScriptBlocks(this WebViewPage webPage)
    {
        var scriptBuilder = webPage.Context.Items[SCRIPTBLOCK_BUILDER] as StringBuilder ?? new StringBuilder();

        return new MvcHtmlString(scriptBuilder.ToString());
    }
}

Template

Next I include the following in my template file:

<body>
...
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    ...
    @this.MacroScriptBlocks()
</body>

Macro

Finally, here is an example of a macro partial, FullCalendar.cshtml:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

<div id="calendar"></div>

@this.MacroScriptBlock(@<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>)
@this.MacroScriptBlock(@<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/gcal.js"></script>)
@this.MacroScriptBlock(
    @<script>
        $(document).ready(function () {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,agendaDay'
                },
                defaultView: 'month',
                aspectRatio: 1.5,
                events: $.fullCalendar.gcalFeed("@Model.MacroParameters["calendarFeed"]")
        });
    });
    </script>)

Flag this post as spam?