I’ve been simultaneously trying to improve the quality of my jQuery code and increasingly seeing WebMatrix as a viable option for many non-trivial web development scenarios.

It occurred to me that the Razor @RenderSection “optional” attribute would make for a clever practice when injecting page specific jQuery.

ASP.NET Web Pages (WebMatrix) templating features include the ability to “pull into” the template, some page specific content.

Note the image below.

The yellow highlighted section comes from the Default.cshtml page and all the rest lives in the _SiteLayout.cshtml file.

In the case above the content comes from the standard site template from the WebMatrix tool (except for the button which I’ve added for this demo.

A JavaScript library that I intended to use on every page could easily be declared in the Layout file, but what about page specific stuff or code that I want to pull in “sometimes” but not always.

Well, ASP.NET Web Pages (Razor) has this clever construct @RenderSection(“footer”) which has a optional parameter as follows.

@RenderSection(“footer”, required: false)

What this basically says is, “if a page that includes me as a template defines a section named “footer’, insert it here !

For completeness, here is what the whole template looks like.




<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8' />
    <title>My ASP.NET Web Page - @Page.Title</title>
    <link href='@Href('~/Styles/Site.css')' rel='stylesheet' />
    <link href='@Href('~/favicon.ico')' rel='shortcut icon'
            type='image/x-icon' />
</head>
<body>
    <div id='page'>
        <div id='header'>
            <p class='site-title'>My ASP.NET Web Page</p>
            <div id='login'>
                @if (WebSecurity.IsAuthenticated) {
                    <p>
                        Welcome <a href='@Href('~/Account/ChangePassword')'
                                    title='Change password'>
                                    @WebSecurity.CurrentUserName</a>!
                        <a href='@Href('~/Account/Logout')'>Logout</a>
                    </p>
                } else {
                    <ul>
                        <li><a href='@Href('~/Account/Register')'>
						                      Register</a></li>
                        <li><a href='@Href('~/Account/Login')'>
						                    Login</a></li>
                    </ul>
                }
            </div>
            <ul id='menu'>
                <li><a href='@Href('~/')'>Home</a></li>
                <li><a href='@Href('~/About')'>About</a></li>
            </ul>
        </div>
        <div id='main'>
            <div id='content'>
                <h1>@Page.Title</h1>
                @RenderBody()
            </div>
            <div id='footer'>
                &amp;copy; @DateTime.Now.Year - My ASP.NET Web Page
            </div>
        </div>
    </div>
        @RenderSection('footer', required: false)
</body>
</html>

Then we can define the “footer” section in a page as in the fllowing Default.cshtml page (which has been modified from the default WebMatrix Site Template



@{
    Layout = '~/_SiteLayout.cshtml';
    Page.Title = 'Welcome to my Web Site!';
}
<p>
    ASP.NET Web Pages make it easy to build powerful .NET
    based applications for the web.
</p>
<button id='btn'>Show Message</button>

<div id='message' style='display:none'>

    <h1>Hello from jQuery!</h1>

</div>

@section footer{
     <script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js'
             type='text/javascript'></script>
    <script type='text/javascript'>

    $( domReady );

    function domReady() {
        $('#btn').click( showMessage );
    }

    function showMessage() {
        $('#message').fadeIn('slow');
    }

    </script>
}

See the footer definition starting on line 17.

I’ve included page specific jQuery, as well as the inclusion of the jQuery library itself “in-line” in the footer.

In practice, I would abstract this code into a separate .js file and include that file here is the footer.

I think this is a slick way to insert needed JavaScript code into the bottom of the page (where we WANT it) without having to pull it into EVERY page by placing it at the bottom of our template.

Might seem trivial but I think it’s a neat tip.