Mikael Söderström

Microsoft har tidigare lagt upp filer som kan ge intellisense för HTML 5 i Visual Studio 2008:

http://blogs.msdn.com/webdevtools/archive/2009/11/18/html-5-intellisense-and-validation-schema-for-visual-studio-2008-and-visual-web-developer.aspx

Om man kör Visual Studio 2008 så fungerar det riktigt bra, men om man däremot använder Visual Studio 2010 så registreras inte intellisense-filen korrekt och man kan inte använda sig utav det.

För att få intellisense för HTML 5 i Visual Studio 2010 så har jag skapat två reg-filer (x86 och x64) som kan användas för att få in det.

För att få in det så ladda först ned den uppdaterade zip-filen:

http://dev.mikaelsoderstrom.se/downloads/html5/html5.zip

Lägg sedan in html_5.xsd i C:\Program Files\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html.

Kör sedan den reg-filen som motsvarar ditt system, HTML-5-Schema-Reg-x86-VS2010.reg för x86 och HTML-5-Schema-Reg-x64-VS2010.reg för x64.

Om du har Visual Studio 2010 öppet så starta om det.

När du nu öppnar till exempel en aspx-fil eller html-fil så kan du välja HTML 5 i listan över doctypes.

Nu kan du få intellisense för HTML 5 i ditt dokument!

Microsoft har äntligen släppt en förhandsversion av sitt efterlängtade Internet Explorer 9. Webben har utvecklats i en väldigt snabb takt de senaste åren tack vare den konkurrens som finns bland webbläsarna.

Under 90-talet kunde vi se hur Internet Explorer och Netscape slogs om att vara den bästa webbläsaren, vilket gjorde att vi bland annat kunde se en ny version av Internet Explorer i snitt en gång per år:

• 1.0 – 1995
• 2.0 – 1995
• 3.0 – 1996
• 4.0 – 1997
• 5.0 – 1999
• 5.5 – 2000
• 6.0 – 2001

Men vad hände sedan? Efter att Netscape förlorade kampen om webbläsarna så var Internet Explorer utan konkurrens på en väldigt stor marknad. På grund av det så kom inga nya versioner förrän 7.0 släpptes 2006.

Internet Explorer 6 fungerade tillräckligt bra för många, och då det inte fanns något bättre så utvecklades system anpassade för just den webbläsaren.

Under tiden så fick dock uppstickare som Firefox möjlighet att ta sig in på marknaden. Genom att erbjuda bättre stöd för standarder, samt en snabbare upplevelse så tog Firefox stora marknadsandelar från Internet Explorer och har idag ungefär en fjärdedel av marknaden. Även andra webbläsare har passat på att ta sig in på marknaden med samma argument.

Då Internet Explorer fortfarande var (och är) den absolut mest använda webbläsaren så har många utvecklare beklagat sig över bristen på standarder. På grund av det så infördes ett mycket bättre stöd för de vanligaste standarderna, som CSS 2.1, i Internet Explorer 8.

Testa Internet Explorer 9 idag

Det är möjligt att redan idag testa Internet Explorer 9 om man kör Windows Vista eller Windows 7.

Genom att gå in på nedanstående sida så finns möjligheten att ladda hem och köra en tidig version av det:

http://ie.microsoft.com/testdrive/

Förhandsversionen av Internet Explorer 9 installeras sida vid sida med din befintliga installation och kan enkelt avinstalleras, så du kan fortfarande använda Internet Explorer 8 precis som tidigare.

När programmet är installerat och startat så får vi upp det här:

Det är ett väldigt enkelt och avskalat gränssnitt. Vi saknar i stort sett all funktionalitet som Internet Explorer annars har. Anledningen till detta är för att det är just renderingsmotorn (Trident) som visas upp.

På sidan som kommer upp så kan vi köra olika tester för att se hur de hanteras av Internet Explorer 9

För att gå till någon annan sida så kan vi antingen klicka på Page -> Open, eller Ctrl+O. Då kan vi skriva in adressen till valfri sida för att se hur den ser ut i Internet Explorer 9.

Då det mesta i Internet Explorer 9 renderas med hjälp av DirectX så får vi en fantastiskt snygg rendering av alla sidor.

Genom att trycka på Ctrl, + så kan vi Zooma in riktigt långt.

För att återställa Zoomen så får vi trycka på Ctrl + 0.

Om vi vill jämföra utseendet mellan Internet Explorer 5, 7, 8 och 9 så kan vi klicka på Debug -> Version i menyn. Det gör det enkelt att se så att sidan alltid ser likadan ut.

Vill vi få fram Developer Tools, vilket ingår i Internet Explorer sedan version 8 så kan vi klicka på Debug -> Developer Tools i menyn eller F12. Developer Tools för Internet Explorer 9 innehåller bland annat ny funktionalitet för att se hur mycket som har förts över nätverket.

Vi har här även en detaljerad vy som ger väldigt bra information om vad som har skickats fram och tillbaka mellan klient och server.

Framtiden för webbutveckling

Många utvecklare älskar att syssla med sådant som är det absolut senaste, gärna även sådant som inte finns än. Ingen som arbetar med webbutveckling kan ha missat HTML 5 och CSS 3, vilket är två specifikationer (egentligen samlingar av specifikationer) som fortfarande bara är i ”Working draft”-stadiet, vilket betyder att det är långt från klart, och mycket väl kan förändras.

Det här är dock två standarder som krävs för att få webbutvecklingen in på 2000-talet. När vi surfar runt på Internet idag så kan vi se att media och dynamiska webbplatser är något väldigt vanligt. När arbetet med HTML 4 och CSS 2 påbörjades så satt många fortfarande med modem, vilket omöjliggjorde sådant som Youtube. Idag ser det helt annorlunda ut, och vi har till och med fullfjädrade webbläsare och snabba Turbo 3G-uppkopplingar på våra mobiltelefoner.

För att vi ska kunna dra nytta av detta så krävs det att standarderna uppdateras, så att vi kan se på videon eller ta del av det rika gränssnittet oavsett om vi sitter vid datorn eller om vi sitter i tunnelbanan med mobiltelefonen.

Tack vare att många verkligen vill ha det här så har standarden gått mycket fortare framåt. Vi kan bland annat se hur Microsoft har gått med i arbetsgrupperna för att ta fram standarderna, så att vi användare och utvecklare skall kunna ta del av detta så snart som möjligt (http://blogs.msdn.com/ie/archive/tags/W3C/default.aspx).

Stöd för nya standarder

I och med släppet av den första publika releasen av Internet Explorer 9 så har Internet Explorer fått ett utökat stöd för dessa standarder. Stödet för både HTML 5 och CSS 3 har utvecklats markant. Utöver detta så kan vi även se stöd för helt nya standarder som Internet Explorer aldrig tidigare har haft stöd för, som SVG.

Det är många som tidigare har trott att Microsoft inte implementerade stöd för SVG på grund av att det används för att rendera vektorbaserad grafik, vilket skulle kunna konkurrera med Silverlight. Av samma anledning så har det ryktats om att Microsoft inte vill implementera stöd för video-elementen i HTML, vilka ger stöd för video direkt i webbläsaren utan att behöva tredjepartsplugins.

Då Internet Explorer är den mest använda webbläsaren på marknaden med över 50% av alla användare så är det en stor nyhet för alla webbutvecklare att stödet byggs ut så pass mycket.

Hur står sig Internet Explorer 9 mot konkurrenterna?

Värt att påpeka är att Internet Explorer 9 just har kommit i sin första förhandsversion. Det betyder att mycket kan komma att ändras fram till släppet, och att den version som nu finns, finns av den anledningen att vi utvecklare skall kunna testa hur väl implementeringarna fungerar i Internet Explorer 9, men även hur våra befintliga webbplatser ser ut så att vi skall kunna förbereda oss. Inför släppet av Internet Explorer 8 så var det många webbplatser som såg felaktiga ut, vilket gjorde att Microsoft var tvungna att ge stöd även för äldre versioner av Trident (renderingsmotorn) i Internet Explorer 8. Detta gjorde det möjligt att rendera sidorna som Internet Explorer 7, vilket åtgärdar problemet.

I den förhandsversion av Internet Explorer 9 som nu finns tillgänglig så finns möjligheten att använda samma renderingsmotorer som i Internet Explorer 8, men även möjligheten att rendera som Internet Explorer 9.

Att jämföra två webbläsare och säga vilken som är bäst är i stort sett omöjligt att göra. Beroende på vilken del av webbläsaren man vill testa så får man använda olika verktyg.

Det finns ett verktyg som kallas Acid 3. Det tar upp ett visst antal tester inom olika standarder som CSS, JavaScript, SVG och annat. Internet Explorer 9 får i skrivande stund 55/100 i det testet:

Det finns dock väldigt många sätt att testa det på, så för att underlätta så delar även jag upp det i olika steg här.

JavaScript

JavaScript, ECMA-262, ISO/IEC 16262, ECMAScript eller vad man nu vill kalla det (kärt barn har många namn) är en gammal standard som från början utvecklades av Netscape för 15 år sedan som ett steg i webbläsarkriget. Det var ett sätt att få webbsidorna mer dynamiska på, vilket de utan tvekan har lyckats med.

Det finns väldigt få webbplatser idag som inte använder sig utav JavaScript. JavaScript är ett språk som dels är ett av de absolut mest använda i världen, men samtidigt ett av de mest hatade. Anledningen till att väldigt många försöker hålla sig borta från JavaScript är för att det är så pass jobbigt att anpassa JavaScripten för olika webbläsare. Internet Explorer implementerade en egen tolkning av JavaScript i Internet Explorer 3, vilket de sedan har byggt vidare på. Denna tolkning har aldrig varit i synk med den andra varianten, vilket har gjort att många utvecklare har suttit och skrivit olika villkor baserat på vilken webbläsare som har kört det aktuella scriptet.

Efter att Ajax blev stort så har dock JavaScript-användandet växt storartat, och det är numera en väldigt viktig del i varje webbutvecklares verktygslåda. Ramverk som jQuery, Prototype, MooTools och andra har även betytt väldigt mycket för utvecklare då de innehåller funktionalitet som gör att man som utvecklare kan fokusera på att vara produktiva, istället för att spendera tid med att testa olika scripts i olika webbläsare.

Internet Explorer 9 har dock en bättre implementering av ECMAScript, och vi kan i och med denna version använda väldigt mycket kod utan att behöva bry oss om vilken webbläsare som används.

Ett annat problem på senare tid är att det tar för lång tid att köra JavaScript. I takt med att webbläsare blir mer avancerade så ställer utvecklare högre krav på att snabbt kunna köra avancerade scripts. I Internet Explorer 9 och den nya JavaScript-motorn ”Chakra” så har man löst detta genom att kompilera och köra JavaScript på en annan processorkärna om en sådan finns tillgänglig. Detta gör att alla JavaScript som tidigare har tagit väldigt lång tid att köra, nu istället kan köras mycket snabbare.

För att testa hastigheten i olika JavaScript-motorer så används ofta ett test kallat ”Sunspider”. Det gör olika tester och räknar sedan ut tiden det tog att köra dessa tester.

I den här bilden som är tagen från Microsoft så kan vi se att skillnaden mellan IE 8 (till vänster) och IE 9 (grön stapel i mitten) är kolossal! Skillnaden är även relativt stor mellan demon från PDC 2009 och Mix 2010, vilket är ett tecken på att de fortfarande arbetar med hastigheten.

HTML 5

HTML 4 blev en W3C-rekommendation 1999. Det är alltså över 10 år sedan den senaste HTML-standarden blev färdig. Under den tiden så har väldigt mycket förändrats, och den synen vi har på Internet har förändrats från att vara något som kunde användas för att visa vanliga dokument till att bli något dynamiskt och som gör det möjligt att visa videos, flytta runt element och helt enkelt ge oss en väldigt rik upplevelse.

Vi vill numer till exempel kunna lagra stora mängder data i webbläsaren för offline-bruk. 1999 var cookies perfekt, men nu för tiden så behöver vi mer än så. Av den anledningen så ingår DOM Storage och andra API:er i HTML 5. Använder du idag Internet Explorer 8 så kan du ta del av detta.

Vad gäller media så var Java-applets vanligt på webbsidor. De användes dock inte till att visa videos och annat då bandbredden var alldeles för dålig. Idag sitter vi med blixtsnabba uppkopplingar och kan utan problem streama media direkt på Internet. HTML 5 ger ett nytt video-element samt ett audio-element, vilka kan användas för att spela både video och ljud över Internet, utan att behöva blanda in tredjepartsprodukter.

Annan funktionalitet som finns under HTML 5 är Canvas och SVG. Med dessa kan man rendera vektografik rent programmatiskt direkt i webbläsaren.

HTML 5 definierar alltså både API:er som vi kan anropa med JavaScript, samt element som kan användas för att ge ett rikare gränssnitt.

CSS

Den versionen av CSS som är aktuell för de flesta nu är CSS 2.1. Vad många inte vet är att den versionen fortfarande inte är en rekommendation, utan fortfarande endast en kandidat. Samtidigt som den är i slutfasen så talas det väldigt mycket om CSS 3, vilket är versionen efter.

Anledningen till att det talas så mycket om CSS 3 är då det har funktionalitet som rundade hörn på element, genomskinliga element, stöd för att dela upp texter i flera kolumner, nya selektorer, möjlighet att ge skuggor på element, ha bilder för ramar och mycket annat.

Det blir med CSS 3 mycket lättare att ge snygga effekter på sin hemsida utan att behöva lägga till allt i Photoshop. Det går nu att lösa med så lite som en extra rad i CSS-filen.

CSS 3 är precis som HTML 5 till största delen en Working Draft, vilket betyder att mycket kan ändras.

Internet Explorer har mycket större stöd för CSS 3 än tidigare, och klarar 578/578 test på css3.info (http://www.css3.info/internet-explorer-9-platform-preview-released/).

Testa nya funktionaliteten i Internet Explorer 9

Samtidigt som släppet av förhandsgranskningen av Internet Explorer 9 släpptes även ett antal olika tester som visar hur väl de olika funktionerna fungerar i Internet Explorer 9.

De olika testerna fokuserar på tre olika områden: hastighet, HTML 5 och grafik.

Testerna finns tillgängliga här:

http://ie.microsoft.com/testdrive

Hur går jag vidare nu?

Om du är ansvarig för en eller flera webbsajter så bör du testa dessa i Internet Explorer 9 för att se så att allt ser bra ut. Om något är fel så kan det bero på två saker – antingen så är sidan inte kodad enligt W3C-standarder eller så beror det på en bugg i Internet Explorer 9.

Tidigare versioner av Internet Explorer kan ha visat detta som du har velat, men ändå felaktigt då de kan ha tolkat standarden fel. För att åtgärda det så kan du antingen se till att fixa till felet, eller helt enkelt tvinga Internet Explorer 9 att rendera sidan som tidigare IE-versioner har gjort.

Om det är en bugg i Internet Explorer 9 så bör du absolut rapportera in detta. Vi vill alla ha en så felfri Internet Explorer som möjligt, så det är viktigt att alla buggar rapporteras in så fort som möjligt.

Även om allt fungerar bra i den här förhandsversionen av Internet Explorer 9 så bör du komma ihåg att testa sidorna även i framtida släpp av Internet Explorer 9 då mycket kan ändras. Det kommer att släppas en version var åttonde vecka, så se till att ha koll på släppen och testa allt ordentligt varje gång.

Men jag sitter med Windows XP och Internet Explorer 6, vad är fel med det?

Både Windows XP och Internet Explorer 6 saknar stora säkerhetsfunktioner som har implementerats först i senare versioner.

Om du kör Internet Explorer 6 eller 7 så bör du absolut fokusera på att uppgradera till Internet Explorer 8. Många av de säkerhetshål som drabbar Internet Explorer är riktade mot just dessa två, då Internet Explorer 8 har mycket inbyggd funktionalitet för att skydda användaren mot dessa hot.

Du gör även alla webbutvecklare runtom en stor tjänst genom att uppgradera, då de äldre versionerna har ett riktigt dåligt stöd för standarder, vilket håller tillbaka utvecklingen.

Det är inte mycket som är klart angående ASP.NET MVC 3, men en sak som de har gått ut med är att det kommer att kräva .NET 4.0. För oss utvecklare så betyder det att så fort det handlar om ett ASP.NET MVC 3-projekt så kommer vi att kunna använda oss utav funktioner som dynamic, optional/named parameters, ASP.NET Charting, nya koblocket för HtmlEncode och mycket annat.

Om vi ser på ASP.NET MVC Futures så kan vi se att en av dessa saker finns med på ett antal ställen – nämligen dynamic. Bland annat så finns det en ny ViewPage-klass kallad DynamicViewPage, vilken jag kommer att ta upp strax.

För att kunna testa exemplen nedan så bör du ha tillgång till Visual Studio 2010 (RC eller senare), ASP.NET MVC 2 RTM samt ASP.NET MVC 2 RTM Futures.

Det första vi gör är att skapa upp en controller vid namn ”DynamicController”. Sedan skapar vi en vy för Index-metoden. Vyn ska inte vara hårt kodad mot någon modell, och skall inte ha någon speciell template.

Vyn skall sedan inte ärva från vanliga ViewPage, utan istället DynamicViewPage. Den finns under:

Microsoft.Web.Mvc.AspNet4.DynamicViewPage

Det vi har nu är alltså controllern:

using System.Web.Mvc;

namespace MvcFuturesWeb.Controllers

{

    public class DynamicController : Controller

    {

        // GET: /Dynamic/

        public ActionResult Index()

        {

            return View();

        }

    }

}

Och vyn:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

Inherits="Microsoft.Web.Mvc.AspNet4.DynamicViewPage" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

</asp:Content>

Det är alltså en väldigt enkel controller och en väldigt enkel vy. Enda skillnaden mot vanligt är att vi nu ärver DynamicViewPage i vyn.

Så vad är det för speciellt med DynamicViewPage, och varför skulle man vilja ha den?

Det finns två olika varianter av DynamicViewPage, dels den som vi använder här, men även en som är generisk (DynamicViewPage<TModel>).

Skillnaden mellan dessa är att den som vi använder har två dynamiska propertys, Model och ViewData. Den generiska varianten har dock enbart en dynamisk ViewData. De ärver sedan ViewPage, respektive ViewPage<TModel>, vilket gör att de har alla vanliga metoder som dessa har.

I dessa metoder så anropas sedan DynamicViewDataDictionary.Wrap(…), vilket är en intern klass som ärver DynamicObject. Den använder sig utav en ViewDataDictionary, men implementerar även stöd för bland annat TryGetMember.

När ViewData och/eller Model skickas in i Wrap-metoden så mappas de om till ett DynamicViewDataDictionary och returneras som dynamic.

Det här leder till att vi har en vy med dynamisk Model samt ViewData. För att dra nytta av det här så börjar vi med att lägga till ett värde i ViewData. I Controllern så använder vi vanliga ViewData-klassen och sätter ett värde på samma sätt som vi annars hade gjort.

ViewData["Test"] = "Hello!";

När vi sedan hämtar värdet så är det ett dynamiskt Dictionary, vilket gör att vi kan hämta det med:

<%=ViewData.Test %>

Vi kan även använda oss utav en dynamisk modell då vi inte använder den generiska DynamicViewPage. För det så använder vi ExpandoObject.

dynamic d = new ExpandoObject();

d.Hej = "Hopp";

d.Hello = "Jump";

return View(d);

Då vyn nu är dynamisk så kan vi hämta värdena på följande sätt:

<%=Model.Hej %>

Det går även att gå ett steg längre. Då vår dynamiska modell returnerar ett Dictionary så kan vi loopa igenom alla värden i modellen och skriva ut.

<% foreach (var d in Model) { %>

    <li><%=d.Key + " "  + d.Value %></li>

<% } %>

</ul>

Resultatet efter dessa ändringar är:

Genom att använda DynamicViewPage så är vi alltså helt oberoende av vilken typ som skickas in till vyn, vilket gör att det inte finns någon som helst koppling mellan den och controllern.

Det är även möjligt att använda dynamiska objekt för andra typer av vyer. Om vi ändrar från:

return View(d);

Till:

return Json(d, JsonRequestBehavior.AllowGet);

Så får vi istället det här returnerat:

[{"Key":"Hej","Value":"Hopp"},{"Key":"Hello","Value":"Jump"}]

Vi får alltså en Json-sträng med vårt dynamiska objekt. Då det är en dictionary så får vi dock tvådelade värden (Key och Value som separata värden), men det kan komma att ändras framöver.

Då det här gäller ASP.NET MVC Futures så innebär det att innehållet nedan kan komma att försvinna helt i framtiden. Det är möjligt att använda det nu, men använd det inte till skarpa projekt då det kan försvinna framöver.

En av de stora nyheterna i ASP.NET MVC 2 är templates för visning och editering av data. Det har tidigare funnits med för Dynamic Data, där det fanns liknande templates inbyggda. Dessa fungerar dock ej med ASP.NET MVC 2, utan då får man istället skapa nya som har samma funktionalitet.

I ASP.NET MVC RTM Futures så ingår dock ett antal templates, vilka kan användas direkt genom att kopiera och klistra in dem i ett projekt. De är inte hårt kopplade mot någon av ASP.NET MVC Futures-binärerna, utan kan användas i vilket ASP.NET MVC 2-projekt som helst.

För att testa det så behövs ASP.NET MVC Futures, vilket kan laddas ned här:

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

Om vi packar upp filen så kan vi hitta en mapp kallad ” DefaultTemplates”. Där finns alla templates. Kopiera innehållet i mappen till Views\Shared i ditt ASP.NET MVC 2-projekt så har du allt du behöver.

För att se hur de fungerar så behöver vi först en modell. Vi skapar upp en ny klass vid namn ”UberType”. Den kommer att ha properties som kan mappas upp mot alla nya templates.

Utseendet på klassen blir:

public class UberType

{

    public int Id { get; set; }

    public bool EnBoolean { get; set; }

    public List<string> EnCollection { get; set; }

    public Decimal EnDecimal { get; set; }

    public string EnEmailAddress { get; set; }

    public string EnHiddenInput { get; set; }

    public string EnHtml { get; set; }

    public Object EnObject { get; set; }

    public string EnString { get; set; }

    public string EnUrl { get; set; }

    public string EnMultilineText { get; set; }

}

Vi skapar sedan en ny Controller, kallad DataController. Här har vi action-metoder för att lista, visa detaljer, visa ett redigeringsformulär samt en enkel metod som genererar lite dummy-data.

using System.Collections.Generic;

using System.Linq;

using System.Web.Mvc;

using MvcFuturesWeb.Models;

namespace MvcFuturesWeb.Controllers

{

    public class DataController : Controller

    {

        // GET: /Data/

        public ActionResult Index()

        {

            List<UberType> ut = GetData();

            return View(ut);

        }

        // GET: /Data/Details/5

        public ActionResult Details(int id)

        {

            UberType ut = GetData().Where(d => d.Id == id).FirstOrDefault();

            return View(ut);

        }

        // GET: /Data/Edit/5

        public ActionResult Edit(int id)

        {

            UberType ut = GetData().Where(d => d.Id == id).FirstOrDefault();

            return View(ut);

        }

        private List<UberType> GetData()

        {

            return new List<UberType>() {

                new UberType()

                {

                    Id = 1,

                    EnBoolean = true,

                    EnCollection = new List<string>() { "Mikael", "Bill", "Nisse" },

                    EnDecimal = 1.2M,

                    EnEmailAddress = "test@example.com",

                    EnHiddenInput = "Hemligt!",

                    EnHtml = "Texten är <b>fet</b> ibland, men det händer även att den är <i>kursiv</i>.",

                    EnMultilineText = "Flera\nrader\ntext!",

                    EnObject = (object)123,

                    EnString = "Lite text",

                    EnUrl = "http://www.example.com",

                },

                new UberType()

                {

                    Id = 2,

                    EnBoolean = false,

                    EnCollection = new List<string>() { "Mikael", "Bill", "Nisse" },

                    EnDecimal = 10M,

                    EnEmailAddress = "test@example.com",

                    EnHiddenInput = "Hemligt!",

                    EnHtml = "Texten är <b>fet</b> ibland, men det händer även att den är <i>kursiv</i>.",

                    EnMultilineText = "Flera\nrader\ntext!",

                    EnObject = (object)"Text istället",

                    EnString = "Lite mer text",

                    EnUrl = "http://www.example.com",

                }

            };

        }

    }

}

Sedan behövs views för dessa, så högerklicka i metoderna och välj ”Add View”. Glöm inte att välja att ha UberType som modell, samt att välja rätt typ av template (List, Edit, Details).

För att få lite mindre kod i vyerna så ändrar vi vyerna för Edit och Details en aning.

Edit:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcFuturesWeb.Models.UberType>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Edit</h2>

    <% using (Html.BeginForm()) {%>

        <fieldset>

            <legend>Fields</legend>

            <%= Html.EditorForModel() %>

            <input type="submit" value="Save" />

        </fieldset>

    <% } %>

</asp:Content>

Details:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcFuturesWeb.Models.UberType>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    Details

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Details</h2>

    <%= Html.DisplayForModel() %>

    <p>

        <%=Html.ActionLink("Edit", "Edit", new { id=Model.Id }) %> |

        <%=Html.ActionLink("Back to List", "Index") %>

    </p>

</asp:Content>

DisplayForModel() och EditorForModel() renderar automatiskt alla fält med deras värden, vilket passar perfekt i det här fallet.

Om vi nu besöker sidan så har vi en vanlig sida med möjlighet att visa all data, detaljer för en viss entitet, samt möjlighet att ändra dem.

Problemet här är att alla fält hanteras likadant, oavsett vad de har för syfte. Länkar visas inte som länkar, textfält som skall finnas på flera rader visas bara i en vanlig text-ruta istället för i en textarea och så vidare.

För att lösa detta så kan vi skapa upp egna templates, vilket jag har skrivit om tidigare:

http://weblogs.asp.net/mikaelsoderstrom/archive/2009/09/24/introduktion-till-asp-net-mvc-2.aspx

Nu slipper vi dock skapa upp alla templates, utan kan istället använda oss utav de vi har fått med ASP.NET Futures.

För att ta nytta av dessa så behöver vi bara ändra i modellen, resten sköter sig självt.

Det vi behöver göra i modellen är att i första hand använda DataType-attributet, och om det inte finns där så kan vi använda UIHint-attributet.

Den slutliga modellen blir, efter ändringarna:

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

namespace MvcFuturesWeb.Models

{

    public class UberType

    {

        [UIHint("HiddenInput")]

        public int Id { get; set; }

        [UIHint("Boolean")]

        public bool EnBoolean { get; set; }

        [UIHint("Collection")]

        public List<string> EnCollection { get; set; }

        [UIHint("Decimal")]

        public Decimal EnDecimal { get; set; }

        [DataType(DataType.EmailAddress)]

        public string EnEmailAddress { get; set; }

        [UIHint("HiddenInput")]

        public string EnHiddenInput { get; set; }

        [DataType(DataType.Html)]

        public string EnHtml { get; set; }

        [UIHint("Object")]

        public Object EnObject { get; set; }

        [DataType(DataType.Text)]

        public string EnString { get; set; }

        [DataType(DataType.Url)]

        public string EnUrl { get; set; }

        [DataType(DataType.MultilineText)]

        public string EnMultilineText { get; set; }

    }

}

Om vi ser hur Edit- och Details-sidorna ser ut nu så har de automatiskt använt templates på de ställen där vi vill ha det.

Edit:

Details:

Vi kan självklart modifiera dessa om vi vill ha dem annorlunda, samt även skapa helt nya som vi kan använda istället.

Då Microsoft har släppt ett flertal previews, betor och fulla versioner samt Futures av ASP.NET MVC så kan det vara svårt att veta exakt vilken version som körs på din site, eller server. För att göra det lättare att se vilken version som körs så har Microsoft i ASP.NET MVC 2 RTM Futures med en fil vid namn MvcDiagnostics.aspx, och som innehåller versionsnumren för alla previews av ASP.NET MVC och Futures. När man sedan går in på sidan så ser man vilken som används på den aktuella sidan.

Aspx-filen är en vanlig web form, men kan utan problem läggas in i ett vanligt ASP.NET MVC-projekt och köras direkt genom att ange sökvägen till filen.

Om vi kör ASP.NET MVC 2 RTM så får vi bland annat fram:

Om vi har en referens till Futures så får vi även:

Om vi hade använt en äldre version av ASP.NET MVC så hade vi då sett det, och enkelt kunnat uppgradera.

Den fulla sidan ser ut så här (klicka för full storlek):

Idag släppte Microsoft äntligen ASP.NET MVC 2. Med tanke på hur ofta de släpper releaser av det så blir man nästan lite bortskämd, men nu är det alltså RTM som finns ute, vilket gör att ni kan använda det skarpt direkt i era projekt.

För er som inte har använt ASP.NET MVC tidigare så kan jag tipsa om min kom igång-artikel som dock tar upp ASP.NET MVC 1, men som ändå kan användas som grund.

Ni finner den här:
http://weblogs.asp.net/mikaelsoderstrom/archive/2009/04/02/kom-ig-229-ng-med-asp-net-mvc.aspx

Jag har även skrivit ett antal artiklar om ASP.NET MVC 2, och nu när det har släppts som RTM så kan jag rekommendera att ni kollar igenom även dessa för information om vad som är nytt.

• Introduktion till ASP.NET MVC 2
• Separat klass för metadata
• Areas
• Framtiden för ASP.NET MVC
• Lägg in en Wysiwyg-editor med ASP.NET MVC
• Anropa Microsoft Ajax Minifier
• Skapa Microsoft Tags
• Använd ASP.NET Chart med ASP.NET MVC
• Skapa areor enklare
• Hur använder man Action- samt RenderAction-metoderna?
• Validering
• ExpandoObject med ASP.NET MVC 2
• Tuple med ASP.NET MVC 2
• Mappa upp modellerna med AutoMapper

För mer information från svenska bloggare om det kommande Visual Studio 2010 (som har ASP.NET MVC 2 inbyggt), .NET 4.0 samt omkringliggande tekniker, kolla gärna in den svenska MSDN-sidan för Visual Studio 2010:

http://www.msdn.se/vs2010

MSDN Roadshow

Under våren kommer även Microsoft att hålla en roadshow landet runt med information om det nya som kommer.

Ni hittar information om det här:

http://www.microsoft.com/sverige/vs2010/default.aspx

Ladda ned ASP.NET MVC 2

Det finns två sätt att ladda ned ASP.NET MVC 2 på i nuläget. Det enklaste är att göra det genom Web Platform Installer. Där kan man genom ett par klick ladda ned och installera det lokalt på datorn.

Vill man ha källkoden och ASP.NET MVC Futures så får man gå till Codeplex.