Artiklar » .NET 4.0 » Introduktion till ASP.NET Web Pages

 
 

Introduktion till ASP.NET Web Pages

Författare: vimpyboy
Datum: den 6 juli 2010
Antal lästa: 6925
Ej stjärnmärkt

Vad är ASP.NET Web Pages?

När .NET Framework 1.0 släpptes kunde man skapa webbsidor med hjälp av Web Forms, vilket påminde en hel del om hur man tidigare skapade program I Visual Basic och liknande språk. Tanken var att det skulle vara event-drivet, och man skulle inte behöva tänka alltför mycket på hur saker och ting renderades i bakgrunden. Det blev snabbt en succé och väldigt många gick över från klassisk ASP och andra språk till detta.

Web Forms hade dock vissa nackdelar. Då logiken för sidorna var hårt kopplade mot den aktuella vyn (code behind-filer kopplade mot web forms) blev det svårt att testa koden eftersom man behövde åtkomst till aktuell HttpContext samt kontrollerna i aspx-filen. På grund av detta introducerade Microsoft år 2007 ett nytt ramverk för ASP.NET vid namn ASP.NET MVC. Det här löste de problemen som fanns, då logiken inte längre var kopplad till vyn, samtidigt som man får mer kontroll över vad som renderas, vilket många har efterfrågat.

Det finns nu två olika lösningar som båda används flitigit i olika typer av projekt, även ofta sida vid sida. Det finns dock fortfarande vissa grupper som har lämnats utanför – de som fortfarande sitter med klassisk ASP, PHP, Ruby eller andra liknande dynamiska språk. Dessa personer är ofta sådana som vill ha dynamisk kod på server-sidan, samt även gärna ha logik direkt i vyerna, då det är enkelt att distribuera och modifiera utan olika verktyg. Det är dessutom ofta enkelt att utföra vissa vanligt förekommande uppgifter med bara ett par rader kod.

För dessa personer har nu Microsoft släppt ett tredje alternativ kallat ASP.NET Web Pages. Det ger möjligheten att använda de nya dynamiska funktionerna i .NET 4.0, samt dessutom resten av hela .NET Framework i sidor som påminner om hur de har arbetat tidigare. Sidor som skapas med ASP.NET Web Pages kan antingen vara skrivna i C# eller Visual Basic, och de kräver att .NET 4.0 finns installerat på servern där man kör applikationerna. När man skapar sidorna använder man en ny syntax kallad ”Razor”.

De nya verktygen

När man utvecklar med till exempel PHP så är ett vanligt verktyg LAMP (Linux, Apache, MySql, PHP), vilket är ett paket som installerar en webbserver, databas samt möjlighet att köra PHP. Det här är väldigt populärt och är enkelt att installera och sätta upp. För .NET-utvecklare finns det Web Application Installer där man kan installera verktygen separat. Problemet med Web Plattform Installer är att allt installeras separat och att vi även får olika verktyg beroende på vad vi vill göra. För att lösa detta har Microsoft nu släppt ett nytt verktyg vid namnet ”Web Matrix”. För er som utvecklade sajter baserade på ASP.NET 1.1 kanske ni minns att det fanns ett gratisverktyg med samma namn för det, men det här är en helt ny produkt.

Web Matrix är ett utvecklingsverktyg där vi kan skapa nya projekt, antingen från grunden, eller genom att hämta en färdig open source-applikation som vi bygger vidare på. Vi har även en inbyggd databashanterare för SQL Server Compact-databaser. Dessa databaser kan vi med det inbyggda deployment-stödet distribuera direkt till webbservern som den är, även om det inte finns någon databas installerad på servern. Utöver det så får vi en inbyggd webbserver, IIS Express, vilket är en fullvärdig version av senaste IIS, men som installeras i Program Files på datorn och som kan köras även på Windows XP utan att användaren behöver administratörsrättigheter.

När det är installerat så kan vi sedan installera hela paketet med Web Matrix.
Klicka för att se bilden i full skala...

När det är installerat så har vi allt som behövs för att kunna skapa nya projekt baserade på ASP.NET Web Pages.

Skapa ett första projekt

När vi skapar projekt med Web Matrix så kan vi göra det på två sätt. Det ena sättet är genom att öppna upp programmet och välja på startskärmen att starta ett nytt projekt, vilket ser ut så här:

Klicka för att se bilden i full skala...


Här kan vi antingen se vilka sajter vi har skapat tidigare, eller så kan vi skapa en sajt från Web Gallery som innehåller olika open source-projekt, baserat på en av de inbyggda mallar som finns, eller genom att välja en mapp som vi vill öppna ett projekt från.
Det andra alternativet är att skapa en mapp någonstans på hårddisken, högerklicka på den och välja att öppna upp som ett projekt i Web Matrix. Jag väljer det här alternativet och skapar därför en mapp på skrivbordet vid namn ”Hemsida”. När jag högerklickar på den så väljer jag alternativet ”Open as a Web Site with Microsoft WebMatrix”.

Klicka för att se bilden i full skala...


När Web Matrix nu öppnas så får jag upp den här skärmen:

Klicka för att se bilden i full skala...


Längst upp har jag en ribbon med möjligheten att se mina sajter, publicera den aktuella till en server genom Web Deploy eller FTP, starta eller stänga IIS Express samt enklare möjligheter att ändra i texter. Jag kan även starta projektet i Visual Studio 2010 om jag har det installerat. Det finns ännu inget bra stöd i Visual Studios editor, men det kommer i ett senare skede.

Till vänster har jag en lista på filer (för tillfället är den tom då jag inte har skapat något), samt genvägar till Site vilket innehåller information om sajten, Databases där jag kan administrera databaser jag använder, samt Reports där jag kan se rapporter för till exempel SEO-analyser.

I mitten har jag ”Add a file to your site”, där jag enkelt kan skapa en ny fil till projektet. Jag väljer att klicka där och får då detta:

Klicka för att se bilden i full skala...


Det vi ska välja att skapa här är en ny fil av typen ”CSHTML”. Det är en ASP.NET-sida som använder C# med den nya Razor-syntaxen. Vi kallar sidan för Default.cshtml och får då upp en fil med det här utseendet:

Kod:
<!DOCTYPE html>
<html>
  <head>
  <title></title>
  </head>
  <body>
  
  </body>
</html>



Det är en väldigt ren sida, och genom att kika på vilken doctype det är så kan vi se att den är baserad på HTML 5 som standard. För att ha en enkel och stilren sida som standard så har jag lagt till lite CSS 3 och HTML 5 till sidan:

Kod:
<!DOCTYPE html>
<html>
    <head>
        <title>Min hemsida</title>
    </head>
    <style>
  * {
  font-family: Georgia;
  }
  
  body {
  width: 750px;
  margin: 0px auto;
  background-color: #ccc;
  }
  
  h2 { font-style: italic; }
  
  a {
  text-decoration: none;  
  }
  
  nav ul {
  list-style: none;
  padding-left: 0px;
  }
  
  nav ul li {
  background-color: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  display: inline-block;
  margin: 3px;
  padding: 3px;
  }
  
  section {
  display: block;
  background-color: #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  padding: 3px;
  margin: 3px;
  }
    </style>
    <body>
    
        <hgroup>
            <h1>Min hemsida</h1>
            <h2>Skapad med ASP.NET Web Pages!</h2>
        </hgroup>
        
        <nav>
            <ul>
                <li><a href="@Href("~/")">Startsidan</a></li>
                <li><a href="@Href("~/Guestbook")">Gästboken</a></li>
            </ul>
        </nav>
        
        <section>
            <p>
                Välkommen till min hemsida!
            </p>
        </section>
        
    </body>
</html>



Det blev ganska mycket på en gång nu, men om ni kikar noggrant så kan ni se några saker som inte har med vare sig HTML 5 eller CSS 3 att göra, och det är utseendet på länkarna i menyn som har utseendet @Href(”~/”). Det är en del av den nya syntaxen i Razor, och skulle med vanlig ASP.NET MVC se ut i stil med <%= Href(”~/”) %>. All inline-kod i Razor börjar med ett @ och har sedan metodnamnet som skall anropas. Vi kan blanda in denna direkt i vår HTML på ett enkelt sätt.

Vill vi ha mer kod på en rad så kan det se ut så här:

Kod:
@{ SomeMethod(”Hello, World!”); HelloWorld(); }



Eller samma kod över flera metoder:
Kod:
@{
  SomeMethod(”Hello, World!”);
  HelloWorld();
}



Det ser mycket renare ut än den vanliga syntaxen som annars används, och gör att vi slipper många onödiga tecken.

Om vi surfar in på sidan med en webbläsare som klarar av att visa HTML 5 och CSS 3 (till exempel Internet Explorer 9) genom att klicka på Launch i menyn så ser vi det här:

[http://weblogs.asp.net/blogs/mikaelsoderstrom/clip_image012_12EB41C9.gif]

Vi har nu en väldigt enkel sida där vi använder IIS Express för att leverera vår ASP.NET Web Pages-baserade hemsida som vi har skapat i Web Matrix.

Använd master-sidor med ASP.NET Web Pages

För att kunna återanvända delar av sidan som alltid skall vara synliga så kan man med ASP.NET Web Forms och ASP.NET MVC använda vad som kallas Master Pages. Det är en sida där vi laddar in den vanliga sidan, men som har allt omkringliggande som till exempel menyn.
För att separera på allt på vår startsida så börjar vi med att lägga all CSS i en separat fil. Stäng ned det öppna dokumentet och klicka sedan på ”Add a file to your site” igen där du väljer att skapa en CSS-fil. Flytta sedan all CSS från Index.cshtml dit. Nästa steg är att identifiera de delar som är unika för varje sida.

Det som är unikt är:
•    Titeln på sidan.
•    Underrubriken.
•    Det som finns i section-elementet.

Skapa nu en ny CSHTML-sida med namnet ”_Layout.cshtml”. Anledningen till att vi har ett understreck (_) i namnet är för att man inte ska kunna surfa till den sidan. Alla sidor som har ett inledande understreck är blockerade från att surfa dit.

I _Layout.cshtml lägger vi in det här:

Kod:
<!DOCTYPE html>
<html>
    <head>
        <title>@ViewData["PageTitle"]</title>
    </head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <body>
    
        <hgroup>
            <h1>Min hemsida</h1>
            <h2>@ViewData["PageHeader"]</h2>
        </hgroup>
        
        <nav>
            <ul>
                <li><a href="@Href("~/")">Startsidan</a></li>
                <li><a href="@Href("~/Guestbook")">Gästboken</a></li>
            </ul>
        </nav>
        
        <section>
            @RenderBody()
        </section>
        
    </body>
</html>



Här hämtar vi @ViewData[”PageTitle”] för titeln, @ViewData[”PageHeader”] för underrubriken samt RenderBody() för själva innehållet på sidan.

När vi nu vill använda det här i Default.cshtml så räcker det med att vi har det här:

Kod:
@{
  //Sätt _Layout.cshtml som master-sida
  LayoutPage = "~/_Layout.cshtml";
  
  //Sätt egenskaper för sidan
  ViewData["PageTitle"] = "Min hemsida";
  ViewData["PageHeader"] = "Skapad med ASP.NET Web Pages!";
}

<p>
    Välkommen till min hemsida!
</p>



Det vi gör nu är att vi sätter en LayoutPage, samt de egenskaper som skall skickas dit.
Surfar vi nu till sidan så kan vi se att den ser exakt likadan ut som tidigare, men vi har helt klart mindre kod i default.cshtml. Även framtida sidor vi skapar behöver bara ha med detta. Vill vi framöver ändra utseendet på sidan så räcker det med att ändra i Layout.cshtml.

Skapa en databas för gästboken

I menyn har vi en länk till /Guestbook, vilken inte finns än. För att skapa en sådan så börjar vi med databasen. Det vi vill lagra i gästboken är namn, e-postadress, datum och själva inlägget i sig.

Börja med att klicka på Databases i vänstra menyn. Välj sedan ”Add a database to your site”. Det som hander nu är att en database med namnet “Hemsida.sdf” skapas upp. Det är en SQL Server Compact-databas som vi automatiskt kan komma åt från projektet.
Skapa upp fälten enligt bilden nedan:

Klicka för att se bilden i full skala...


Spara tabellen som ”Entries” och stäng sedan ned den.

När vi nu går tillbaka till Files i vänstra menyn så kan vi se att en App_Data-mapp har skapats upp (om du inte ser den så högerklicka och välj Refresh).

Öppna upp mappen och dubbelklicka på databasen. Här kan vi lägga till ny data, samt se och ta bort befintlig. Lägg nu till dessa exempelposter:

Klicka för att se bilden i full skala...


Nu har vi skapat upp en databas i vårt projekt som vi sedan kan anropa från våra sidor, samt fyllt den med exempeldata. Nästa steg blir att hämta ut datan, samt göra det möjligt att lägga till fler poster.

Arbeta med data i ASP.NET Web Pages

I ASP.NET 2.0 introducerades DataSource-kontrollerna, vilka kan användas för att arbeta med data från en databas eller annan källa. I .NET 3.5 kom även Linq to SQL med som underlättar arbetet även från kodsidan och i .NET 3.5 SP 1 fick vi även möjligheten att använda Entity Framework som underlättar ännu mer för det.

I ASP.NET Web Pages introduceras ännu en modell för att hämta data. Man kan se det som en bblandning av de olika typerna som vi tidigare har haft. Anledningen till detta är att vi ska kunna fokusera på det vi är ute efter, och lämna det andra vid sidan av, precis som med de andra varianterna som har flyttat arbetet från ADO.NET närmare det vi faktiskt jobbar med – själva objekten. För att lösa det enkelt och utan proxyklasser och liknande så används dynamic-funktionaliteten i .NET 4.0.

För att kunna läsa alla inlägg från databasen så skapar vi en ny fil som heter Guestbook.cshtml. Här lägger vi till följande kod:

Kod:
@{
  //Sätt _Layout.cshtml som master-sida
  LayoutPage = "~/_Layout.cshtml";
  
  //Sätt egenskaper för sidan
  ViewData["PageTitle"] = "Min gästbok";
  ViewData["PageHeader"] = "Skriv något i min gästbok!";
  
  var db = Database.OpenFile("Hemsida.sdf");
}

<h3>Gästboken</h3>

<section>
  @foreach (var row in db.Query("SELECT * FROM Entries ORDER BY Date DESC")) {
  <article class="guestbook-entry">
  @Gravatar.GetHtml(row.Email)
  <p>
  @row.Entry
  </p>
  @row.Name @@ <time datetime="">@row.Date</time>
  </article>
  }
</section>



Om vi börjar från toppen så ser vi att allt ser ut precis som tidigare. Det är dock en skillnad – vi har lagt till en variabel som läser av funktionen Database.OpenFile(). Det som händer där är att vi skapar en koppling mot databasen som vi har skapat upp tidigare, för att vi sedan skall kunna använda den för att hämta data.

Några rader nedanför så har vi sedan en foreach-loop som hämtar alla rader i db.Query(”SQL-fråga”) och går igenom dem. Vi kan nu alltså med två rader kod enkelt skapa en databaskoppling och sedan hämta alla värden i en collection. Då allt är dynamiskt så kan vi hämta till exempel @row.Name för att hämta ut namn-fältet i databasen.

Något som kan se konstigt ut här är @Gravatar.GetHtml(). Det är en av flera inbyggda helpers som vi kan använda oss utav. Andra helpers som finns är för Twitter, för att generera tabeller och annat. Det Gravatar-helpern gör är att den tar e-postadressen och ser om det finns en gravatar sparad för denna. För dem som inte vet vad Gravatar är för något så är det en tjänst där man laddar upp en bild som man kopplar till sin e-postadress, och när man sedan använder sin e-post på en sida som har implementerat gravatar så visas den bilden direkt på sidan.

För att snygga till gästboken så lägger vi till det här i css-filen:

Kod:
article.guestbook-entry {
  display: block;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  padding: 5px;
}

article.guestbook-entry:nth-child(2n+1) {
  background-color: #ccc;
}



Det gör att vi får rundade hörn och att varannat inlägg får grå bakgrundsfärg.
Surfar vi till gästboken så får vi nu upp det här:
Klicka för att se bilden i full skala...

Med bara några enstaka rader kod fick vi in inlägg med namn, datum, text och dessutom en bild på personen som har postat inlägget.

En gästbok som bara kan lista poster är dock kanske inte den roligaste att ha. Nästa steg blir att lägga till ett formulär där vi kan skriva nya poster. Först och främst så lägger vi till själva formuläret längst ned på sidan:

Kod:
<fieldset>
  <legend>Skriv ett nytt inlägg!</legend>
  
  <form action="@Href("~/Guestbook")" method="post">
  <div>
  <label for="name">Namn:</label>
  <input type="text" name="name" />
  </div>
  
  <div>
  <label for="email">E-post:</label>
  <input type="email" name="email" />
  </div>
  
  <div>
  <label for="entry">Inlägg:</label>
  <textarea name="entry"></textarea>
  </div>
  
  <div>
  <input type="submit" value="Skicka!" />
  </div>
  </form>
</fieldset>



Det är ett helt vanligt formulär där vi postar tillbaka till gästboken. För att sedan läsa av värdet så får vi lägga till lite kod efter att vi skapar kopplingen mot databasen:

  Kod:
var db = Database.OpenFile("Guestbook.sdf");
  
  if (IsPost)
  {
  var name = Request["name"];
  var entry = Request["entry"];
  var email = Request["email"];
  var date = DateTime.Now;
  var insertQuery = "INSERT INTO Entries (Name, Entry, Date, Email) VALUES (@0, @1, @2, @3)";
  
  db.Execute(insertQuery, name, entry, date, email);
  }



Variabeln ”db” är densamma som vi skapar för att läsa av från databasen. Det vi gör för att spara är att vi först ser om en postning har gjorts, sedan läser vi av de olika variablerna som har tagits emot samt lägger till dagens datum, för att till sist köra db.Execute(). När vi gör anropet mot databasen använder vi parametrar för att få in våra värden i SQL-satsen.
Om vi nu fyller i något i formuläret så sparas det ned i databasen och visas senare på sidan. Allt med bara ett par rader C#-kod.

Sammanfattning

Med de nya verktygen, den nya syntaxen och de nya funktionerna så kan man enkelt sätta igång med ASP.NET och skapa nya sajter. Trots att det ser väldigt simpelt ut med de inbyggda funktionerna så kommer vi åt all funktionalitet i .NET Framework då  det egentligen bara är ett lager på vanliga ASP.NET.

För att gå vidare härifrån så kan jag rekommendera att ni testar verktyget och experimenterar med all funktionalitet. Det finns väldigt mycket man kan göra, även om det ser väldigt enkelt ut!

Artikeln som pdf och xps:
http://cid-4aa13e17331c7398.office.live.com/browse.aspx/Public/Artiklar/ASP.NET%20Web%20Pages?uc=4
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 2  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,1094 sekunder att ladda sidan