Using jQuery to Seamlessly Load Inline Data via AJAX

Recently I was in need of a way to load content via AJAX on many many pages. Not wanting to repeat myself too much I ended up making an ASP.NET MVC Razor helper method to handle the lifting for me.

The actual JavaScript is simple enough, a basic jQuery AJAX GET request. I included this in my general site JavaScript file.

$(document).ready(function () {
    $(".ajax-load").each(function () {
        var ajaxDom = $(this);
        $.ajax({
            type: "get",
            url: ajaxDom.attr("data-url"),
            dataType: "html"
        }).done(function (result) {
            ajaxDom.html(result);
        }).fail(function(jqXHR, textStatus, errorThrown){
            ajaxDom.slideUp();
            console.log(errorThrown);
        });
    });
});

The HtmlHelper extension that I made returns a 100% width indeterminate progress bar for Bootstrap 3.

public static class HtmlHelperExtensions
{
    public static MvcHtmlString LoadUrlViaAjax(this HtmlHelper helper, string url, string message = "")
    {
        return new MvcHtmlString(
            String.Format(
                @"<div class='ajax-load progress' data-url='{0}'>
                    <div class='progress-bar progress-bar-info progress-bar-striped active' style='width:100%;'>
                        {1}
                    </div>
                 </div>",
            url, message));
    }
}

In the view you'll need to add a reference to the namespace that the HtmlHelperExtensions is contained in.

@using MyProject.ExtensionMethods

Using it! - In your view:

@Html.LoadUrlViaAjax("/some-partial-content", "Loading Your Options!")