Ladda in vyerna i ASP.NET MVC asynkront

Med hjälp av lite Ajax så kan vi göra det möjligt att ladda in alla vyer i ASP.NET MVC asynkront. För att göra det möjligt så kommer jag att använda mig utav jQuery samt ett plugin som håller reda på webbläsarhistoriken.

Det är viktigt att vi även ger möjligheten att länka till olika vyer så att man inte alltid kommer till startsidan.

Det jag har skapat är ett helt vanligt ASP.NET MVC-projekt. När vi klickar på länkarna i menyn så vill jag automatiskt ta tag i url:en och hämta den med Ajax istället för att ladda om hela sidan.

Menyn är en lista med id “menu”, vilket gör det enkelt att plocka fram de länkar vi vill ha.

För att fånga tag i länkarna och visa sidorna så använder jag det här JavaScriptet:

$(function () {

    //Om en hash finns när man går in på sidan

    //(t.ex. om man kommer dit utifrån) så ska rätt sida laddas in

    if (location.hash) {

        $('#main').load(location.hash.substring(1) + ' #ajaxcontent');

    }

    //Initiera blank.html för IE 7 och tidigare

    $.hash.init('blank.html');

    //Ladda in den nya sidan när hashen ändras

    $(document).hashchange(function (e, newHash) {

        if (newHash) {

            $('#main').load(newHash + ' #ajaxcontent');

        }

    });

    //Ändra hashen vid klick på länk i menyn

    $('#menu a').click(function () {

        $.hash.go($(this).attr('href'));

        return false;

    });

});

Det pluginet som används för historiken kommer härifrån:

http://blixt.org/js#project/jquery-hash?view=code

För att hämta den nya sidan och visa upp den så använder jag jQuerys load-metod. Där hämtar jag sidan som har valts, samt väljer att plocka fram allt som ligger i “#ajaxcontent”. Innehållet laddas sedan in i “#main”.

Load är en inbyggd funktion i jQuery och som är riktigt smidig när man vill hämta vissa delar av en sida och ladda in någonstans på den aktuella.

Det färdiga exemplet kan hämtas här:

http://dev.mikaelsoderstrom.se/downloads/javascript/jqueryajaxload.rar