Introduktion til Microsoft WebMatrix.

[koden til posten finder du her]

Siden ASP.NET udkom i starten af det nye årtusinde, har det stået en anelse sløjt til med adoptionen af ASP.NET overfor de udviklere der dengang, i slutningen af 90erne, havde deres daglige gang i ASP (bedre kendt nu som ASP classic). Dengang var der kun ét web framework fra Microsoft og det var netop ASP, og eftersom der ikke var meget andet af vælge imellem som MS fan-boy så var valgt ret nemt.

Det er klart at det altid har været i Microsofts planer, at virksomheden ikke ønskede, overhovedet, at tabe nogle udviklere på gulvet med deres nye framework, værktøj og paradigmer. Men over de sidste mange år har virkligheden vist sig at være en lidt anden. Det er jo ikke fordi ASP.NET ikke er udbredt, for det er det bestemt, men der er en form for teknisk arv hos mange udviklere som Microsoft gerne så de slap for at slæbe rundt på.

Udover den her tekniske arv som jeg personligt kalder den, så er der en helt anden dimension også, nemlig det, at rigtig mange udviklere gerne bare vil skrive noget kode og nødvendigvis ikke har tid eller lyst til at bekymre sig alt for meget om hvordan tingene er skruet sammen nedenunder. En anden ting er hele det tekniske skift fra at være vant til procedural kode til nu at skulle tænke i objekter, type stærkt sprog, en compiler osv. Det kan meget vel være en showstopper for rigtig mange mennesker, ikke fordi det er svært at lære nyt, men fordi det ikke går ligeså stærkt som i ”gamle dage”.

Det handler altså om for de fleste at få noget at op at flyve i en fart, og til det behøver man altså ikke købe en dyr licens til et udviklingsværktøj hvor man kun bruger 20% af funktionaliteten og samtidig ikke føler sig helt tryg ved teknologien. Det er klart at man så vælger at holde sig til det man kender.

Microsoft har nu, langt om længe, frigivet et par rigtig gode værktøjer der hjælper med flere ting i den simple udviklers liv. Det er for mig super rart at se og opleve, at Microsoft har lært at der findes en meget stor målgruppe til disse værktøjer og at virksomheden aldrig igen må glemme de små udviklere også.

Microsoft WebMatrix er det nyeste skud på stammen når man nævner web udvikling på en Microsoft platform. Lad mig lige starte med at remse op hvilke andre web frameworks Microsoft har at byde på og hvor du kan finde mere information om dem henne.

ASP.NET WebForms

WebForms bruger man hvis man vil bygge en kontrol baseret, event drevet og hurtig applikation til internettet. Teknologien er ikke specielt venlig over udviklere der ikke har arbejdet med .NET før.

Du kan læse mere om WebForms her (http://www.asp.net/web-forms) , se channel9 videoer omkring teknologien her (http://channel9.msdn.com/tags/ASP.NET/) , og på codeplex kan du følge med i udviklingen og finde tilføjelser og andre fede features (http://aspnet.codeplex.com/).

ASP.NET MVC

MVC frameworket er et noget lettere og mere agilt web framework der i rimlig stor modsætning til WebForms ”omfavner” webbet som en platform. Du har fuld kontrol over alt hvad du laver, du skriver alt din kode selv og det er både meget lettere at teste og lære MVC at kende. Hvis du har været vant til et scripting sprog såsom ASP eller PHP så er MVC nok den letteste vej ind i hele .NET frameworket. Ihvertfald hvis du skal lave web applikationer og tjene penge på det.

Du kan læse mere omkring MVC ved at downloade den korte men præcise ebog omkring MVC (http://msdncommunity.dk/media/120070/mvcebogen.pdf) , du kan også lære de mere fundementale ting ved at kigge her (http://www.asp.net/mvc) og sidst men ikke mindst er der en masse materiale omkring MVC på Channel9 også (http://channel9.msdn.com/tags/ASP.NET+MVC/).

ASP.NET Web Pages

I sidste uge kom så det værktøj der støtter op omkring netop ASP.NET Web Pages. Værktøjet hedder som sagt WebMatrix og åbner op for en ny verden af muligheder når man udvikler web applikationer til en Microsoft platform. Sådan her ser værktøjet ud når man starter det første gang. Du downloadet forøvrigt WebMatrix her (http://www.microsoft.com/web/webmatrix/download/), og det er nok en god idé at have det installeret når vi går igang med at kode lidt med det :)

Du kan vælge udfra den simple menu i værktøjet, hvad det er du gerne vil gøre. Mulighederne er altså enten at tilgå ”My Sites” som er de applikationer du selv har bygget, eller du kan vælge noget så sejt som en template eller endnu bedre en reel applikation fra Microsoft web app gallery (http://www.microsoft.com/web/gallery/) som forøvrigt hænger rigtig tæt sammen med Microsoft web platform installer, også kaldet WebPI (findes her: http://www.microsoft.com/web/downloads/platform.aspx). Den sidste mulighed er at oprette et site fra en folder på den computer.

Jeg har oprettet et site allerede, det hedder Guestbook. En gæstebog er altid en god applikation at starte med at udvikle når man skal lære en ny teknologi at kende, ihvertfald hvis du spørger mig.

Det er en stor fornøjelse at arbejde med WebMatrix, man ser kun det som er absolut mest nødvendigt når du skal udvikle en applikation. Du ser hvor du kan browse app’en, hvor den mapper til på disken og du har bla. også mulighed for at tilgå en database manager og en request manager.

I bunden af skærmen har du adgang til dine filer og et andet punkt som kaldes Reports. Reports kan du bruge til bla. at lave SEO optimering hvor WebMatrix cralwer dit site og tjekker for mangler og evt. fejl i koden.

Man føler først for alvor at det er en kode editor når man sidder i Files vinduet og kan se sin løsnings filstruktur og de kode filer man har oprettet.

Strukturen for sit site bestemmer man i store træk selv, men der er nogle ting man skal være klar over når man udvikler med WebMatrix og ASP.NET web pages.

Det er .NET, men føles nødvendigvis ikke sådan.

ASP.NET Web Pages er bygget ovenpå .NET platformen men man mærker faktisk ikke den kobling ret meget når man går igang med at udvikle. Man oplever naturligvis et spil imellem det som man kan lave i ASP.NET Web Pages og VB eller C#. Der er en kobling men man bestemmer selv om man vil benytte sig af den og i hvilken udstrækning.

.cshtml

ASP.NET Web Pages er et nyt framework og det er et bestemt API man benytter når man udvikler i teknolgien. .cshtml er filendelsen på ASP.NET Web Pages filerne og her er nogle af de mest markante træk i disse filer.

En kodeblok i sådan en fil kan se således ud:

<!-- Inline expression -->

<p>værdien på din konto er: @total </p>

<!-- Single statement block. -->

@{ var myMessage = "Hej Verden"; }

<p>Værdien af myMessages er : @myMessage</p>

<!-- Multi-statement block. -->

@{

var greeting = "Velkommen til vores site!"; 

var weekDay = DateTime.Now.DayOfWeek; 

var greetingMessage = greeting + " Idag er det : " + weekDay; 

}

<p>Velkomst hilsen: @greetingMessage</p>}

1. Man bruger @{...} til at åbne og lukke kode med
2. Du lukker hver kode linie med et semikolon ;
3. Du bruger variabler til at gemme data i, dem specificere du enten med ”var” eller den eksplicite type du ønsker at bruger (string, int, datetime etc.)
4. kode er case-senitivt (ikke hvis du koder VB)

Vi kommer til at kigge på meget mere kode om lidt, men du skal nok lige igennem denne simple og meget overskuelige side før vi fortsætte. Den fortæller en masse omkring syntaxen og de mest gængse programmeringsrutiner man bør kunne (http://www.asp.net/webmatrix/tutorials/2-introduction-to-asp-net-web-programming-using-the-razor-syntax)

C#, VB vs ASP.NET Web pages

Der er meget stor forskel på at udvikle udelukkende med det simple ASP.NET Web Pages API og managed .NET kode; C# eller VB. Det er helt klart at fortrække at man misker de 2 ting lidt efter behov. Det fede er at muligheden er der og, at man kan oprette både klasser og refererer til .NET spefikke typer. .NET er enormt ”powerful” og man kan få enormt meget ud af at benytte sig af det værktøjer og muligheder der ligger i og omkring platformen. Derfor er det bla. også muligt at editere i sin WebMatrix løsning i Visual Studio, hvor du bla. har Intellisense (mega produktivitets boost) og debugging med breakpoints. Begge noget som ikke er med i WebMatrix men giver en enorm værdi når man skal udvikle web applikationer af lidt størrer størrelse.

Shared, App_Data, App_Code og Bin.

ASP.NET Web Pages deler ligsom de andre Microsoft web frameworks den samme overordnede applikationstruktur. Du skal f.eks gemme din applikations specifikke kode i App_Code folderen i dit site, databaser i App_Data etc. Bin folderen er til DLL filer og Shared kan du bruger til layout sider eller ”include” filer.

Koden til gæstebogen.

Jeg har som sagt bygget en simpel gæstebog. Den er baseret på både ASP.NET Web Pages og en lille del C# kode.

Vi vil gerne have vores brugere til at gemme en besked i vores gæstebog og til det skal vi naturligvis bruger nogle form felter. Navn, email, en titel og en besked.

Vores HTML til de form felter ser således ud.

<h1>Skriv besked</h1>
<form method="post" action="default.cshtml">
    <table class="form_fields">
        <tr>
            <td>Navn</td>
            <td class="error"><input type="text" name="name" value="@name" /> @errorStrings["name"]</td>
        </tr>
        <tr>
            <td>Email</td>
            <td class="error"><input type="text" name="email" value="@email" /> @errorStrings["email"]</td>
        </tr>
        <tr>
            <td>Title</td>
            <td class="error"><input type="text" name="title" value="@title" /> @errorStrings["title"]</td>
        </tr>
        <tr>
            <td>Message</td>
            <td class="error"><textarea name="message" cols="40" rows="5">@message</textarea> @errorStrings["message"]</td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" name="save" value="gem" /></td>
        </tr>
    </table>
</form>

En af de fedeste ting ved syntaxen som du ser her er, at man skrive kode direkte i HTML’en, men skal blot lige huske at markere med @ først. Ikke noget med <%= eller <?, blot @. Det er en lille men smuk detalje.

Når en bruger trykker på gem knappen skal vi have noget kode der ligsom håndtere det og til det. Koden her er i samme fil som HTML koden.

@{
    PageData["PageTitle"] = "Daniels Gæstebog";
    LayoutPage = "/Shared/_Layout.cshtml";  
}

@{
    //Variabler
    var name = String.Empty;
    var email = String.Empty;
    var title = String.Empty;
    var message = String.Empty;
    
    //Instansiering af fejl dictonary
    var errorStrings = new Dictionary<string, string>();  
    errorStrings.Add("name", "");
    errorStrings.Add("email", "");
    errorStrings.Add("title", "");
    errorStrings.Add("message", "");
    
    Entry entry = new Entry();
    
    //Hent alle beskeder
    List<Entry> entries = entry.Get();
   
    if(IsPost) {
        //Værider fra post
        name = Request.Form["name"];
        email = Request.Form["email"];
        title = Request.Form["title"];
        message = Request.Form["message"];
        
        //Fejl håndtering
        var errors = false;
        
        if(name.IsEmpty()){
            errors = true;
            errorStrings["name"] = "Du skal skrive dit navn.";
        }

        if(email.IsEmpty()){
            errors = true;
            errorStrings["email"] = "Du skal skrive din email.";
        }
        
        if(title.IsEmpty()){
            errors = true;
            errorStrings["title"] = "Du skal skrive en titel.";
        }
        
        if(message.IsEmpty()){
            errors = true;
            errorStrings["message"] = "Du skal skrive en besked.";
        }
       
        //Hvis der ingen fejl er så opretter vi beskeden
        if(errors == false){
            entry.Name = name;
            entry.Email = email;
            entry.Title = title;
            entry.Message = message;
       
            entry.Save();
            
            Response.Redirect("default.cshtml");
        }
    }
}

Vi kan teste på om der er sket et HTTP POST ved at kalde ”IsPost” metoden som er bygget ind i Web Pages API’et og hvis det er et POST så kan vi agere udfra det.

Vi samler data ind og gemmer dem i variabler og kalde Save metoden på et Entry objekt som er bygget i C#. Det entry objekt sørger for at gemme vores data i en XML fil på disken og så bliver vi ellers redirected til forsiden igen.

Læg også mærke til at vi tjekker for fejl og opretter et Dictionary til at håndtere disse.

Hver gang en bruger besøger siden vil han lave et kald til vores Entry objekt og kalde Get på objektet. Get returnere alle beskeder fra gæstebogen og det er ligeledes skrevet i C#. Lad os se på hvordan det er lavet.

using System;
using System.Collections.Generic;
using System.Web;

using System.Linq;
using System.Xml.Linq;
using System.IO;

/// <summary>
/// Summary description for ClassName
/// </summary>
public class Entry
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Title { get; set; }
    public string Message { get; set; }

    private string entriesDir = HttpContext.Current.Server.MapPath("/Entries/");

    public Entry(){}
    
    public Entry(string _name, string _email, string _title, string _message)
    {
        this.Email = _email;
        this.Message = _message;
        this.Name = _name;
        this.Title = _title;
    }

    public void Save()
    {
        XDocument document = new XDocument();
        document.Add(new XElement("entry"));

        var element = document.Element("entry");

        element.Add(new XElement("name", this.Name));
        element.Add(new XElement("email", this.Email));
        element.Add(new XElement("title", this.Title));
        element.Add(new XElement("message", this.Message));

        try
        {
            document.Save(entriesDir + Guid.NewGuid().ToString() + ".xml");
        }
        catch (Exception)
        {
            throw;
        }
        
    }

    private XElement entryElement;
    public List<Entry> Get()
    {
        DirectoryInfo dirInfo = new DirectoryInfo(entriesDir);

        XDocument document;
        Entry entry;
        List<Entry> entries = new List<Entry>();
        foreach (var file in dirInfo.GetFiles())
        {
            document = XDocument.Load(entriesDir + file.Name);
            entryElement = document.Element("entry");

            entry = new Entry(GetValueFromElement("name"), 
                GetValueFromElement("email"), 
                GetValueFromElement("title"), 
                GetValueFromElement("message"));
            
            entries.Add(entry);
        }

        return entries;
    }

    private string GetValueFromElement(string key)
    {
        return entryElement.Element(key).Value;
    }
}

Der er 2 public metoder, Get og Save. Den ene tager sig af at hente beskederne, den anden gemmer dem. Jeg har brugt XML til det for at vise hvor nemt det er at arbejde med fra .NET. Man kunne også sagtens have brugt en SQL Express database som er gratis og det understøtter Web Pages API’et naturligvis også.

Når vi skal have vist beskederne er det også på vores første side, den kode har vi allerede kigget på. Vi kan skrive beskederne ud sådan her.

@if(entries != null){
    <h1>Alle beskeder</h1>
        
    <table class="list">
        @foreach(var e in entries){
            <tr>
                <td><a href="mailto:@e.Email">@e.Name</a> skrev <b>@e.Title</b></td>
            </tr>
            <tr>
                <td>@e.Message</td>
            </tr>
            <tr>
                <td><hr /></td>
            </tr>
        }
    </table>
}

Det sidste jeg vil vise lige nu er hvordan sitet er strikket sammen ift. det design der er lavet.

I Shared mappen ligger der 3 filer, _footer, _header og _Layout. Når man markere en fil med en underscore kan man ikke browse den direkte.

I _Layout.cshtml kalder jeg RenderPage og RenderBody som begge er indbygget i API’et. Den første renderer en side den anden renderer noget content.

 @RenderPage("/Shared/_header.cshtml") 
      @PageData["name"]
      <div id="main">
        @RenderBody()
      </div>
@RenderPage("/Shared/_footer.cshtml") 

Dette var en kort introduktion til WebMatrix værktøjet og ASP.NET Web Pages. Der kunne siges meget mere og jeg har tænkt mig at skrive ihvertfald et par posts mere i løbet af de næste par måneder.

Hvis du vil lære mere om WebMatrix og ASP.NET Web pages skal du hoppe ind på

1. http://www.asp.net/webmatrix

2. http://www.microsoft.com/web/webmatrix/features/

3. http://weblogs.asp.net/scottgu/archive/2010/07/06/introducing-webmatrix.aspx

4. http://www.hanselman.com/blog/MicrosoftWebMatrixInContextAndDeployingYourFirstSite.aspx

5. http://blogs.microsoft.co.il/blogs/bursteg/archive/2010/07/07/how-to-create-a-cshtml-and-webmatrix-tweetmeme-helper.aspx

6. http://channel9.msdn.com/posts/Dan/Simon-Calvert--Scott-Hunter-WebMatrix-and-the-new-Razor-Syntax/

Nu skulle du være klar til at gå igang!