April 2010 - Posts

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

Det finns en feature i Visual Studio 2010 som är enkel, men fantastiskt bra. På startskärmen som kommer när man startar programmet så kan man högerklicka på projekten i listan. Man kan sedan öppna projektet som vanligt, men utöver det även öppna mappen som projektet finns i på hårddisken, samt ta bort projektet från listan.

Enkelt, men efterlängtat!

1 - Rightclick

I Visual Studio 2010 som släpps imorgon (äntligen!) så kommer det en del nya kortkommandon till följd av ny funktionalitet. Det finns en bra lista på dessa kommandon här:

http://www.itscodingtime.com/post/Visual-Studio-2010-Keyboard-Mouse-Shortcuts.aspx

Har du något annat kortkommando som du ofta använder dig utav så tipsa gärna om det! :-)

LinqPad

När man skapar referenser till OData-tjänster så kan man utforska dem genom att till exempel skapa en proxyklass för dem och sedan se vad man får ut av det, eller kanske surfa direkt till tjänsten för att utforska datan.

Ett annat sätt att se vad som finns tillgängligt är genom att använda LinqPad. Med det så kan du ange en URL till en OData-tjänst och sedan skriva frågor direkt mot den.

För att enkelt kunna testa mot olika tjänster så finns det en lista på sådana här:

http://www.odata.org/producers

Som exempel så kommer jag att använda den OData-tjänst som tillhandahålls av Nerddinner.

Börja med att klicka på Add connection i listan till vänster i programmet och sedan WCF Data Services.

1 - AddConnection

Ange sedan URL:en till tjänsten du vill utforska.

2 - Connection

Det som händer nu är att LinqPad kollar upp hur tjänster är strukturerad, och ger oss möjligheten att hämta data från de olika tabellerna med både vanliga Linq-frågor, och även Lambda Expressions.

3 - Query

Det här gör det väldigt enkelt att hämta data för att snabbt se vad vi kan få ut. Vi kan även använda LinqPad direkt mot en databas om vi så önskar.

Open Data Protocol Visualizer

Om vi inte är intresserade av att se datan utanför Visual Studio utan bara är intresserade av att se strukturen så kan vi använda Open Data Protocol Visualizer.

Börja med att hämta och installera det:

http://visualstudiogallery.msdn.microsoft.com/en-us/f4ac856a-796e-4d78-9a3d-0120d8137722

När vi går in i Visual Studio 2010 och lägger till en referens till en OData-tjänst så skapas en proxyklass i bakgrunden. Med hjälp av Open Data Protocol Visualizer så kan vi nu se strukturen i ett diagram direkt i Visual Studio 2010. För att få fram diagrammet så högerklicka på referensen till tjänsten och välj View in diagram.

4 - RightClickDiagram

Vi får nu upp lite olika alternativ, och för att få fram all information från tjänsten så välj “namespaces – add all”.

Det vi får upp när ett diagram över de olika entiteterna. I exemplet jag använder så finns bara två stycken, men använder man till exempel Northwind så kan det bli ett komplext diagram, men som samtidigt erbjuder en bra överblick över alla kopplingar.

5 - Diagram

More Posts