onsdag 28 mars 2012

Bra exempel med WebMatrix och Razor

Jag har haft lite svårt att komma underfund med Razor men har nu hittat två hjälpredor. Den ena är Pluralsight genomgång av några exempel lite över nybörjarnivån. Den andra är Microsofts dokumentation av Razor som det faktiskt tog mig att tag att hitta. Här ska jag gå igenom något av vad Pluralsight säger med hjälp av MSs dokumentation.

Exempel 1

Rad 1-3 är en Rezor-sats som innehåller c#.
Rad 4-11 är standard HTML
Rad 12 @foreach är ett Razoruttryck som fungerar på samma sätt som C#. Razor-satsen slutar på rad 14
Rad 13 har en Resor inline uttryck. Obs ska inte ha ";". Motsvara asp.nets uttryck <%=xxx%>.
Rad 15-17 standard HTML.







Rad 11: Här börjar en razor multisttement. IsPost är true när websidan innehåller information som sänts till servern med ett formulär.
Rad 12-13: WebMail är en class (kallas också för 'helper') dvs är ett object i .Net Framework.
Rad 19 är intressant. <text> ser ut som en html-tag men är faktiskt ett Razor-ord, som ger det möjligt att skriva vanlig text och htmltaggar inne i en Razor-sats.
Rad 20-26 är normal c#
Rad 27-29 är normal html
Rad 30-32 är Razor, samma som i ex 1 ovan.
Rad 33-40 är htlm-taggar utan 39 som avsutar en Razor-sats.


Exempel 3
Layoutfil



I WebMaster kan kod som används i flera sidor placeras i en layoutfil som kopplas till varje sidfil. Bilden ovan är ett exempel på en sådan layoutfil. Den består av standard HTML med två undantag.
Rad 22 innehåller innehåller @RenderBody(). Detta uttryck ersätts av koden i den sidan som anropar layoutsidan.
Rad 29 innehåller @RenderSection, se nedan. False-parametern betyder att RenderSection inte ger något felmeddelande om sådan sektion saknas i anropande sida.
Rad 28 innehåller Razor-satsen if(IsSectionDefined... Den gör det möjligt att i layouten agera på om det finns en Section i sidan eller ej, som t.ex. i fallet ovan med att skriva "Default content".

Exempel 4



Det mest intressanta i exemplet ovan är givevis att htmlkodens inledning och avslutning har tagits bort. Det finns numera i layoutfilen Layout2.cshtml. Sidan ovan innehåller en @section som skrivs ut styrd av layoutfilen.

Inga kommentarer:

Skicka en kommentar