Internet Explorer 9 Beta 1 introduces some new APIs to make it possible to integrate with the jump lists and icons on the taskbar. To make it easier to use them, I created an even simpler API.

To test the API you can browse (with Internet Explorer 9) to this page:
http://bit.ly/dhQpEB

You will then see this:

ie9-1

The API allows you to see whether the browser supports the API or not. So far, the only browser that supports them is Internet Explorer 9. If more browsers add support for it, it will be easy to integrate it as well.

The first thing we need to do before using the functions is to pin the site at the taskbar. To do it, just drag the tab or favicon to the taskbar and release it there. You will then get an icon with custom options on the jump list:

ie9-2

To have custom items as default, I added these meta tags:

<meta name="msapplication-task" content="name=Twitter;action-uri=http://twitter.com/vimpyboy;icon-uri=/ie9/content/twitter.ico">
<meta name="msapplication-task" content="name=Blog;action-uri=http://weblogs.asp.net/mikaelsoderstrom;icon-uri=/ie9/content/blog.ico">

It´s really simple to do and we will also get customized buttons for back and forward automatically based on the favicon:

ie9-3

So what can we do with the API? I have added support for most of the new features in Internet Explorer 9.

Pin to Start Menu

You can ask the user to add a shortcut to the Start Menu in Windows using:

windowsIntegration.pinToStartMenu();

This will display:

ie9-4

Add Jump list category with items

If you want a more dynamic jump list with your own items, you can use something like:

var items = [{
     'name': 'MSDN',
     'url': 'http://www.msdn.com',
     'icon': 'Content/twitter.ico'
}, {
     'name': 'Internet Explorer 9',
     'url': 'http://msdn.com/ie',
     'icon': 'Content/blog.ico'
}];
 
windowsIntegration.addJumpListCategory('Links', items);

This will add a new category, “Links”, with the custom items specified:

ie9-5

To remove the custom category with its items, you can use:

windowsIntegration.clearJumpList();

Flash button

If you want to alert the user, you can make the button flash, if it´s in the background. To do it, use:

windowsIntegration.flash();

Add overlay image

Another way to alert the user is to use an overlay image. This function adds an overlay:

windowsIntegration.addOverlay('Content/Refresh.ico', 'Text!');

And this removes it:

windowsIntegration.clearOverlay();

The button looks like this when we add an overlay:

ie9-6

Use it on your own site

If you want to use this on your own site, please download the JavaScript file that makes this easier. You can find the files for this demo here:

http://bit.ly/ar0hLh

And if you want to try it out, look here:

http://bit.ly/dhQpEB

Playing games on the internet using Silverlight or Flash is getting really popular, which you can see if you are using Facebook (Farmville, anyone?). To play these games you need to install a plugin to your browser, or you won’t be able to play them. On some devices you can´t install plugins like these, which make it impossible to play them. Instead you will have to create separate applications for each device, but then you will have to maintain several versions of your application.

To get it to work in a smooth way on computers, phones and other devices you can use Canvas. Canvas is part of the HTML5 specification, and makes it possible to draw objects on the screen using JavaScript APIs.

In my examples I use Internet Explorer 9 which supports hardware acceleration for Canvas, but you should be able to use the same code on all modern browsers.

Create a canvas object

To be able to use Canvas on the page, we will need to use the new Canvas element in HTML5.

I have created a template which I will use:

<!DOCTYPE HTML>
<html>
<head>
    <title>Canvas</title>
    <script>
 
    </script>
    <style>
        body
        {
            background-color: #000;
            text-align: center;
        }
        
        div
        {
            margin: 0px auto;
            width: 400px;
        }
        
        canvas
        {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="canvas" width="300" height="300">
            Your browser does not support Canvas.
        </canvas>
    </div>
</body>
</html>

I use the new HTML5 doctype to tell the browser that I´m using HTML5 here. I also add a Canvas element which is 300x300 pixels. If we open the site in a browser without Canvas support, the text will be displayed, and if we open it in Internet Explorer 9, we will get this:

canvas0

The white area is our canvas where we will start drawing objects. First of all, I would like to set the background to a linear gradient which shows red and white.

To do this, I add the following code between the script elements:

function init() {
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');
 
    var grad = ctx.createLinearGradient(0, 0, 300, 300);
    grad.addColorStop(0, '#FFFFFF');
    grad.addColorStop(0.5, '#FF0000');
    grad.addColorStop(1, '#FFFFFF');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 300, 300);
}

If we take a look at the page again, we will see this:

canvas1

When you want to draw on a canvas you will first have to get the canvas object. I use document.getElementById here, but you could use jQuery selectors as well to get the element. The next step is to create a 2d context, which is the only available context in HTML5. The object we get here is what we will use to draw on the canvas.

Now when we have the canvas element and have got the 2d context, we can start drawing on it. What we want is a gradient that starts on the upper left (0,0) and stops at the lower right (300,300) in the current LinearGradient object.

Then we set the colors we want. It should start with white, be red in the middle, and then stop as white again. Notice that 0 is the start and 1 is the end, which makes 0.5 the middle.

At last we will fill the canvas element with the gradient we just created. To do this, we sett fillStyle to “grad” which is our object, and then call fillRect() where we set the start and stop for the drawing.

Now we will get a gradient background!

Draw patterns

With only a background we will probably don´t get far, what we need to do is to add other objects on the canvas.

The next step here is to draw a transparent square with shadows on top of the background.

What we will add after the previous code is:

ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';
ctx.fillRect(50, 50, 200, 200);

We are still using the same object as before, but continue to draw on the canvas after we have set the background.

First we will have to set the shadow on the object we want to draw. I have set offset to 3 for both X and Y, which gives us a 3px shadow. I have also set shadowBlur to 5, which settles how blurred the shadow should be (a higher number makes it blurrier). I also set the color on the shadow to black, but the opacity to 0.7 to make it more transparent.

When we have set the properties for the shadow we will set the color for the object to draw. We will use RGBA here too since we wants the square to be transparent. I set the color to blue and opacity to 0.3.

The last thing to do is to draw the object on the canvas. It should be positioned 50px from the top and the left, and should be 200x200px.

If we look at the site again we will see this:

canvas2

With a little help from our beloved friend JavaScript, we have done what we earlier should have had to use a real image for. Since it´s JavaScript we can make this process much more dynamic.

Animate the square

To make it do something, we can animate the canvas. Since there is not state for the objects in the canvas, we will have to keep track of that ourselves. What we will do here is a very simple animation where the square will move between two different positions every 500 millisecond.

To make it easier to animate the canvas, I will move the code for drawing the object to a separate function. I will call this function when the page is first loaded, and then every 500 millisecond. The code needed to do this is:

var position = 75;
 
function init3() {
    drawImage();
    setInterval(function () { drawImage(); }, 500);
}
 
function drawImage() {
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');
 
    var grad = ctx.createLinearGradient(0, 0, 300, 300);
    grad.addColorStop(0, '#FFFFFF');
    grad.addColorStop(0.5, '#FF0000');
    grad.addColorStop(1, '#FFFFFF');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 300, 300);
 
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    ctx.shadowBlur = 5;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
    ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';
    ctx.fillRect(position, position, 200, 200);
 
    position = (position == 25) ? 75 : 25;
}

We are using pure JavaScript to draw an animated object on the screen using only web standards. This is probably not the most advanced example you will ever see, but there are far more advanced games out there. A good source for Canvas based games is http://www.canvasdemos.com where you can find a lot of games and programs that won´t need a third party plugin.

Since Internet Explorer 9 have hardware acceleration for Canvas, it is going to be possible to write really advanced games and applications which will use the graphic card to render your canvas, and all this is possible using only HTML5 and JavaScript!

HTML5 is the next version of the HTML standard and is developed by W3C and WHATWG. After HTML 4.01 was released W3C started to work with XHTML 1.0, which have the same elements as HTML 4.01 but gives us a XML compatible syntax. They continued with XHTML 2.0, which should have many new elements, and wouldn´t be compatible with XHTML 1.x at all. Meanwhile a new group called WHATWG (Web Hypertext Technology Working Group) started to work on a new separate standard called Web Applications 1.0, which should be a natural next step of HTML 4.01.

Since XHTML 2.0 received a lot of critics because of the complexity and lack of compatibility with XHTML 1.x, W3C decided to stop working on that and instead cooperate with WHATWG on Web Applictions 1.0, which became HTML 5.

Same same, but different

Many advocates of XHTML thinks that HTML will again make the web more incompatible because of the possibility to write sloppy HTML since you don´t need to have apostrophes around attribute values, and other things that is required according to the SGML standard. Because of this, you will be able to write HTML5 in two different ways, with HTML syntax and with XML syntax. The latter requires you to send the document with the correct MIME type (application/xhtml+xml), which isn´t supported by Internet Explorer 8 and earlier versions (Internet Explorer 9 supports this). If you use the HTML syntax, the pages should be delivered as text/html like earlier.

Why HTML5?

HTML 4 has been used by developers since the 90’s, and it became a standard in 1999. If we want to have more advanced content, we can use Silverlight, Flash and other plugins to do what we want. So why should we care about HTML5?

We need HTML5 since it´s a modern standard which correlates to how we created modern web sites, and makes it possible to view those pages on all platforms. If you are dependent on a plugin, you can´t be sure it will work on your phone for example. By using HTML5 we can use the same web site on all platforms to view videos, play games, listen to music, create advanced web based applications etc. That is why we need HTML5 now.

News in HTML5

There are a lot of new features in HTML5 that makes it possible to write modern standard compliant sites. HTML 4.01 became a standard in 1999 when almost everyone had slow modems. What have happened since then is that we have got much faster connections, which makes it possible to watch videos, plays music and other things on the web.

Some of my favorite new features in HTML5 are:

New HTML elements

The specification contains some new elements such as section, nav, article, aside, hgroup, footer etc. They will make it easier to group the content instead of using div elements with corresponding id´s.

Video & audio

Thanks to the new video and audio elements, we will be able to play video and audio on the web site without using third party plugins. So far, there are no specific formats in the specification, so it´s up to the browser vendors to choose what to support.

Canvas

With canvas, it´s possible to draw objects on the browser without the need of images (you can use images in canvas though). Thanks to the hardware acceleration in Internet Explorer 9, we can create games and applications using canvas. If you want to use audio in your game you could use the audio element.

Inline SVG

SVG have been a standard for a while, but with HTML5 we will be able to use inline SVG in our documents instead of using separate SVG files. Like canvas, we can draw images in the browser, but the difference is that canvas uses JavaScript, and SVG is XML based and used to draw vector images.

New input types in forms

When we create forms on web sites today, we often use JavaScript with strange regular expressions to validate the input. If you require a date you might add a calendar using JavaScript. In HTML 5 there will be new types of input elements like date, datetime, email, phonenumber etc, which makes it possible for the browser to validate the input. In that way you won´t need to care about it (except for the validation on the server side of course).

New JavaScript APIs

Except for the HTML of HTML5, there are some related specifications that are often included. These are not part of the HTML5 standard per se, but separate specifications. These are Selectors, Web Storage, Web Sockets, Web Workers, Geolocation, Offline Web Applications and many others. Even Internet Explorer 8 had support for both Selectors and Web Storage, which means many users can take advantage of these right away.

The future of HTML5

Since HTML5 is still under development, many developers wants to know when it will become a standard, so… When? The specification is estimated to be a recommendation in 2022. Yepp, 2022. It may sound scary, but don´t forget that not even CSS 2.1 is a recommendation yet. The Candidate Recommendation (feature complete, and only really important changes will be made) of HTML5 is supposed to be released in 2012. If a Candidate Recommendation is going to be a Recommendation, at least two full implementations are needed.

Get started today

To prepare for HTML5 you can download Internet Explorer 9 Beta 1, which has support for many new HTML5 features, such as video, audio, inline SVG and Canvas. It also supports many new features in the coming CSS 3 specification.

Internet Explorer 9 Beta 1 can be downloaded here:
http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

Att spela spel på internet genom Silverlight- eller Flash-baserade gränssnitt blir alltmer populärt, vilket man kan se om man är flitig användare av Facebook. Dessa spel kräver att man har rätt komponent installerad för att kunna köra dem över huvud taget. På vissa enheter som till exempel mobiltelefoner händer det ofta att man inte kan installera dessa plugins, och då måste man lösa det på ett annat sätt. Det skulle t.ex. kunna lösas genom att man skriver ett separat program som påminner om det man visade på sidan, men även det kan ge problem då man har flera olika applikationer att underhålla.

För att smidigt få det att fungera på både datorer, mobiltelefoner och andra enheter så skulle man kunna använda Canvas. Canvas är en del av HTML5 och gör det möjligt att rita ut objekt direkt på skärmen med hjälp av nya JavaScript-API:er.

I exemplen så använder jag Internet Explorer 9 som använder hårdvaruaccelerering för att rendera objekten, men alla webbläsare med stöd för Canvas bör klara av detta.

Skapa ett Canvas-objekt

För att få in Canvas på hemsidan så måste vi använda oss utav det nya Canvas-elementet i HTML5.

Jag har en grundsida som ser ut så här:

<!DOCTYPE HTML>
<html>
<head>
    <title>Canvas</title>
    <script>
 
    </script>
    <style>
        body
        {
            background-color: #000;
            text-align: center;
        }
        
        div
        {
            margin: 0px auto;
            width: 400px;
        }
        
        canvas
        {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="canvas" width="300" height="300">
            Din webbläsare har inte stöd för canvas.
        </canvas>
    </div>
</body>
</html>

Här använder jag den nya doctypen för HTML5 för att visa för webbläsaren att det är det jag vill använda. Sedan har jag lagt in ett Canvas-element som är 300x300 pixlar stort. Om vi öppnar upp det i en webbläsare utan stöd för Canvas så får vi upp texten innanför start- och sluttaggarna.

Om vi öppnar upp det här nu så får vi:

canvas0

Den vita ytan är vår canvas där vi kan börja rita med hjälp av JavaScript. Till att börja med så vill jag få dit en bakgrund som ska skifta mellan vitt och rött.

Jag lägger nu till det här mellan script-elementen:

function init() {
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');
 
    var grad = ctx.createLinearGradient(0, 0, 300, 300);
    grad.addColorStop(0, '#FFFFFF');
    grad.addColorStop(0.5, '#FF0000');
    grad.addColorStop(1, '#FFFFFF');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 300, 300);
}

Ser vi på sidan nu så ser vi att vi har fått det här:

canvas1

När man ska rita på en canvas-yta så måste man först få tag i canvas-elementet. Här använder jag document.getElementById, men det går lika bra att använda jQuery för att få rätt element. Nästa steg är att skapa upp en 2d-context, vilket är den enda som finns i HTML5. Det objektet vi får där är det vi ska använda för att rita ut de olika delarna på canvasen.

Nu när vi har ett canvas-element och fått tag i dess 2d-context så kan vi börja rita på den. Det vi vill ha är en gradient som börjar skifta färg längst upp till vänster (0,0) och slutar längst ned till höger (300, 300) i det aktuella LinearGradient-objektet.

Vi sätter sedan färgerna vi vill ha. I början ska det vara vitt, i mitten ska det ha blivit rött, och mot slutet ska det ha gått tillbaka till vitt. Värt att notera är att 0 är början och 1 är slutet.

Till sist så vill vi fylla vårt canvas-element med den gradient vi just skapade. För att göra det så sätter vi fillStyle till ”grad” som är vårt objekt, och anropar sedan fillRect() där vi sätter att vi ska börja rita längst upp till vänster och sluta längst ned till höger.

Det som händer nu är att vi får en bakgrund med skiftande färg direkt på sidan.

Rita ut mönster

Med bara en bakgrundsbild kommer vi dock inte långt, utan på denna kanske vi vill lägga till objekt. Det vi ska göra härnäst är att rita ut en genomskinlig kvadrat med skugga bakom mitt på ytan, och det gör vi på nästan samma sätt som vi ritade ut bakgrunden.

Det vi behöver lägga till efter den tidigare koden är det här:

ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';
ctx.fillRect(50, 50, 200, 200);

Vi använder fortfarande det objektet vi hämtade tidigare, men fortsätter att rita vidare på canvasen efter att ha ritat ut bakgrunden.

Först och främst så vill vi sätta skugga på det objektet vi vill rita ut. Jag har satt Offset till 3 på både X och Y vilket ger en 3 px stor skugga. Jag har sedan satt shadowBlur till 5, vilket avgör hur suddigt det ska vara (ju högre siffra desto suddigare skugga). Jag sätter därefter färgen på skuggan till svart, men opacity till 0,7 för att få skuggan lite svagare.

När vi har satt egenskaper för skuggan så ska vi sätta färgen på själva objektet som ska ritas ut. Här använder vi återigen RGBA för att kunna sätta opacitet. Jag väljer att sätta färgen till blå, men med 0.3 i opacitet.

Det sista vi gör är att rita ut objektet på canvasen. Det skall hamna 50px från toppen och vänster, samt vara 200x200px stort.

Kikar vi på sidan nu så kan vi se att vi har fått det här:

canvas2

Med lite JavaScript har vi nu gjort vad som tidigare krävde att vi lade in en bild. Då det är JavaScript så kan vi dessutom göra det här väldigt dynamiskt.

Animera rutan

För att få lite liv i canvasen så kan vi animera innehållet. Då det inte finns någon state för det som ritas ut så får vi hålla reda på det själv. Det vi ska göra här är en väldigt enkel animering där rutan ska flyttas fram och tillbaka mellan två olika positioner med 500 millisekunders mellanrum.

För att göra det enklare att animera så flyttar jag ut koden för att rita ut objektet till en separat funktion. Jag anropar sedan den funktionen när sidan laddas för att få en bild direkt, och anropar den sedan igen var 500:e millisekund. Koden för det blir det här:

var position = 75;
 
function init3() {
    drawImage();
    setInterval(function () { drawImage(); }, 500);
}
 
function drawImage() {
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');
 
    var grad = ctx.createLinearGradient(0, 0, 300, 300);
    grad.addColorStop(0, '#FFFFFF');
    grad.addColorStop(0.5, '#FF0000');
    grad.addColorStop(1, '#FFFFFF');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 300, 300);
 
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    ctx.shadowBlur = 5;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
    ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';
    ctx.fillRect(position, position, 200, 200);
 
    position = (position == 25) ? 75 : 25;
}

Det är helt vanlig JavaScript som nu ritar ut ett animerat objekt direkt på skärmen. Det här exemplet är inte särskilt avancerat, men det finns redan nu spel skrivna med Canvas. En bra källa för Canvas-spel är http://www.canvasdemos.com där man kan hitta en mängd spel och program som inte kräver att man har något plugin installerat.

Då Internet Explorer 9 kommer med hårdvaruaccelerering för Canvas så kommer det bli möjligt att skapa väldigt avancerade spel och program som renderas med hjälp av grafikkortet, och det genom att använda HTML5 och JavaScript!

HTML5 är nästa version av HTML-standarden och tas fram av W3C tillsammans med WHATWG. Efter att HTML 4.01 släpptes så började W3C arbetet med XHTML 1.0, vilket har exakt samma element som HTML 4.01, men ger en syntax mer lik XML. De fortsatte sedan med XHTML 2.0, vilket skulle ha helt nya element, och då inte alls bakåtkompatibelt med XHTML 1.0. Under tiden började en ny grupp kallad WHATWG (Web Hypertext Technology Working Group) med en separat standard kallad Web Applications 1.0, vilket skulle bli en fortsättning på HTML 4.01.

Då XHTML 2.0 fick mycket kritik på grund av komplexiteten och då det inte var bakåtkompatibelt med tidigare versioner av HTML och XHTML beslutade W3C att lägga ned arbetet med det och istället satsa på HTML5 tillsammans med WHATWG.

Same same, but different

Många förespråkare för XHTML menar att HTML ger svagare krav på utvecklaren då man inte längre behöver stänga element, ha apostrofer runt attributens värden och annat som krävs i SGML. Det här har dock lett till att det kommer att bli möjligt att skriva HTML5 på två olika sätt – med HTML-syntax och med XML-syntax. Det senare kräver dock att hela sidan skickas med rätt MIME type (application/xhtml+xml) , vilket Internet Explorer 8 och tidigare inte klarar av (Internet Explorer 9 har dock stöd för det). Vill man använda HTML-syntaxen så levereras sidorna som tidigare med text/html.

Varför HTML5?

En fråga som många ställer sig är varför vi skulle behöva HTML5 när vi idag med HTML 4.01/XHTML 1.1, JavaScript, Silverlight, Flash och annat redan kan göra allt vi behöver. Svaret på det är att genom att erbjuda en standard gör det möjligt att skapa moderna webbsajter så som de flesta fungerar idag, och samtidigt kunna visa den i alla webbläsare på alla plattformar. Krävs det ett plugin för att se till exempel filmer så låser man lätt ute användare på andra plattformar än den man har skapat sidan för. Genom att använda HTML5 så räcker det med att använda en webbläsare med stöd för det för att man ska kunna erbjuda samma upplevelse för även dessa personer.

Nyheter i HTML5

Det finns en mängd nyheter i HTML5 som leder oss in i nutiden. HTML 4.01 blev en standard 1999 när i stort sett alla fortfarande satt med slöa modem. Vad som har hänt de senaste 11 åren är att vi har fått helt klart snabbare uppkopplingar, vilket ger möjligheten att visa filmer, spela musik och annat direkt på hemsidorna.

Några av de största nyheterna i HTML5 är:

Nya HTML-element

Det tillkommer en del nya element så som section, nav, article, aside, hgroup, header, footer m.m. Dessa används för att enklare gruppera sidan i olika delar där vi idag ofta har div-element med ett id som förklarar vilken del av sidan det gäller.

Video & audio

Med de nya video- samt audio-elementen kan vi spela upp video och ljud direkt på hemsidorna utan att behöva tredjepartsplugins. Det finns än så länge inte någon specifikation för vilka format som skall ingå i standarden, utan som det ser ut nu så är det till stor del upp till webbläsartillverkaren.

Canvas

Med Canvas kan vi rita ut objekt direkt i webbläsaren utan att behöva använda bilder (det går dock att använda bilder i canvas). Tack vare hårdvaruaccelereringen som finns i till exempel Internet Explorer 9 så kan vi skapa spel och annat som tidigare krävde Silverlight eller Flash, genom att med canvas-elementet och JavaScript rita ut alla objekt. Vill man få in ljudeffekter kan man med fördel använda det nya audio-elementet.

Inline SVG

SVG är sedan tidigare en W3C-standard, men med HTML5 slipper vi ha separata SVG-filer, och kan nu istället använda SVG direkt i våra HTML-dokument. SVG kan precis som canvas användas för att rita ut objekt på skärmen, men med skillnaden att SVG är XML-baserat och renderar vektorgrafik, medan canvas används med JavaScript för att rita ut objekten.

Nya input-typer i formulär

När man skapar formulär på hemsidor idag så används ofta JavaScript på klienten för att validera det som skrivs in. Vi kanske har telefonnummer, e-postadresser och annat i vanliga text-fält, vilka sedan måste valideras manuellt. Som en del av HTML5 kommer det dock stöd för nya typer av input-fält, vilket gör att vi får valideringen inbyggd i webbläsaren.

Nya JavaScript-API:er

Förutom just det HTML5-specifika så brukar man räkna med en del olika JavaScript-API:er i standarden. Dessa är bland annat Selectors, Web Storage, Web Sockets, Web Workers, Geolocation, Offline Web Applications med flera. Redan Internet Explorer 8 hade stöd för bade Selectors och Web Storage, vilket betyder att väldigt många kan använda det redan idag.

Framtiden för HTML5

Så när beräknas HTML5 bli en färdig standard? Det talas ofta om att år 2022 är då det blir en rekommendation hos W3C. Det låter som en ganska skrämmande siffra, men med tanke på att det kräver två fulla implementationer av standarden så är det inte så konstigt trots allt. Som jämförelse kan man ta CSS 2.1 som trots att det är vad man använder idag, fortfarande inte är en standard utan bara en ”Candidate Recommendation” vilket betyder att standarden är så gott som klar, men att det eventuellt kan ske någon ändring som upptäcks när standarden skall implementeras i flera webbläsare. Man räknar med att HTML5 skall nå det stadiet år 2012, så om två år från att det här skrivs så bör alla funktioner och element vara färdiga och redo att implementeras och användas.

Kom igång redan idag

För att förbereda sig på vad som komma skall så kan man redan idag ladda ned Internet Explorer 9 Beta 1, vilket har stöd för många av de kommande funktionerna i HTML5, som till exempel video, audio, inline SVG och Canvas, men även stöd för en annan kommande standard – CSS 3.

Internet Explorer 9 Beta 1 kan laddas ned här:
http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

With the release of ASP.NET MVC 2 we got support for DisplayTemplates and EditorTemplates, which make it possible to create custom forms for the edit views. With this feature, we can easily take advantage of the new input fields in HTML5 such as date, color, email etc.

The first thing we need to do is to create a new ASP.NET MVC project and add a controller. After that we have to create a new folder, ~\Views\Shared\EditorTemplates. We will have out EditorTemplates here.

The controller will be very basic in this test:

using System.Web.Mvc;
 
namespace Html5Templates.Controllers
{
    public class Html5Controller : Controller
    {
        public ActionResult Create()
        {
            return View();
        }
    }
}

We will also add a very simple view:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<Html5Templates.Models.Templates>" %>
 
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2>Create</h2>
    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>
 
        <fieldset>
            <legend>Fields</legend>
            
            <%: Html.EditorFor(_ => Model) %>
            
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
 
    <% } %>
</asp:Content>

As you can see in the Page directive, the model is of the type “Templates”, which we will have to create. In our model, we will take advantage of some attributes in the DataAnnotations namespace, DataType and UIHint. We will now create a property for every new type in HTML5 forms:

using System.ComponentModel.DataAnnotations;
using System;
 
namespace Html5Templates.Models
{
    public class Templates
    {
        [UIHint("Color")]
        public string Color { get; set; }
        
        [DataType(DataType.Date)]
        public DateTime Date { get; set; }
        
        [DataType(DataType.DateTime)]
        public DateTime DateTime { get; set; }
 
        [UIHint("DateTimeLocal")]
        public DateTime DateTimeLocal { get; set; }
        
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }
 
        [UIHint("Month")]
        public string Month { get; set; }
 
        [UIHint("Number")]
        public string Number { get; set; }
 
        [UIHint("Range")]
        public int Range { get; set; }
        
        [DataType(DataType.PhoneNumber)]
        public string PhoneNumber { get; set; }
 
        [DataType(DataType.Time)]
        public DateTime Time { get; set; }
 
        [DataType(DataType.Url)]
        public string Url { get; set; }
 
        [UIHint("Week")]
        public string Week { get; set; }
    }
}

When use DataType when possible, and UIHint when we can´t. To be able to use this, we will have to create a new EditorTemplate for each input type. For example, we will have a DateTime.ascx file with this content:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.String>" %>
<%: Html.TextBoxFor(_ => Model, new { type = "datetime" }) %>

You can find a link to a sample project at the end of the post.

If we run the page in Opera, you will see this:

1 - Opera

Looks great! But what about Internet Explorer 8? If we open the same page in IE 8, we will get this:

2 - IE8

As you can see, the browser will still render normal textboxes if HTML5 forms isn´t supported, so it won´t break your page.

Thanks to the awesome open source library “jQuery Tools” with its Forms functionality, we can add actually get HTML5 forms support for older browsers such as Internet Explorer 8.

To load the library including jQuery, add this to your site:

<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
<script>
    $(document).ready(function () {
        $(":date").dateinput();
    });
</script>

This will add support for the date field, and you can also add support for Range and add validation using this tool. To know more about it and to download it, take a look at this site:

http://flowplayer.org/tools/release-notes/index.html#form

The source code for the project can be downloaded here:

http://bit.ly/bIflxw

Something that is very common on websites is small images that is used to make links and other things look better. These small images is either added as a background image for the link, or as a separate image. When you load these images, they are requested and downloaded separate. Since the browser only make a small number of requests at once, it can take a while before all images is loaded on the page. To solve this, you can use CSS Sprites.

When you use CSS Sprites, you use the same image file for all the images instead of having them in separate files. When you request the images, you only have to load one file to get them all. When you want to show a specific image, you use CSS to change focus to that image.

One example where it is used is at Google.com. They have one single image for the logo and all the small icons that are used. Because of that, you will only have to download one single image:

google

This is a common way to solve it, since it gives you better performance.

There are some cons using CSS Sprites though. It can be hard to update the images, and it can be hard to get a specific image in the sprite file.

To make it easier to do this without the need of extra work, you can use the new control created by Microsoft. This control takes all files in a directory, and mash them together in one new file. It also creates a new CSS file with classes which are used to get the right images.

To use this new control, we need to get the assemblies. The project is released under a “almost-open source license” since it´s still a beta, but will probably be open source when it´s released as RTW. The assemblies, the source code and a great documentation can be downloaded from CodePlex:

http://aspnet.codeplex.com/releases/view/50140

When we have the assemblies, we will have to create a new ASP.NET MVC project (I use a ASP.NET MVC 3 project with Razor), and add references to ImageOptimizationFramework and ImageSprite.

To be sure the images and the CSS is being generated, we must add this to web.config:

<httpModules>
  <add type="Microsoft.Samples.Web.ImageOptimizationModule" name="Microsoft.Samples.Web.ImageOptimizationModule"/>
</httpModules>

We now have everythin required. I am going to use three different images with this control (downloaded from http://www.iconaholic.com):

calendar card folder

These images will be transformed into one image, and we will use CSS Sprites to show the right one. To be able to use the Sprites control in ASP.NET, I create a new folder called App_Sprites in the root, and in that folder, I create a folder with the name “icons”. Every folder in App_Sprites creates it´s own image and css file, which means we don´t get one huge file with all images in all folders.

Normally, I would do this when displaying the images:

<ul>
    <li>
        <img src="/app_sprites/icons/calendar.png" />
        <a href="#">Link #1</a>
    </li>
    <li>
        <img src="/app_sprites/icons/card.png" />
        <a href="#">Link #2</a>
    </li>
    <li>
        <img src="/app_sprites/icons/folder.png" />
        <a href="#">Link #3</a>
    </li>
</ul>

These images will be downloaded separate, and three different requests will be made. Since I want to use Sprites I add this in the head:

@Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/icons/")

And this in the body:

<ul>
    <li>
        @Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/calendar.png")
        <a href="#">Link #1</a>
    </li>
    <li>
        @Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/card.png")
        <a href="#">Link #2</a>
    </li>
    <li>
        @Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/folder.png")
        <a href="#">Link #3</a>
    </li>
</ul>

I use the Image helper here to send the path to the original image. The result for both methods is this:

rendered

The generated HTML for the Sprite control looks like this:

<link href="App_Sprites/icons/lowCompat.css" media="all" rel="stylesheet" type="text/css" />

And:

<ul>
    <li>
        <img class="icons_calendar-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
        <a href="#">Link #1</a>
    </li>
    <li>
        <img class="icons_card-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
        <a href="#">Link #2</a>
    </li>
    <li>
                <img class="icons_folder-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
            <a href="#">Link #3</a>
    </li>
</ul>

We have got a css file with the name lowCompat.css. It contains the css classes which is needed for the images, and we also have a base64 encoded string for the src attribute, which shows a transparent 1x1 pixels image as a placeholder.

The difference when using sprites is that we only have a single request for all three images, instead of three separate requests. We have also got a new file, sprite0.png, which looks like this:

sprite0

These are the different images we want to show. We can now use this everywhere on the page.

But how can we modify what´s being rendered? What about if we want a jpg file with not so good quality, and with a background color?

To change the settings for the generated images, we need to create a settings.xml file, which we can add in /App_Sprites or /App_Sprites/Icons. If we add it in _App_Sprites, it will be used for all folders. To test this, we add the following xml to settings.xml:

<?xml version="1.0" encoding="utf-8" ?>
<ImageOptimizationSettings>
  <FileFormat>jpg</FileFormat>
  <Base64Encoding>false</Base64Encoding>
  <Quality>20</Quality>
  <BackgroundColor>ff00ff00</BackgroundColor>
</ImageOptimizationSettings>

We change the file format to jpg, change the quality to 20 (0-100 where 100 means best quality), and also change the background color to ff00ff00, which is green. The color is ARGB, which means 0000ff00 would make it transparent.

If we update the page, we get this:

sprite1

We got bad quality, but much smaller file size. With the standard settings it was 15 KB, but now it´s only 2 KB. The best thing to do here is to lower the quality as much as possible, without getting too bad quality.

We can also use this new functionality using ASP.NET Web Forms and ASP.NET Web Pages. If you use Web Forms, it includes a new ImageSprite control, which inherits the original Image control.

Razor, the new ASP.NET MVC View Engine from Microsoft, makes it possible to write much cleaner views for our ASP.NET MVC sites. But since the code is so clean, why not use it in other places? Gustavo Machado have written a great blog post where he uses the open APIs to write a console application that can compile Razor views without the need of IIS.

You can find the blog post about it here:
http://thegsharp.wordpress.com/2010/07/07/using-razor-from-a-console-application/

But how can we use this to be more productive? I took the sample code from his blog post, modified it a little bit to work better with my project and wrote a T4 Text Templating Engine with it.

A T4 Text Templating Engine is what is processing a T4 template. This means we can actually use Razor instead of the original syntax in our T4 templates, and generate ASP.NET MVC views and other things.

To test the T4 Text Templating Engine I created a T4 Template – Razor.tt – which looks like this:

@{
    var host = RazorHost.Host;
    var date = DateTime.Now.ToString();
}
@host.GetType().Name
 
@foreach(var name in host.Names) {
<text>Name: @name</text>
}
 
Date and time: <%="@date" %>

It is normal Razor code which is going to be used to render a view for the WebFormViewEngine. I have a RazorHost.Host here, which purpose is to give us access to other properties, like Names, which we got here. If you have created templates for ASP.NET MVC, you have probably used a host there. This is just the same.

So how can we use the engine to process the template? I have created a console application which looks like this:

using System;
using System.IO;
 
namespace RazorTemplating.App.ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
 
            string templateName = "Razor.tt";
            string[] names = new string[] { "Mikael", "Bill", "Steve" };
 
            Console.WriteLine("\n----------------------------------\nT4 Template\n----------------------------------\n");
 
            var host = new RazorTemplatingEngineHost(names);
            host.TemplateFile = templateName;
 
            string templateFile = File.ReadAllText(templateName);
 
            Console.WriteLine("\n{0}\n", templateFile);
 
            var engine = new RazorEngine();
            string generatedText = engine.ProcessTemplate(templateFile, host);
 
            Console.WriteLine("\n----------------------------------\nOutput\n----------------------------------\n");
            Console.WriteLine(generatedText);
 
            if (host.Errors != null)
            foreach (var item in host.Errors)
            {
                Console.WriteLine(item);
                Console.WriteLine();
            }
            
            Console.ReadKey();
        }
    }
}

This is the same code that we would have used with the normal T4 TextTemplatingEngineHost, but instead we use the RazorTemplatingEngineHost.

When we run the application we get this:

razor

We have actually used Razor to generate a view for .aspx files!

For more information about how to use Razor without IIS, take a look at Gustavo Machados blog post, and to download the source code for this project, go here:

http://bit.ly/a5qugN

When you are using ASP.NET with WebFormViewEngine and wants to call a method in a separate namespace, you can add a reference to the namespace in web.config to get a cleaner view.

You can easily do it with:

<add namespace="Custom.Namespace" />

In ASP.NET MVC 3 there is a new View Engine, Razor. If we use this, the code above won’t work since the imports in web.config are ignored.

You can get access to the classes and methods quick and easy by using the “using” statement in the view:

@using Custom.Namespace

We need this in all the views where we want to access the classes, which requires more code.

To get rid of this, we need to know how Razor works. Every time a website with Razor is started, the InlinePageBuildProvider is registered for all files with the .cshtml and .vbhtml extensions. This BuildProvider implementation is used by Razor to build the views. What we need to do here is to add “Custom.Namespace” to the BuildProvider so it can include that when building the views.

What we need to do that is a new class which we can call PreApplicationStart. It has a static method where we add the global import which will be used by InlinePageBuildProvider:

using Microsoft.WebPages.Compilation;
 
public class PreApplicationStart
{
    public static void InitializeApplication()
    {
        CodeGeneratorSettings.AddGlobalImport("Custom.Namespace");
    }
}

To execute this method, we are going to use a new attribute in .NET 4.0, System.Web.PreApplicationStartMethodAttribute. This attribute can only be used by assemblies, so we add the following code in AssemblyInfo.cs:

[assembly: PreApplicationStartMethod(typeof(PreApplicationStart), "InitializeApplication")]

The parameters we send to the attribut is the type of the class where we have the static method, and the name of the static method.

When we start our website, the method will be executed before Application_Start in global.asax, which will make sure we always have access to this namespace in our application.

We can now get access to all classes in Custom.Namespace in our Razor views, just like we could before with WebFormViewEngine.

What is ASP.NET MVC 3?

In march, ASP.NET MVC 2 was released. It contains many new features such as data annotations, areas, validation and other things. These functions makes it easier to create larger projects where we easily can set annotations for the models, and also split the projects into different sections.

There are though some things that we want to change, and we often have to repeat ourselves, like when using ActionFilter for all controls and action methods We could solve this using ASP.NET MVC 2, but that requires extra work from us since there isn´t any kind of built-in support for that.

The solution for these and many other problems exists in ASP.NET MVC 3, which is released as a preview.

So, what are the biggest new features and changes in this firs preview of ASP.NET MVC 3?

  • Razor, a new ViewEngine for ASP.NET MVC. Razor also works for ASP.NET Web Pages.
  • ASP.NET MVC 3 requires .NET 4.0 and does not suport .NET 3.5 anymore.
  • Global ActionFilters, which make it possible to register action filters for all controllers and method in one place.
  • Dynamic View and ViewModel properties. In previous versions of ASP.NET we had to useViewData, which is a dictionary with strings and objects. Now we have dynamic properties instead.
  • The possibility to choose View Engine when creating a new view.
  • Support for injecting code using a built-in Service Locator.
  • JsonValueProviderFactory which makes it possible to post Json directly to a page and retrieve it as a custom type.
  • Support for new data annotations in .NET 4.0.
  • Support for IValidateObject in our models, so we can use custom validation for the values directly from the model.
  • New types of ActionResult.

I am going to talk about most of these new features here, and the other things will be published later in separate articles.

Create your first ASP.NET MVC 3 project

When ASP.NET MVC 3 is installed, we can see some new project types in Visual Studio 2010. When we choose to create a new project, it will look like this:

1 - New project

We can see three new project templates here: ”ASP.NET MVC 3 Web Application (ASPX)”, ”ASP.NET MVC 3 Web Application (Razor)” and ”ASP.NET MVC 3 Empty Web Application”. If we create a project using ASPX, we will get the same views as in earlier versions, which are using WebFormViewEngin, but if we choose to use Razor, we will use this new View Engines instead. In this case I choose to create a Razor project.

What we have now is an ordinary ASP.NET MVC project with folders for Models, Views and Controllers. There are some changes though, instead of aspx files in the views folder, we have cshtml files:

2 - ViewsCshtml

Cshtml is the file extension for views using the Razor vew engine. We can still use aspx files, but then the WebFormViewEngine will be used instead.

If we open View\Home\Index.cshtml we will see this:

@inherits System.Web.Mvc.WebViewPage
 
@{
    View.Title = "Home Page";
    LayoutPage = "~/Views/Shared/_Layout.cshtml";
}
 
<h2>@View.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

There is no intellisense or syntax highlighting for Razor in Preview 1, so if you want t use it, you will still havet o use aspx files until it´s there.

If we take a look at the code, we can find some interesting things. First, we have @inherits on the first line. We use that to declare which type the view uses. In ASP.NET MVC 2 we had ViewPage or ViewPage<T>, and with Razor we now have WebViewPage or WebViewPage<T>. If we use aspx files with ASP.NET MVC 3, they will still use ViewPage.

After that we have a code block with two lines of code. On the first line we set View.Title, and on the other we set LayoutPage. View is the dynamic type we use instead of ViewData, and LayoutPage is used to set the master page we want to use.

After the code block we display View.Message, wich is a ViewData object.

How come we set one View value, and then display another?

If we take a look at HomeController.cs, we can see this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcRazor.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewModel.Message = "Welcome to ASP.NET MVC!";
 
            return View();
        }
 
        public ActionResult About()
        {
            return View();
        }
    }
}

Here is ViewModel.Message set. ViewModel is exactly the same as View, which means we use it instead of ViewData. This is the value we use in the view.

But we also set View.Title without displaying the value in the view. What happens here is that the value is sent to the LayoutPage which looks like this:

@inherits System.Web.Mvc.WebViewPage
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@View.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div class="page">
 
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
 
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
 
            <div id="menucontainer">
 
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
 
            </div>
        </div>
 
        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

Here are we reading the value from View.Title for the header in the page. The value have been sent from the view to the masterpage, just like we could do with a ContentPlaceHolder before.

In the LayoutPage we use standard helpers for ASP.NET MVC, just like we use to do before. There are some new things as well though, like the RenderBody() which is used to specify where the view should be rendered.

If we click on F5 to start the project, we will get this:

3 - Start site

This site looks just like it dit in earlier versions of ASP.NET MVC, and we can now start buidling the page.

Create a guestbook

If we want to get feedback from our visitors, we could have a guestbook on the page. I am going to create a new guestbook from scratch, using ASP.NET MVC 3 with Razor, and store the values in a SQL Server Compact 4 database created with Entity Framework 4 CTP 4.

First we will need to create a model. We give the model the name GuestbookEntry and create it like this:

using System;
using System.ComponentModel.DataAnnotations;
 
namespace MvcRazor.Models
{
    public class GuestbookEntry
    {
        public int Id { get; set; }
 
        [StringLength(25)]
        [Required]
        public string Name { get; set; }
 
        [DataType(DataType.EmailAddress)]
        [Required]
        public string Email { get; set; }
 
        [Required]
        public string Message { get; set; }
 
        public DateTime Posted { get; set; }
    }
}

To create a database I first create a new folder named Code, where I create a new class file with the name DataContext. I add the following code:

using System.Data.Entity;
using MvcRazor.Models;
 
namespace MvcRazor.Code
{
    internal class DataContext : DbContext
    {
        public DbSet<GuestbookEntry> Guestbook { get; set; }
    }
}

To use the new functions in Entity Framework 4 CTP 4, we need to add a reference to the dll for the CTP. Thanks to the new Code-First functionality, we will be able to use our model directly in our database without the need of writing custom SQL.

To create the database automatically if it´s not existing already, we will have to add this to Application_Start in global.asax:

Database.SetInitializer<DataContext>(new RecreateDatabaseIfModelChanges<DataContext>());

The database will now be recreated everytime we change the model.

The last thing we need before using the model is to add a key in web.config with the connection string to the database.

<add name="DataContext" connectionString="Data Source=|DataDirectory|DataContext.sdf" providerName="System.Data.SqlServerCe.4.0" />

Since the database doesn´t exist yet, it will be created the first time we run the application.

How you can use DataContext to work with the database

To work with the database we need to create controllers which sends the data between our database and views. I am now going to create a new GuestbookController where I check the box for creating additional action methods:

4 - Add controller

Since we don´t have all the functionality in our guestbook, I will remove unnecessary methods, and get this:

using System.Web.Mvc;
using MvcRazor.Code;
using MvcRazor.Models;
 
namespace MvcRazor.Controllers
{
    public class GuestbookController : Controller
    {
        DataContext _ctx = new DataContext();
 
        // GET: /Guestbook/
        public ActionResult Index()
        {
            return View();
        }
 
        // GET: /Guestbook/Create
        public ActionResult Create()
        {
            return View();
        } 
 
        // POST: /Guestbook/Create
        [HttpPost]
        public ActionResult Create(GuestbookEntry entry)
        {
            try
            {
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

Outside of the methods, I create a new instance of DataContext, which will be used by the different methods to work with the data.

In the index method we will have a list with all entries in the guestbook. Since we have a reference to an ObjectContext (in this case it´s DataContext), it will be really easy to accomplish this The index method will look like this:

public ActionResult Index()
{
    return View(_ctx.Guestbook.ToList());
}

We also updates the Create method so we can save new entries:

// POST: /Guestbook/Create
[HttpPost]
public ActionResult Create(GuestbookEntry entry)
{
    try
    {
        entry.Posted = DateTime.Now;
 
        _ctx.Guestbook.Add(entry);
        _ctx.SaveChanges();
 
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

It´s really easy to work with the data using our DataContext, and now we have everything we need to list and create entries in our guestbook.

The next step is to create the views, so we start with the index view. It´s a generic view (GuestbookEntry), and it is going to list the entries using the Razor view engine. Right-click inside of the Index method and choose Add View. If you are familiar with ASP.NET MVC 2 or the previous version, you will see some changes here:

5 - Add view

The new feature here is the ability to choose which view engine to use, and automatically use the corresponding T4 template to render it. If we click on Add, the view will be generated. There are though some properties we don´t want to show here, such the links and Id, so we delete them. The result is:

@inherits System.Web.Mvc.WebViewPage<IEnumerable<MvcRazor.Models.GuestbookEntry>>
 
@{
    View.Title = "Guestbook";
    LayoutPage = "~/Views/Shared/_Layout.cshtml";
}
 
    <h2>Index</h2>
 
    <table>
        <tr>
            <th>
                Name
            </th>
            <th>
                Email
            </th>
            <th>
                Message
            </th>
            <th>
                Posted
            </th>
        </tr>
 
    @foreach (var item in Model) {
    
        <tr>
            <td>
                @item.Name
            </td>
            <td>
                @item.Email
            </td>
            <td>
                @item.Message
            </td>
            <td>
                @String.Format("{0:g}", item.Posted)
            </td>
        </tr>
    
    }
 
    </table>
 
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>

The view looks like the start page, but now we have a model, which we can see on the first line. We also use Razor instead of the old code blocks (<%%>).

We will now create a view for adding entries, so we choose Create instead of List for the new view.

We will remove the Id and Date fields for this new view, so it looks like this:

@inherits System.Web.Mvc.WebViewPage<MvcRazor.Models.GuestbookEntry>
 
@{
    View.Title = "Create";
    LayoutPage = "~/Views/Shared/_Layout.cshtml";
}
 
<h2>Create</h2>
 
    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
 
        <fieldset>
            <legend>Fields</legend>
            
            <div class="editor-label">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
            
            <div class="editor-label">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>
            
            <div class="editor-label">
                @Html.LabelFor(model => model.Message)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.Message)
                @Html.ValidationMessageFor(model => model.Message)
            </div>
            
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
 
    }

If we press F5, we will see this:

6 - View page

We have now created a very simple guestbook where the visitors can create new entries. The database is auto-generated, so we will not have to think about that.

If we go to the create view and posts the form without the correct values, we can see that we also got validation based on our data annotations for the model.

More Posts « Previous page - Next page »