Sign in Register
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
    Alex Burr
    3

    Get macro partials to insert JavaScript at bottom of body

    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>)

    Sources

    Thanks to the following sources:

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies