Kom igång med ASP.NET, del 3 - Bygg ut projektet

Trots att vi fortfarande inte har skrivit en enda rad kod än så länge så har vi en webbsajt med medlemshantering. Den ser dock lite trist ut, och har inte så mycket funktionalitet, så det ska vi ta och ändra på nu.

För att piffa upp designen snabbt och enkelt så går vi in på ASP.NET MVC Design Template Gallery:
http://www.asp.net/mvc/gallery

Här kan vi ladda ned färdiga mallar som kan användas direkt med ASP.NET MVC. Välj den designen du vill ha och ladda ned. Sedan ersätter du de befintliga filerna med de som finns i den nedladdade filen. Jag själv väljer att ladda ned "Happy Forest", ett helskönt tema.

Resultatet är nu det här, vilket ser mycket bättre ut:

För att få sidan lite mer personlig så ska vi ta och byta ut lite texter. Vi börjar med "My Sample MVC Application" som vi kan hitta i toppen här (det kan vara någon annan text beroende på vilket tema du har valt). Den här texten kan vi ändra i den så kallade "master-sidan". Vi hittar den under \View\Shared\Site.Master i Solution explorer. Anledningen till att den ligger under Shared är på grund av att den används av flera olika sidor. Klickar vi t.ex. på "About" så kan vi se att samma mall används där. Det enda som skiljer är det som finns i den vita rutan med innehåll. Det gör att det blir mycket enklare att anpassa utseendet på sajten.

Om vi öppnar upp den här filen så kan vi se att vi har rubriken i ren text här. Genom att ändra den till något annat så slår ändringen igenom på alla olika sidor. I den här filen så har vi även menyn, vilket gör att vi enkelt kan lägga till och ta bort sidor i den.

För att ändra i de enskilda vyerna så kan vi kika i Views-mappen. Just startsidan finns under \View\Home\Index.aspx. Genom att ändra i den så kan vi få till en mer personlig startsida.

Efter att ha gjort lite ändringar så ser min sida ut så här:

Nu vill jag även tillåta mina besökare att registrera sig på sidan, och därmed komma åt material som inte anonyma användare kommer åt.

Vi börjar med att klicka på "Log on"-länken uppe till höger. Den innehåller ett färdigt formulär som vi kan använda för att logga in på sidan. Det finns även en länk till en sida där vi kan skapa användare.

Om vi väljer att fylla i formuläret för att skapa användare så kan vi se på direkten att vi är inloggade med det användarnamnet vi just angav. Det som hände var att vi fick en databas skapad åt oss genom ASP.NETs inbyggda medlemshantering (kom i .NET 2.0).

För att lägga till, ta bort och ändra medlemmar snabbt och enkelt så kan vi använda ett inbyggt verktyg för det.

I Visual Web Developer så väljer vi att i menyn klicka på Project -> ASP.NET Configuration. Det som händer nu är att en administrationssida öppnas för databasen vi använder.

Det ser inte ut att vara något speciellt, men det gör det möjligt för oss att enkelt hantera både användare och roller.

Vi kan när som helst öppna det här verktyget och arbeta med det.

Nu låter vi våra besökare registrera sig, men det finns fortfarande inga specialla privilegier för dem. Det vi vill ha är en sida för enbart medlemmar. Sidan skall nås genom att gå till /MembersOnly/ och skall innehålla lite information för dem.

Det första vi måste göra nu är att skapa en Controller för den nya sidan. Genom att högerklicka på Controllers, och välja Add -> Controller så kan vi skapa upp en ny controller.

I rutan som kommer upp så väljer vi att ge controllern namnet "MembersOnlyController". Kom ihåg att namnen på controllers alltid måste sluta med "Controller".

När vi har klickat på Add så får vi upp en fil med det här innehållet:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax;

namespace FirstProject.Controllers

{

    public class MembersOnlyController : Controller

    {

        //

        // GET: /MembersOnly/

        public ActionResult Index()

        {

            return View();

        }

    }

}

Det den består utav är en metod som returnerar ett ActionResult. Det kommer i det här fallet att vara en vanlig vy vid namn Index.aspx. I kommentaren ovanför metoden så ser vi hur vi kommer åt metoden.

Om vi testar att surfa till den nya sidan nu så får vi:

Problemet är att vi fortfarande inte har kopplat någon vy till sidan. För att göra det så högerklickar vi i metoden och väljer "Add view...".

Det som kommer fram nu är en ruta där vi kan välja att ändra lite inställningar för vyn som skapas. Vi väljer att skippa det nu och klickar istället direkt på Add.

Om vi ändrar lite i texten på sidan som skapas och testar att surfa till samma sida så får vi nu det här resultatet:

Problemet är bara det att vem som helst kommer in på sidan, så hur kan vi förändra det?

För att kräva att användaren är autentiserad så väljer vi att sätta ett attribut på controllern.

[Authorize]

public class MembersOnlyController : Controller

Genom att lägga till Authorize för MembersOnlyController så ser vi till att vi enbart tillåter inloggade medlemmar att besöka vyerna som visas här. Om man inte är inloggad så skickas man automatiskt till inloggningssidan. Loggar man in där så skickas man tillbaka till medlemssidan och kan därefter se innehållet.

Genom att använda minimalt med kod så har vi nu en webbsajt med en rolig design, medlemshantering, innehåll för enbart inloggade och olika sidor med information. Vem sade att ASP.NET var svårt?