Denna handledning introducerar Microsoft WebMatrix, en fri webbutvecklingsteknik som levererar en av de bästa upplevelserna för webbutvecklare.

Vad du lär dig:

• Vad är WebMatrix?
• Så här installerar du WebMatrix.
• Så här börjar du skapa en enkel webbplats med WebMatrix.
• Så här skapar du en dynamisk webbsida med WebMatrix.
• Så här programmerar du dina webbsidor i Visual Studio för att dra nytta av mer avancerade funktioner.

Vad är WebMatrix?

WebMatrix är en gratis, lätt uppsättning webbutvecklingsverktyg som ger det enklaste sättet att bygga webbplatser.

Den innehåller IIS Express (en utvecklingswebbserver), ASP.NET (en webbram) och SQL Server Compact (en inbäddad databas). Det innehåller också ett enkelt verktyg som effektiviserar webbutveckling och gör det enkelt att starta webbplatser från populära open source-appar. De färdigheter och kod du utvecklar med WebMatrix-övergången sömlöst till Visual Studio och SQL Server.

De webbsidor du skapar med WebMatrix kan vara dynamiska, det vill säga de kan ändra innehållet eller stilen baserat på användarinmatning eller annan information, till exempel databasinformation. För att programmera dynamiska webbsidor använder du ASP.NET med razor-syntaxen och med C # eller Visual Basic programmeringsspråk.

Om du redan har programmeringsverktyg som du vill kan du prova WebMatrix-verktygen eller du kan använda egna verktyg för att skapa webbplatser som använder ASP.NET.

Denna handledning visar hur WebMatrix gör det enkelt att komma igång med att skapa webbplatser och dynamiska webbsidor.

Installera WebMatrix

För att installera WebMatrix kan du använda Microsofts webbplatformsinstallatör, vilket är ett gratis program som gör det enkelt att installera och konfigurera webbrelaterade tekniker.

1. Om du inte redan har webbplatformsinstallatören laddar du ner den från följande webbadress:

   http://go.microsoft.com/fwlink/?LinkID=205867

2. Kör Web Platform Installer, välj Strålkastare, och klicka sedan på Lägg till att installera WebMatrix.
   

   Noteraяя Om du redan har en WebMatrix Beta-version installerad, uppgraderar webbplatformsinstallatören installationen till WebMatrix 1.0. Webbplatser du skapade med tidigare Beta-utgåvor visas emellertid inte i Mina webbplatser lista när du först öppnar WebMatrix. För att öppna en tidigare skapad webbplats klickar du på Webbplats från mapp ikonen, bläddra till webbplatsen och öppna den. Nästa gång du öppnar WebMatrix kommer webbplatsen att visas i Mina webbplatser lista.

Komma igång med WebMatrix

Till att börja med skapar du en ny webbplats och en enkel webbsida.

1. Starta WebMatrix.
2. Klick Webbplats från mall. Mallar innehåller förbyggda filer och sidor för olika typer av webbplatser.
3. Välj Tom plats och namnge den nya sajten Hej världen.
4. Klick ok. WebMatrix skapar och öppnar den nya sajten.

   Överst ser du en snabbåtkomstverktygsfält och ett band, som i Microsoft Office 2010. Nedtill till vänster ser du arbetsytaväljaren, som innehåller knappar som bestämmer vad som visas ovanför dem i den vänstra rutan. Till höger finns innehållsfönstret, där du visar rapporter, redigerar filer och så vidare. Slutligen, längst ner är anmälningsfältet, som visar meddelanden efter behov.

   

Skapa en webbsida

1. I WebMatrix väljer du filer arbetsyta. Med den här arbetsytan kan du arbeta med filer och mappar. Den vänstra rutan visar filstrukturen på din webbplats.
2. I bandet klickar du på Ny och klicka sedan på Ny fil.

   WebMatrix visar en lista över filtyper.

   
3. Välj CSHTML, och i namn box, typ default.cshtml. En CSHTML-sida är en särskild typ av sida i WebMatrix som kan innehålla det vanliga innehållet på en webbsida, till exempel HTML- och JavaScript-kod, och det kan också innehålla kod för programmering av webbsidor. (Du lär dig mer om CSHTML-filer senare.)
4. Klick ok. WebMatrix skapar sidan och öppnar den i redigeraren.

   Som du kan se är det vanligt HTML-markup.

5. Lägg till följande rubrik, rubrik och styckeinnehåll på sidan:

           
   Hej världssida
    
   Hej världen!
     

6. Klicka på verktygsfältet Snabbåtkomst Spara.
7. I bandet klickar du på Springa.

   Noteraяя Innan du klickar Springa, se till att webbsidan du vill köra är markerad i navigeringsfönstret i filer arbetsyta. WebMatrix kör den sida som valts, även om du för närvarande redigerar en annan sida. Om ingen sida väljs, försöker WebMatrix att köra standardsidan för webbplatsen (default.cshtml), och om det inte finns någon standard sida, visar webbläsaren ett fel.

   WebMatrix startar en webbserver (IIS Express) som du kan använda för att testa sidor på din dator. Sidan visas i din standardwebbläsare.

   

Installera hjälpare med administrationsverktyget

Nu när du har installerat WebMatrix och en webbplats skapad är det en bra idé att lära dig hur du använder ASP.NET webbsidor Administrationsverktyget och Package Manager för att installera hjälpare. WebMatrix innehåller hjälpmedel (komponenter) som förenklar vanliga programmeringsuppgifter och som du använder i hela dessa handledning. (Några hjälpare är redan med i WebMatrix, men du kan installera andra också.) I bilagan hittar du en snabb referens för de medföljande hjälparna och för andra hjälpare som du kan installera som en del av ett paket som heter ASP.NET Web Helpers Library. Följande procedur visar hur du använder Administrationsverktyget för att installera ASP.NET Web Helpers Library. Du kommer att använda några av dessa hjälpare i denna handledning och andra handledning i denna serie.

1. I WebMatrix, klicka på Webbplats arbetsyta.
2. Klicka på i innehållsfönstret ASP.NET webbsidor Administration. Detta laddar en administratörssida i din webbläsare. Eftersom det här är första gången du loggar in på administratörssidan, uppmanas du att skapa ett lösenord.
3. Skapa ett lösenord.

   När du klickar på Skapa lösenord, En säkerhetskontrollsida som ser ut som följande skärmdump, ber dig om att byta namn på lösenordsfilen av säkerhetsskäl. Om det här är första gången du ser den här sidan, försök inte att byta namn på filen ännu. Fortsätt till nästa steg och följ anvisningarna där.

   
4. Lämna webbläsaren öppen på säkerhetskontrollsidan, återvänd till WebMatrix och klicka på filer arbetsyta.
5. Högerklicka på Hej världen mapp för din webbplats och klicka sedan på Uppdatera. Listan över filer och mappar visar nu en Applikationsdata mapp. Öppna det och du ser en Administration mapp. Den nyskapade lösenordsfilen (_Password.config) visas i ./ App_Data / Admin / mapp. Följande illustration visar den uppdaterade filstrukturen med den valda lösenordsfilen:

6. Byt namn på filen till Password.config genom att ta bort den främsta underskridningstecknet (_).
7. Återgå till säkerhetskontrollsidan i webbläsaren och klicka på Klicka här länk nära slutet av meddelandet om att byta namn på lösenordsfilen.
8. Logga in på administratörssidan med det lösenord du skapade. Sidan visar pakethanteraren, som innehåller en lista med tilläggspaket.

   Om du någonsin vill visa andra matningsplatser klickar du på Hantera paketkällor länk för att lägga till, ändra eller ta bort flöden.

9. Hitta ASP.NET Web Helpers Library-paketet. För att begränsa listan, sök efter hjälpare använda Sök fält. Följande bild visar resultatet av att söka efter hjälpare. Observera att flera versioner av detta paket är tillgängliga
10. Välj den version du vill ha, klicka på Installera knappen, och sedan installera paketet som anges. När paketet är installerat, visar pakethanteraren result.я

    På den här sidan kan du också avinstallera paket, och du kan använda sidan för att uppdatera paket när nya versioner är tillgängliga. Du kan gå till Show rullgardinsmenyn och klicka på installerad för att visa de paket du har installerat, eller klicka på uppdateringar för att visa tillgängliga uppdateringar för de installerade paketen.

    Noteraяя Standardwebbplatskartorna (Bageri, Kalender, Fotogalleri, och Startsidan) finns i C # och Visual Basic versioner. Du kan installera Visual Basic-mallarna med hjälp av ASP.NET webbsidor Administration verktyg i WebMatrix. Öppna Administrationsverktyget enligt beskrivningen i det här avsnittet och sök efter VB, och installera sedan de mallar du behöver. Webbplatskartor installeras i din mapps rotmapp i en mapp som heter Microsoft Mallar.

    I nästa avsnitt ser du hur lätt det är att lägga till kod till default.cshtml sida för att skapa en dynamisk sida.

Använda ASP.NET webbsidor kod

I det här förfarandet skapar du en sida som använder enkel kod för att visa serverens datum och tid på sidan. Exemplet här kommer att introducera dig till Razor-syntaxen som låter dig bädda in kod i HTML på ASP.NET webbsidor. (Du kan läsa mer om detta i nästa handledning.) Koden introducerar en av de hjälpare som du läser om tidigare i handledningen.

1. Öppna din default.cshtml fil.
2. Lägg till markering på sidan så att den ser ut som följande exempel:

           
   Hej världssida
    
   Hej världen!
    
   Tiden är @ DateTime.Now
     

   Sidan innehåller vanligt HTML-markup, med ett tillägg: @ teckenmärken ASP.NET programkod.

3. Spara sidan och kör den i webbläsaren. Nu ser du aktuellt datum och tid på sidan.

   Den enkla raden av kod du har lagt till gör allt arbete för att bestämma aktuell tid på servern, formatera den för visning och skicka den till webbläsaren. (Du kan ange formateringsalternativ, det här är bara standard.)

Antag att du vill göra något mer komplext, till exempel att visa en rullningslista över tweets från en Twitter-användare som du väljer. Du kan använda en hjälpare för det; Som tidigare nämnts är en hjälpare en komponent som förenklar gemensamma uppgifter. I det här fallet måste allt arbete som du annars behöver hämta och visa ett Twitter-flöde.

1. Skapa en ny CSHTML-fil och namnge den TwitterFeed.cshtml.
2. På sidan ersätter du den befintliga koden med följande kod:

           
   Twitter flöde
    
    
    Ange namnet på ett annat Twitter-flöde som ska visas:       
    
    @if (Begär ["TwitterUser"]. IsEmpty ()) @ Twitter.Search ("microsoft") annars @ Twitter.Profile (Begär ["TwitterUser"]) 
    
     

   Denna HTML skapar en blankett som visar en textruta för att ange ett användarnamn plus ett Lämna knapp. Dessa är mellan den första uppsättningen av

   taggar.

   Mellan den andra uppsättningen av

   taggar finns det någon kod. (Som du såg tidigare, för att markera kod på ASP.NET webbsidor, använder du @ tecken.) Första gången den här sidan visas, eller om användaren klickar Lämna men lämnar textrutan tomt, det villkorliga uttrycket Begär [ "TwitterUser"]. IsEmpty kommer att vara sant. I så fall visar sidan ett Twitter-flöde som söker efter termen "Microsoft". Annars visar sidan ett Twitter-flöde för vilket användarnamn du angav i textrutan.

3. Kör sidan i webbläsaren. Twitter-flödet visar tweets med "microsoft" i dem.
4. Ange ett Twitter användarnamn och klicka sedan på Lämna. Den nya matningen visas. (Om du anger ett obefintligt namn visas ett Twitter-flöde fortfarande, det är bara tomt.)

   Det här exemplet har visat dig lite om hur du kan använda WebMatrix och hur du kan programmera dynamiska webbsidor med hjälp av enkel ASP.NET-kod med Razor-syntaxen. Nästa handledning granskar koden i mer djup. I efterföljande tutorials visar du hur du använder kod för många olika typer av webbplatsuppgifter.

Programmera ASP.NET Razor-sidor i Visual Studio

Förutom att använda WebMatrix för att programmera ASP.NET Razor-sidor kan du också använda Visual Studio 2010, antingen en av de fullständiga utgåvorna eller den fria Visual Web Developer Express-utgåvan. Om du använder Visual Studio eller Visual Web Developer för att redigera ASP.NET Razor-sidor får du två programmeringsverktyg som kan förbättra din produktivitet-IntelliSense och debugger. IntelliSense arbetar i redigeraren genom att visa kontext-lämpliga val. När du till exempel anger ett HTML-element, visar IntelliSense dig en lista över attribut som elementet kan ha, och det kan till och med visa dig vilka värden du kan ställa in dessa attribut för. IntelliSense fungerar för HTML, JavaScript och C # och Visual Basic (de programmeringsspråk du använder för ASP.NET Razor-sidor.)

Felsökaren låter dig stoppa ett program medan det körs. Du kan sedan undersöka saker som värdena på variabler, och du kan gå linje för rad genom programmet för att se hur det går.

För att arbeta med ASP.NET Razor Pages i Visual Studio behöver du följande programvara installerad på din dator:

• Visual Studio 2010 eller Visual Web Developer 2010 Express
• ASP.NET MVC 3 RTM.

Noteraяя Du kan installera både Visual Web Developer 2010 Express och ASP.NET MVC 3 med hjälp av webbplatformsinstallatören.

Om du har Visual Studio installerat, kan du starta webbplatsen i Visual Studio för att utnyttja IntelliSense och debuggern när du redigerar en webbplats i WebMatrix..

1. Öppna webbplatsen du skapade i den här handledningen och klicka sedan på filer arbetsyta.
2. I bandet klickar du på Visual Studio Launch knapp.

   När webbplatsen öppnas i Visual Studio kan du se webbplatsstrukturen i Visual Studio i Lösningsutforskare rutan. Följande illustration visar webbplatsen öppnad i Visual Web Developer 2010 Express:

   

   För en översikt över hur du använder IntelliSense och debuggeren med ASP.NET Razor-sidor i Visual Studio, se bilagan ASP.NET webbsidor Visual Studio.

Skapa och testa ASP.NET-sidor med din egen textredigerare

Du behöver inte använda WebMatrix-redigeraren för att skapa och testa en ASP.NET-webbsida. För att skapa sidan kan du använda någon textredigerare, inklusive anteckningsblock. Var noga med att spara sidor med .cshtml filnamnstillägg (Eller .vbhtml om du vill använda Visual Basic)

Det enklaste sättet att testa .cshtml sidor är att starta webbservern (IIS Express) med hjälp av WebMatrix Springa knapp. Om du inte vill använda WebMatrix-verktyget kan du dock köra webbservern från kommandoraden och associera den med ett visst portnummer. Du anger då den porten när du begär det .cshtml filer i din webbläsare.

I Windows öppnar du en kommandotolk med administratörsbehörigheter och ändras till följande mapp:

C: \ Program \ IIS Express

För 64-bitars system, använd den här mappen:

C: \ Programfiler (x86) \ IIS Express

Ange följande kommando med den faktiska sökvägen till din webbplats:

iisexpress.exe / port: 35896 / path: C: \ BasicWebSite

Det spelar ingen roll vilken portnummer du använder, så länge porten inte redan är reserverad av någon annan process. (Portnummer över 1024 är normalt gratis.)

För sökvägen, använd sökvägen till webbplatsen där .cshtml filer är det du vill testa.

Efter det här kommandot körs kan du öppna en webbläsare och bläddra till en .cshtml fil, så här:

http: // localhost: 35.896 / default.cshtml

För hjälp med IIS Express kommandoradsalternativ, skriv in iisexpress.exe /? på kommandoraden.