Denne opplæringen introduserer Microsoft WebMatrix, en gratis webutviklingsteknologi som leverer en av de beste opplevelsene for webutviklere.

Hva du vil lære:

• Hva er WebMatrix?
• Slik installerer du WebMatrix.
• Hvordan komme i gang med å lage et enkelt nettsted ved hjelp av WebMatrix.
• Hvordan lage en dynamisk nettside ved hjelp av WebMatrix.
• Slik programmerer du websider i Visual Studio for å dra nytte av mer avanserte funksjoner.

Hva er WebMatrix?

WebMatrix er et gratis, lett sett med webutviklingsverktøy som gir den enkleste måten å bygge nettsteder på.

Den inkluderer IIS Express (en utviklingswebserver), ASP.NET (en webramme) og SQL Server Compact (en innebygd database). Den inneholder også et enkelt verktøy som strømlinjeformer webutvikling og gjør det enkelt å starte nettsteder fra populære open source-apper. Kompetansene og koden du utvikler med WebMatrix-overgang sømløst til Visual Studio og SQL Server.

Websidene du oppretter ved hjelp av WebMatrix, kan være dynamiske, det vil si at de kan endre innholdet eller stilen basert på brukerinngang eller annen informasjon, for eksempel databaseinformasjon. For å programmere dynamiske websider, bruker du ASP.NET med Razor-syntaks og med C # eller Visual Basic programmeringsspråk.

Hvis du allerede har programmeringsverktøy som du liker, kan du prøve WebMatrix-verktøyene, eller du kan bruke dine egne verktøy til å lage nettsteder som bruker ASP.NET.

Denne opplæringen viser hvordan WebMatrix gjør det enkelt å komme i gang med å lage nettsteder og dynamiske websider.

Installere WebMatrix

For å installere WebMatrix kan du bruke Microsofts webplattforminstaller, som er et gratis program som gjør det enkelt å installere og konfigurere webrelaterte teknologier.

1. Hvis du ikke allerede har nettplattforminstallatøren, laster du ned den fra følgende nettadresse:

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

2. Kjør installasjonsprogrammet for webplattform, velg Spotlight, og klikk deretter Legg til å installere WebMatrix.
   

   Merkяя Hvis du allerede har en WebMatrix Beta-versjon installert, oppgraderer Web Platform Installer installasjonen til WebMatrix 1.0. Nettsteder du opprettet med tidligere Beta-utgaver, kan imidlertid ikke vises i Mine nettsteder liste når du først åpner WebMatrix. For å åpne et tidligere opprettet nettsted klikker du på Nettsted fra mappe ikonet, bla til nettstedet, og åpne det. Neste gang du åpner WebMatrix, vil nettstedet bli vist i Mine nettsteder liste.

Komme i gang med WebMatrix

For å begynne, vil du opprette et nytt nettsted og en enkel nettside.

1. Start WebMatrix.
2. Klikk Nettstedet fra mal. Maler inkluderer forhåndsbygde filer og sider for ulike typer nettsteder.
3. Å velge Tomt sted og navnet på det nye nettstedet Hei Verden.
4. Klikk OK. WebMatrix lager og åpner det nye nettstedet.

   Øverst finner du en hurtig tilgangsverktøylinje og et bånd, som i Microsoft Office 2010. Nederst til venstre ser du arbeidsområdevelgeren, som inneholder knapper som bestemmer hva som vises over dem i venstre rute. Til høyre er innholdsruten, hvor du ser rapporter, redigerer filer og så videre. Til slutt, over bunnen, er varslingslinjen, som viser meldinger etter behov.

   

Opprette en webside

1. I WebMatrix velger du filer arbeidsområde. Dette arbeidsområdet lar deg arbeide med filer og mapper. I venstre rute vises filstrukturen på nettstedet ditt.
2. I båndet, klikk Ny og klikk deretter Ny fil.

   WebMatrix viser en liste over filtyper.

   
3. Å velge CSHTML, og i Navn boks, skriv inn default.cshtml. En CSHTML-side er en spesiell type side i WebMatrix som kan inneholde det vanlige innholdet på en nettside, for eksempel HTML- og JavaScript-kode, og det kan også inneholde kode for programmering av websider. (Du lærer mer om CSHTML-filer senere.)
4. Klikk OK. WebMatrix lager siden og åpner den i redigeringsprogrammet.

   Som du kan se, er dette vanlig HTML-oppføring.

5. Legg til følgende tittel, overskrift og innhold i avsnittet til siden:

           
   Hei verdens side
    
   Hei Verden!
     

6. Klikk på verktøylinjen for hurtig tilgang Lagre.
7. I båndet, klikk Løpe.

   Merkяя Før du klikker Løpe, sørg for at nettsiden du vil kjøre er valgt i navigasjonsruten i filer arbeidsområde. WebMatrix kjører siden som er valgt, selv om du for tiden redigerer en annen side. Hvis ingen side er valgt, prøver WebMatrix å kjøre standardsiden for nettstedet (default.cshtml), og hvis det ikke er noen standardside, viser nettleseren en feil.

   WebMatrix starter en webserver (IIS Express) som du kan bruke til å teste sider på datamaskinen. Siden vises i standard nettleser.

   

Installere hjelpere med administrasjonsverktøyet

Nå som du har installert WebMatrix og et nettsted opprettet, er det en god idé å lære å bruke ASP.NET Websider Administrasjonsverktøy og Package Manager for å installere hjelpere. WebMatrix inneholder hjelpere (komponenter) som forenkler felles programmeringsoppgaver, og som du vil bruke gjennom disse opplæringsprogrammene. (Noen hjelpere er allerede med i WebMatrix, men du kan også installere andre.) I tillegget finner du en rask referanse for de medfølgende hjelperne og for andre hjelpere som du kan installere som en del av en pakke som heter ASP.NET Web Helpers Library. Følgende fremgangsmåte viser hvordan du bruker Administrasjonsverktøyet til å installere ASP.NET Web Helpers Library. Du vil bruke noen av disse hjelperne i denne opplæringen og andre opplæringsprogrammer i denne serien.

1. I WebMatrix klikker du på Nettstedet arbeidsområde.
2. I innholdsruten klikker du ASP.NET websider administrasjon. Dette laster inn en administrasjonsside i nettleseren din. Fordi dette er første gang du logger deg på administrasjonssiden, ber det deg om å opprette et passord.
3. Lag et passord.

   Etter at du klikker Lag passord, En sikkerhetskontrollside som ser ut som følgende skjermbilde, ber deg om å gi nytt navn til passordfilen av sikkerhetshensyn. Hvis dette er første gang du ser denne siden, kan du ikke prøve å gi nytt navn til filen. Fortsett til neste trinn og følg instruksjonene der.

   
4. La nettleseren være åpen på sikkerhetskontrollsiden, gå tilbake til WebMatrix, og klikk på filer arbeidsområde.
5. Høyreklikk på Hei Verden mappe for nettstedet ditt og klikk deretter Forfriske. Listen over filer og mapper viser nå en App_Data mappe. Åpne det og du ser en admin mappe. Den nyopprettede passordfilen (_Password.config) vises i ./ App_Data / Admin / mappe. Følgende illustrasjon viser den oppdaterte filstrukturen med den valgte passordfilen:

6. Gi nytt navn til filen til Password.config ved å fjerne tegnets ledende underskrift (_).
7. Gå tilbake til sikkerhetskontrollsiden i nettleseren, og klikk på Klikk her lenke nær slutten av meldingen om å gi nytt navn til passordfilen.
8. Logg inn på administrasjonssiden ved hjelp av passordet du opprettet. Siden viser pakkebehandling, som inneholder en liste over tilleggspakker.

   Hvis du noen gang vil vise andre feedssteder, klikker du på Administrer pakkekilder lenke for å legge til, endre eller fjerne feeds.

9. Finn ASP.NET Web Helpers Library-pakken. For å begrense listen, søk etter hjelpere bruker Søke felt. Følgende bilde viser resultatet av å søke etter hjelpere. Legg merke til at flere versjoner av denne pakken er tilgjengelig
10. Velg den versjonen du vil ha, klikk på Installere knappen, og installer deretter pakken som angitt. Når pakken er installert, viser Package Manager result.ja

    Denne siden lar deg også avinstallere pakker, og du kan bruke siden til å oppdatere pakker når nyere versjoner er tilgjengelige. Du kan gå til Vise fram rullegardinliste og klikk installert for å vise pakkene du har installert, eller klikk oppdateringer for å vise tilgjengelige oppdateringer for de installerte pakkene.

    Merkяя Standard nettstedskabeloner (Bakeri, Kalender, Fotogalleri, og Startsiden) er tilgjengelige i C # og Visual Basic versjoner. Du kan installere Visual Basic-maler ved å bruke ASP.NET websider administrasjon verktøy i WebMatrix. Åpne administrasjonsverktøyet som beskrevet i denne delen og søk etter VB, og installer deretter maler du trenger. Nettstedskabeloner er installert i rotmappen til nettstedet ditt i en navngitt mappe Microsoft Maler.

    I neste avsnitt ser du hvor enkelt det er å legge til kode i default.cshtml side for å opprette en dynamisk side.

Bruke ASP.NET Web Pages Code

I denne prosedyren lager du en side som bruker enkel kode for å vise serverens dato og klokkeslett på siden. Eksemplet her vil introdusere deg til Razor-syntaksen som lar deg legge inn kode i HTML på ASP.NET Websider. (Du kan lese mer om dette i neste opplæring.) Koden introduserer en av de hjelpene du leser om tidligere i opplæringen.

1. Åpne din default.cshtml fil.
2. Legg til markering på siden slik at den ser ut som følgende eksempel:

           
   Hei verdens side
    
   Hei Verden!
    
   Klokken er @ DateTime.Now
     

   Siden inneholder vanlig HTML-markering, med ett tillegg: @ tegnmerker ASP.NET programkode.

3. Lagre siden og kjør den i nettleseren. Du ser nå gjeldende dato og klokkeslett på siden.

   Den enkle linjen med kode du har lagt til, gjør alt arbeidet med å bestemme gjeldende tid på serveren, formatere den for visning og sende den til nettleseren. (Du kan spesifisere formateringsalternativer, dette er bare standard.)

Anta at du vil gjøre noe mer komplekst, for eksempel å vise en rulleliste over tweets fra en Twitter-bruker du velger. Du kan bruke en hjelper til det; Som nevnt tidligere er en hjelper en komponent som forenkler vanlige oppgaver. I dette tilfellet vil alt arbeidet du ellers måtte hente og vise en Twitter-feed.

1. Opprett en ny CSHTML-fil og gi den navnet TwitterFeed.cshtml.
2. På siden, erstatt eksisterende kode med følgende kode:

           
   Twitter Feed
    
    
    Skriv inn navnet på et annet Twitter-feed som skal vises:       
    
    @if (Forespørsel ["TwitterUser"]. IsEmpty ()) @ Twitter.Search ("microsoft") ellers @ Twitter.Profile (Be om ["TwitterUser"]) 
    
     

   Denne HTML-en oppretter et skjema som viser en tekstboks for å skrive inn et brukernavn, pluss a Sende inn knapp. Disse er mellom det første settet av

   tags.

   Mellom det andre settet av

   koder er det noen kode. (Som du så tidligere, for å markere koden på ASP.NET websider, bruker du @ tegn.) Første gang denne siden vises, eller hvis brukeren klikker Sende inn men la tekstboksen være tomt, det betingede uttrykket Be [ "TwitterUser"]. IsEmpty vil være sant. I så fall viser siden en Twitter-feed som søker etter begrepet "microsoft". Ellers viser siden en Twitter-feed for hvilket brukernavn du angav i tekstboksen.

3. Kjør siden i nettleseren. Twitter-feed viser tweets med "microsoft" i dem.
4. Skriv inn et Twitter brukernavn og klikk deretter Sende inn. Den nye strømmen vises. (Hvis du oppgir et ikke-eksisterende navn, vises en Twitter-feed fremdeles, den er bare tom.)

   Dette eksemplet har vist deg litt om hvordan du kan bruke WebMatrix og hvordan du kan programmere dynamiske websider ved hjelp av enkel ASP.NET-kode ved hjelp av Razor-syntaks. Den neste opplæringen undersøker koden i dybden. De etterfølgende opplæringsprogrammene viser deg hvordan du bruker kode for mange forskjellige typer nettoppgaver.

Programmering ASP.NET Razor Sider i Visual Studio

I tillegg til å bruke WebMatrix til å programmere ASP.NET Razor-sider, kan du også bruke Visual Studio 2010, enten en av fullversjonene eller den gratis Visual Web Developer Express-utgaven. Hvis du bruker Visual Studio eller Visual Web Developer til å redigere ASP.NET Razor-sider, får du to programmeringsverktøy som kan forbedre produktiviteten din - IntelliSense og debugger. IntelliSense virker i redaktøren ved å vise kontekstrettede valg. For eksempel, når du skriver inn et HTML-element, viser IntelliSense deg en liste over attributter som elementet kan ha, og det kan til og med vise deg hvilke verdier du kan angi disse attributter for. IntelliSense fungerer for HTML, JavaScript og C # og Visual Basic (programmeringsspråkene du bruker til ASP.NET Razor-sider.)

Feilsøkingsprogrammet lar deg stoppe et program mens det kjører. Du kan da undersøke ting som verdiene av variabler, og du kan gå linje for linje gjennom programmet for å se hvordan det går.

For å jobbe med ASP.NET Razor Pages i Visual Studio, trenger du følgende programvare installert på datamaskinen:

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

Merkяя Du kan installere både Visual Web Developer 2010 Express og ASP.NET MVC 3 ved hjelp av Web Platform Installer.

Hvis du har installert Visual Studio, kan du starte nettstedet i Visual Studio når du redigerer et nettsted i WebMatrix for å utnytte IntelliSense og debuggeren..

1. Åpne siden du opprettet i denne opplæringen, og klikk deretter på filer arbeidsområde.
2. I båndet, klikk på Visual Studio Launch knapp.

   Etter at nettstedet åpnet i Visual Studio, kan du se nettstedstrukturen i Visual Studio i Solution Explorer ruten. Følgende illustrasjon viser nettsiden åpnet i Visual Web Developer 2010 Express:

   

   Hvis du vil ha en oversikt over hvordan du bruker IntelliSense og debuggeren med ASP.NET Razor-sider i Visual Studio, kan du se vedlegget ASP.NET Web Pages Visual Studio.

Opprette og teste ASP.NET-sider ved hjelp av din egen tekstredigerer

Du trenger ikke å bruke WebMatrix-editoren til å opprette og teste en ASP.NET-webside. For å opprette siden kan du bruke tekstredigering, inkludert Notisblokk. Bare vær sikker på å lagre sider ved hjelp av .cshtml filnavn utvidelse. (Eller .vbhtml hvis du vil bruke Visual Basic)

Den enkleste måten å teste på .cshtml sider er å starte webserveren (IIS Express) ved hjelp av WebMatrix Løpe knapp. Hvis du ikke vil bruke WebMatrix-verktøyet, kan du imidlertid kjøre webserveren fra kommandolinjen og knytte den til et bestemt portnummer. Du angir deretter den porten når du ber om det .cshtml filer i nettleseren din.

I Windows åpner du en kommandoprompt med administratorrettigheter og bytter til følgende mappe:

C: \ Programmer \ IIS Express

For 64-biters systemer, bruk denne mappen:

C: \ Programfiler (x86) \ IIS Express

Skriv inn følgende kommando, ved hjelp av den faktiske banen til nettstedet ditt:

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

Det spiller ingen rolle hvilket portnummer du bruker, så lenge porten ikke allerede er reservert av en annen prosess. (Portnummer over 1024 er vanligvis gratis.)

For banen verdien, bruk banen til nettstedet der .cshtml filer er det du vil teste.

Etter at denne kommandoen kjører, kan du åpne en nettleser og bla til en .cshtml fil, slik:

http: // localhost: 35896 / default.cshtml

For hjelp med kommandolinjene i IIS Express, skriv inn iisexpress.exe /? på kommandolinjen.