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.

måndag 26 mars 2012

Bättre intro till WebMatrix

Det finns en betydligt lättare intro till WebMatrix än Joe StagnersWeb Development 101 using WebMatrix verkar vara helt ny och innehåller tyvärr några fel som förvirrar. Det är konstigt att inte Microsoft kontrollerar sina exempel.

När jag testat exemplet har jag ersatt filmtitlar med webbar. Det ger mig möjlighet att spara referenser till webbar om WebMatrix och jag får samtidigt en något djupare förståelse av exemplet.

Part 1, Getting Started with WebMatrix
Här är det enda felet länkarna i listan Related Categories.

Part 2, Create your first Web Page
Här står det "Choose the HTML file type, and call it default.html and press OK. ". Det är fel. Exemplet förutsätter att man väljer en cshtml-fil. Mycket enkel förklaring som även den med begränsade kunskaper i html bör kunna följa.

Här är det inga fel vad jag sett, men man nämner inte heller det utmärkta stöd som WebMatrix ger vid inskrivningen av CSS. Det kan bero på att denna funktion nog kom med version 2  av programmet och exemplet först gjorts för version 1.

Part 4, Using Layout
Här står det "Up to now you’ve been creating HTML pages that use the .htm or .html extension", men det är fel. Den extension som används är cshtml.

I detta avsnitt introduceras Razor. Först tas den inledande och avslutande delen av koden från Part 4 ("movies.cshtml") bort och läggs i egna filer. Sedan läggs kommandot @RenderPage("PageHeader.cshtml") och @RenderPage("PageFooter.cshtml") till den återstående koden. Det som händer är att när movies.cshtml exeveras är att RenderPage först inkluderar koden från "PageHeader.cshtml" resp "PageFooter.cshtml". Det är precis som include i gamla ASP.

Ett bättre sätt att administrera kod som är gemensam för flera sidor är skapa en layoutfil, i exemplet kallad "_siteLayout.cshtml". Starttecknet "_" gör att filen inte kan accessas utifrån utan endast från andra filer på siten.

Den sidspecifika koden anropar layoutfilen med konstruktion
@{
Layout = "~/_siteLayout.cshtml";
}
först i koden och anger med @RenderBody() var i layoutfilen den sidspecifikat koden ska placeras. Det känns lika baklänges, men man vänjer sig kanske.

Ett alternativt sätt att anropa layoutfilen är att exkludera den från den sidspecifika filen och i stället placera den i filen "_PageStart.cshtml", som alltid exekveras först om den finns i systemet.

Part 5, Using Data
Det är mycket enkelt att skapa tabeller. Synd dock att exemplet inte stämmer med WebMatrix 2. Det skapar dock inga större problem. Det slarvfel jag gjorde ledde dock till helt missvisande felmeddelanden. Lösningen var att ta bort columns och regstrera dem igen. Ändra funkade inte.

Databasen läses med
@{
var db= Database.Open("Movies");
var sqlQ = "SELECT * FROM Favorites";
var data = db.Query(sqlQ);
}
Det ska bli intressant att se vilka andra metoder än Query som objektet Databas har.

För att läsa respektive post använder exemplet
@foreach(var row in data)
Detta Razorkommande beskrivs inte närmare. "var row" är uppenbarligen en deklaration, men hur fungerar "in data"?

Part 6, Creating an Add Data page

För att lägga till data används
@{
var MovieName="";
var MovieGenre="";
var MovieYear="";
if(IsPost){
MovieName=Request["formName"];
MovieGenre=Request["formGenre"];
MovieYear=Request["formYear"];
var SQLINSERT = "INSERT INTO Favorites (Name, Genre, ReleaseYear) VALUES (@0, @1, @2)";
var db = Database.Open("Movies");
db.Execute(SQLINSERT, MovieName, MovieGenre, MovieYear);
}
}
" VALUES (@0, @1, @2)" är nollbaserade index till variablerna i Execute-kommandot.

Part 7, Creating an Edit Data Page

Här hämtas en post med
var id=Request["id"];
var SQLSELECT = "SELECT * FROM Favorites where ID=@0";
var db = Database.Open("Movies");
var Movie = db.QuerySingle(SQLSELECT,id);
"@0" pekar på id i QuerySingle.

I form används koden
<form action="" method="post">
<p>Name:<input type="text" name="formName" value="@MovieName" /></p>
Även här används Razorkommando som motsvarar <%=MovieName%> i ASP.

Uppdateringen sker med
var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";
db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);
Om man kör detta program utan parameter kommer felmeddelandet
Serverfel i tillämpningsprogrammet /.
Det går inte att utföra bindning under körning för en null-referens 
Inte särskilt upplysande.

Part 8, Creating a Delete Data page

Här finns inget nytt som är WebMatrix-specifikt.

Part 9, Deploying your site

Detta är ett intressant avsnitt som jag dock inte fördjupat mig in än, då jag inte valt webbhotell. Det ser dock väldigt enkelt ut. Det finns ett 40-tal hotell som Microsoft certifierat, erbjuder shared hosting och ASP.net 4.5 Beta vilket bör inkludera WebMatrix 2. Men inget av dem finns i Sverige. Men det kommer...

torsdag 22 mars 2012

Utveckla med WebMatrix

Det är klart att det går att hitta webbhotell med WebMatrix 2.0-tjänst. Strategin blir därför att skapa en mindre applikation hemma och sedan hitta ett bra webbhotell.

Startpunkten är Getting Started och en filmintroduktion av Joe Stagner. Hans snabbpratande har gjort tidigare filmer nästan omöjliga att förstå, men här är takten något långsammare. Han förklarar komponenterna vid utveckling med WebMatrix och försöker - mindre framgångsrikt - förklara skillnaderna mellan WebMatrix, MVC (för mer komplicerade system), Webpages ("bra om formorienterat").

När Stagner går igång med demon inser jag att den gäller de förra versionen, så hans bilder stämmer inte med WebMatrix 2.0. Samma problem som vanligt. Men som introduktion till WebMatrix fungerar hans intro.

En skillnad mellan asp.net på det gamla sättet och i Webmatrix är hantering a Masterpages. I asp.net anges lägger man in placeholders i en masterpage och et direktiv i asp.net-sidan som kopplar till mastepage samt kod för placeholders i masterpage.

I WebMatrix skriver man

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Home Page";
}
i asp-sidan. Och sedan skriver man
@RenderBody()
i _SiteLayout där asp-sidan kod ska in. _SiteLayout motsvarar alltså ungefär masterpage.

En nyhet som har kommit samtidigt med Webmatrix är Razor.



söndag 18 mars 2012

Test av WebMatrix 2.0

Jag har nu installerat nya WebMatrix version 2 Beta. Det finns ett bra exempel Starting Web Development with Microsoft WebMatrix på MSDN.

WebMatrix kan installeras så att applikationerna använder det vanliga filsystemet i stället för MSSQL eller MySQL. Det tänkar jag pröva. Den stora frågan är givetvis om det kommer att gå att flytta systemet till webhotellet där mina "produktionssystem" håller till.

Jag har kopierat ned exempelfilen Soccer.zip, startat WebMatrix och valt mallen Starter Site. Öppnar sedan Default.cshtml och kör. Det fungerar utan problem!

Men sedan när jag kör igenom exemplet, så visar det sig att exemplet inte stämmer med den version av Soccer som jag laddat hem. Uppenbarligen har mallen Starter Site ändras åtskilligt sedan exemplet gjordes. Det gör genomgången av exemplet enbart förvirrande.

Jag startade därför om med en tom mall och koden Hello World. Det exekverade bra lokalt, men när jag ftp-at upp det till webbhotellet Space2u som kommer meddelandet att filnamnet default.cshtml inte är känt.


Cshtml är suffix för kod som innehåller Razor-kommandon, som ofta används i aktuell demokod från Microsoft och andra. Razor kräver Framework 4.5 samt programmet WebDeply. Inget av detta finns på Space2u, som satsar med på Linux än på Windows - i likhet med flertalet svenska webbhotell.

Teoretiskt ska jag kunna skapa en bin-mapp själv och ladda upp de dller som WebMatrix behöver. Men det kräver mer kunskaper än jag besitter. Om jag hade full kontroll över servern skulle jag gjort på följande sätt enligt Ted & Gustaf.

Så lösningen får bli att hitta ett webbhotell utomlands med rätt programvara, tjänster och avgifter. Microsoft hjälper till med det med en lista över sådana webbhotell.

Ett tänkbart alternativ är Seekdotnet. 6 mån med 10 GB, MS SQL 2008 kostar $5,50/månad. För $11 får man 100 GB. Space2u kostar 190 SEK/mån ($28) med 2 GB och utan den senaste programvaran.

Några Microsoft-länkar om WebMatrix
Introducing Microsoft® WebMatrix
Create, customize and publish your website
Top features you'll love
Web Development 101 using WebMatrix
Create an ASP.NET website from scratch
How to publish a web application using WebMatrix



onsdag 14 mars 2012

Umbraco

Jag installerar Umbraco mest för att med det testa den nya versionen av Visual Studio.  Har just fått ett trevligt meddelande:

Thanks for downloading the Umbraco CMS installer.

You are just a few minutes away from getting up and running. The installer will take you through the following process:-

1.Set up a database. There are a number of options available such as MS SQL Server and MS SQL Express Edition or you may wish to use the Microsoft SQL CE 4 database. You may need to consult your web host or system administrator.
2.You can then choose to install one of our great starter kits and a skin.
3.But whatever you do, don't forget to become part of the Umbraco community, one of the friendliest developer communities you will find. It’s what makes Umbraco such a great product and so much fun to use.


Jag startar WebMatrix, väljer my sites och där är Umbraco CNS 5. Klickar på Start here och - det händer ingenting. Umbraco väntar på localhost.

Får sedan samma meddelandet
Welcome to the Umbraco installation
Thanks for downloading the Umbraco CMS installer.

You are just a few minutes away from getting up and running. The installer will take you through the following process:-
1.Set up a database. There are a number of options available such as MS SQL Server and MS SQL Express Edition or you may wish to use the Microsoft SQL CE 4 database. You may need to consult your web host or system administrator.
2.You can then choose to install one of our great starter kits and a skin.
3.But whatever you do, don't forget to become part of the Umbraco community, one of the friendliest developer communities you will find. It’s what makes Umbraco such a great product and so much fun to use.
Enjoy!
Lets get started!


Klickar och - "Den här webbsidan är inte tillgänglig". Det vore ju bra att ha en web host or system administrator att fråga, men det är ju jag.

Går till http://umbraco.com. Inget uppslag. Installera om? Nej, klickar på files. Väljer html. Får en mall som kompletteras med Hello. Klickar på run. Och får meddelandet "It looks like Umbraco isn't installed yet - click here to launch the install wizard." Samma igen, hittar inte localhost.

Kommer igång när jag stänger Visual Studio! Men bara nytt välkommen. Installerar om från
http://www.microsoft.com/web/gallery/install.aspx?appid=Umbraco. Får besked om att installation är ok, startar den. Men ingen kontakt med Localhost.

Ger upp t.v.

Visual Studio 11 Express

Håller på med att få igång den nya versionen av Visual Studio, nu med nummer 11. Efter flera timmars nedladdning och installation kom meddelandet om att installationen misslyckats.



Vad göra? Jag går tillbaka till nedladdningssidan. Men den sidan visas inte! Det verkar som om att det är problem att installera systemet

Det verkar dock som om att Webmatrix med Umbraco CMS har laddats ned. Den kör nu install. Samtidigt installeras ny version av Firefox. Och nu kommer även nedladdningen av Visual Studio 11 Express Beta igång.

Så är Firefox klar. Och nu gick även VS 11 igenom:



måndag 12 mars 2012

HTML5 tester

Tittar lite på HTML5 igen. Har köpt en bok med detta namn, laddat hem Notepad++ och testa några mycket enkla program mot validator.w3.org. Noterar problem med ÅÄÖ. Det visar sig bero på meta-kommandot charset utf-8 som används i boken. Funkar om jag tar bort det. Ska jag använda något annat charset?

(Blir förbannad på Google igen. När jag sparar detta inlägg så föreslås klick på offentlig. Men det betyder inte bara "offentlig" utan att inlägget också visas för alla personer i mina cirklar. Jag vet att flertalet av dem är helt ointresserade av html5 och vill inte alls störa dem med det. Varför kan jag inte få välja att bara göra inlägget tillgängligt på nätet?)

Boken tipsar på caniuse.com som visar vilka kommandon som olika webbläsare klarar av. Bra då alla läsare inte klarar alla html5-kommandon. Ett annat kul tips är gs.statcounter.com som visar olika webbläsares popularitet. Diagrammet nedan visar utvecklingen i Sverige. (Jag vet inte varför bildens kvalitet blir så dålig.)

Nästa nedladdning är javascriptbiblioteket modernizr som innehåller kod som ersätter html5-kommandon när webbläsaren inte stöder kommandot. Nu laddar jag ned mer lättlästa och långsamma versionen. Den ska sedan bytas ut mot en snabbare variant.

Här är första testen: