I denna del av serien tänkte jag gå igenom vad man i databassammanhang kallar för CRUD, Create, Read, Update & Delete. Vi ska även gå igenom grundläggande databasmodellering samt skapa några tabeller. Observera att det vi skapar här inte kommer att användas i själva forumet utan är bara en liten crash course så att du ska veta vad vi håller på med senare när vi bygger på forumet.

Jag kommer att utgå från att du har en databas att arbeta med. Börja med att koppla upp dig mot denna i MySQL Query Browser. Sedan ska vi börja med att skapa några tabeller som vi kan använda när vi ska lära oss de olika kommandona. Det är väldigt vanligt att man i exempel använder tabeller vid namn Employee & Department vilket jag tänkte att vi även skulle göra här. Det första man bör göra innan man skapar sina tabeller är att modellera upp hur dessa är tänkta att se ut samt eventuella relationer emellan dem. Vid modellering börjar man man att se vilka olika objekt som man ska representera och vilka egenskaper dessa har. Till exempel så har Employee-tabellen, som ska motsvara en anställd egenskaperna anställningsnummer, förnamn, efternamn, avdelning, anställningsdatum m.m.. Vår Department-tabell kan ha egenskaper som avdelningsid, avdelningsnamn. Redan nu ser vi att det finns en relation mellan dessa två tabeller. Båda innehåller nämligen avdelningsid. Det som identifierar varje rad i en tabell kallar Primary Key, PK eller på svenska primärnyckel. Det som i en tabell hänvisar till PK i en annan tabell kallas Foreign Key, FK eller på svenska främmande nyckel. PK används som jag sa tidigare för att identifiera varje rad i en tabell, vilket innebär att den automatiskt blir unik, och du kan inte lägga till två rader med samma PK. En FK däremot kan det finnas hur många rader som helst av, men varje FK pekar alltid på en rad i sin “föräldratabell”. Detta förhindrar oss från att t.ex. lägga till en anställd med en avdelning som inte existerar.

På varje kolumn i en tabell ska man även sätta en datatyp. En datatyp talar om vilken sorts data det är vi lagrar i just denna kolumn. T.ex. så talar vi om om vi lagrar det som tal, text, datum m.m. Att sätta rätt datatyp är viktigt då det underlättar vid utsökningar samt förbättrar prestandan.

Du bör heller aldrig lagra mer än en information i varje kolumn, t.ex. så ska förnamn och efternamn aldrig lagras tillsammans, likaså adresser ska delas upp. Gatunamn och gatunummer kan vara OK att lagra tillsammans om din lösning inte kräver att du måste särskilja även på dessa.

Jag hoppas det är möjligt att förstå detta och vi ska nu göra själva modellen av våra tabeller.

Employee	Datatyp	Övrigt
EmpID	INT	PK
Firstname	VARCHAR(45)	NOT NULL
Lastname	VARCHAR(45)	NOT NULL
HireDate	DATETIME	NOT NULL
DeptID	INT	FK (Department, DeptID)

 

Department	Datatyp	Övrigt
DeptID	INT	PK
DeptName	VARCHAR(45)	NOT NULL

 

Då har vi två tabeller i textform och ska nu skapa dessa i databasen. Öppna MySQL Query Browser. Högerklicka på din databas och välj “Create new table”. Tabelleditorn öppnas då och vi kan skapa våra tabeller. Då tabellen Employee innehåller en referens till tabellen Department så skapar vi tabellen Department först så vi kan skapa relationen direkt när vi sedan skapar tabellen Employee. Börja med att fyll i uppgifterna för tabellen Department.

Det vi har gjort här är att vi lagt till två kolumner, sett till Att DeptID är PK genom att verifiera att det är en nyckel bredvid kolumnnamnet och satt de rätta datatyper. VARCHAR(45) innebär att det är en sträng som max kan innehålla 45 tecken men tar inte upp mer plats än nödvändigt. Egenskapen NOT NULL talar om att det måste finnas ett värde i kolumnen, vi kan alltså inte spara tomma värden och AUTO INC betyder att det är en automatisk räknare. Vi behöver alltså inte manuellt ange vår key, utan denna kommer att börja på 1 och räknas upp med 1 för varje rad.

Spara din nya genom att klicka på “Apply Changes”. Du får du upp en ruta som ser ut som den nedan. Klicka bara på “Execute” och du har skapat en tabell.

Grattis, om inget har gått fel så ska du nu har en tabell vid namn Department. Vi ska nu se till att skapa även tabellen Employee. Högerklicka än en gång på din databas och välj “Create new table”. Namnge denna till “Employee” och fyll sedan i resten av datan enligt bilden nedan.

Klicka på fliken “Foreign Keys”.

och sedan på +-tecknet. Låt namnet vara som det är och klicka på “OK”

I “Ref table” väljer du tabellen “Department”

och du kommer att se att den automatiskt visar rätt kolumner. Skulle dessa av någon anledning vara fel så kan du ändra genom att klicka på kolumnnamnet och välja den rätta kolumnen. Klicka på “Apply Changes” och sedan “Execute” och vi har två tabeller med en FK satt emellan denna. I de kommanda avsnitten nedan ska vi gå igenom hur du gör för att lägga till, läsa, uppdatera samt ta bort information från tabellerna.

Create

För att lägga till information i en tabell använder du kommandot INSERT. För att lägga till en rad i kolumnen Department kan vi skicka in följande “query” till databasen.

INSERT INTO Department(DeptName) VALUES('Försäljning')

Kommandot är uppbygget i delarna “INSERT INTO” sedan följer tabellnamnet och inom parenteserna anges en kommaseparerad lista med de kolumner som du vill stoppa in data i. Låter du bli att ange några så måste du ange värden för alla kolumner i tabellen. Efter det kommer “VALUES” och inom parenteser anges de värden som skall matas in på tabellraden. Även dessa skall anges med ett komma (,) mellan varje om det är fler och olika datatyper ska vara omslutna av olika tecken. T.ex. så skall strängar och datum vara omslutna av enkelfnuttar (‘) och tal ska inte vara omslutet av något alls.

Om du i MySQL Query Browser dubbelklickar två gånger på tabellen Department så kommer innehållet att visas.

 

Som du kan se så infogades “Försäljning” och min PK fick värdet 1 då det är ett tal och en räknare. Hade du själv velat ange ett värde för DeptID så hade SQL-frågan sett ut så här

INSERT INTO Department VALUES(5, 'PR')

Om du återigen dubbelklickar på tabellen Department så kommer du att se att en ny rad har infogats och att DeptID denna gång har värdet 5.

Som en liten övning kan du nu skapa 5st personer i tabellen Employee. Skulle du inte lyckas få till det så ser koden ut så här.

INSERT INTO Employee VALUES(null, 'Kalle', 'Anka', '2009-09-21', 1)

Upprepa denna sats men med olika namn och datum samt ändra DeptID på någon av dem så att du totalt har 5st personer i Employee-tabellen.  Anledningen till att jag använder null som första värde är att jag inte angett något kolumnlista utan vill ange ett värde för varje kolumn och null gör så att den använder räknaren för EmpID. Ett alternativt sätt hade varit

INSERT INTO Employee(Firstname, Lastname, HireDate, DeptID) 
VALUES('Kalle', 'Anka', '2009-09-21', 1)

Read

För att läsa från en tabell används kommandot SELECT. Det absolut enklaste sättet användningen är

SELECT * FROM TabellNamn

vilket ger oss alla rader och alla kolumner i tabellen TabellNamn. Så säg att vi skulle vilja hämta ut alla rader ur tabellen Employee. Detta gör vi genom kommandot

SELECT * FROM Employee

Detta ger oss resultatet

Säg att vi bara skulle vilja visa de tre första resultaten från SQL-satsen. Då skulle vi kunna använda nyckelordet LIMIT. LIMIT fungerar som så att anger du bara ett tal så visar den det antalet, men det går också att ange ett startvärde samt ett antal. För att visa de tre första så ser SQL-frågan ut så här

SELECT * FROM employee e LIMIT 3

Detta ger oss resultatet

Om vi istället skulle vilja hämta ut 3 rader, men börja på rad på skulle SQL-satsen se ut så här

SELECT * FROM employee e LIMIT 1,3

Resultatet av denna blir istället

Om vi vill sortera resultatet och bara hämta ut dem med efternamnet “Anka” så får vi lägga till nyckelordet WHERE. Vår sats skulle då se ut så här:

SELECT * FROM Employee WHERE Lastname='Anka'

och resultatet skulle bli

Skulle vi sedan även vilja ordna resultatet så att det sorteras på en viss kolumn så använder vi nyckelordet ORDER BY. Säg att vi vill sortera på förnamn i stigande ordning (a b c d osv). Då blir vår nya sats så här

SELECT * FROM Employee WHERE Lastname='Anka' ORDER BY Firstname ASC

Det sista, ASC är det som talar om att vi vill sortera förnamnet i stigande ordning. Detta är standard, så vi hade kunnat utelämna denna men för tydligenhetens skull så är det bra att alltid ange detta. Motsatsen till stigande ordning är fallande (ö ä å z y osv). Detta uppnår man genom att ange DESC istället för ASC. Så om vi vill hämta ut alla poster, men sortera på HireDate i fallande ordning skulle sql-frågan se ut så här

SELECT * FROM Employee ORDER BY HireDate DESC

och resultatet blir

I nästa exempel för utsökningar av data kommer jag att visa hur man tar fram data som ligger i ett intervall. Detta gör man genom att använda nyckelordet BETWEEN. Säg att vi vill hämta ut alla som blev anställda mellan 2004-2008. Då använder vi BETWEEN på följande sätt

SELECT * FROM Employee WHERE HireDate BETWEEN '2004-01-01' AND '2008-12-31'

och resultatet blir

Det sista exemplet kommer att visa hur du slår ihop data från flera olika tabeller, vilket i databassammanhang kallas att göra en JOIN. Det vi ska göra i exemplet är att ta fram förnamn, efternamn samt vilket avdelning personen arbetar för.

SELECT e.Firstname, e.Lastname, d.DeptName FROM Employee e, Department d 
WHERE e.DeptID = d.DeptID

Resultatet av ovanstående SQL-fråga blir

Som du ser så skiljer sig inte denna fråga så jättemycket från tidigare exempel, förutom att vi har data från flera tabeller som vi länkar ihop tack varje relationen som finns mellan dessa två tabeller. Som du ser har jag skrivit “e.Firstname” och det innebär att e är ett alias för Employee som jag definierar i FROM-satsen genom att skriva “Employee e”. Samma sak gör jag för Department. I WHERE-satsen länkar vi sedan ihop de båda tabellerna så att vi får en rad för varje användare.

Update

Att köra en Update mot databasen innebär att du uppdaterar ett eller flera värden i tabellen. En Update-sats ser i sin grundform ut på detta vis

UPDATE TabellNamn SET KolumnNamn=Värde

Ovanstående sats skulle uppdatera samtliga rader i tabellen vilket man så klart mycket sällan vill. För att specificera vilka rader som ska uppdateras kan du precis som här använda WHERE-villkoret. Säg att vi istället för “Kalle” vill ha dennes fulla namn, Karl Magnus, så skulle denna SQL-sats se ut på följande vis

UPDATE Employee SET Firstname='Karl Magnus' WHERE EmpID=1

Om vi nu kör en SELECT mot tabellen Employee kommer vi att se att värdet Firstname har ändrats från “Kalle” till “Karl Magnus”.

Delete

För att ta bort rader från tabeller så använder man kommandot DELETE. DELETE skrivs i sin grundform på följande vis

DELETE FROM TabellNamn

Detta skulle ta bort samtliga rader från tabellen “TabellNamn” men du kan precis som vid SELECT och UPDATE ange ett WHERE-villkor för att styra vilka rader som skall tas bort. Om vi från vårat exempel vill ta bort “Musse” så skulle denna sats se ut så här

DELETE FROM Employee WHERE EmpID=5

Resultatet av detta om vi kör ovanstående fråga är att raden med “Musse” försvinner ur tabellen.

 

Det var vad jag hade tänkt gå igenom när det gällde lite grundläggande databaskunskap. Det finns givetvis tonvis med fler saker att lära sig, men dessa är de som jag känner är de viktigaste.

Ses vid nästa artikel som kommer att handla om modellering av den riktiga databasen för forumet.

I del 2 av denna serie ska vi se till att vi är redo att börja koda. Börja med att öppna Visual Web Developer och klicka på File –> New Project. Du får då upp en ruta som ser ut som denna

Välj ASP.NET Web Application under Visual C# / Web. Under Name fyller du i vad du vill att detta projekt skall heta. Jag väljer att kalla det “SimpeForum” då det är vad det är. Välj var du vill placera projektet och klicka sedan på “OK”.

Din “Solution Explorer” bör då se ut i stil med

Nu har vi ett tomt projekt och om vi vill provköra detta projekt så kan vi klicka på F5. När vi gör detta kommer vi att få följande fråga

Klicka bara på “OK”. Det vi säger här är att vi vill aktivera debugging vilket kan vara trevligt att ha senare i projektet om vi behöver göra någon felsökning. Detta är dock något som vi ska inaktivera innan sidan går live senare.

Nästa sak vi ska göra är att försäkra oss om att vi har en fungerande databas så vi kan skapa de tabeller vi behöver senare. Starta “MySQL Query Browser” och fyll i dina uppgifter till databasen i rutan som kommer upp.

“Default Schema” är den databas som du vill att ska vara standard när du loggar in på databasen. Om du redan har en databas som du vet namnet på så kan du fylla i namnet på denna här, annars kan du låta rutan vara tom och klicka på “Ignore” på varningen som kommer upp. När du loggar in och allt går som det ska kommer du att kunna se alla databaser som ditt konto har tillgång till. I mitt fall ser det ut så här

vilket innebär att jag ännu inte har någon “riktig” databas.

Nu när vi har försäkrat oss om att allt fungerar så är nästa steg att gå igenom lite grundläggande databaskunskap.

Något som är väldigt praktiskt att använda ibland, speciellt då man bygger AJAX-applikationer är JSON.  JSON är text som representerar vanliga objekt. Läs mer här http://en.wikipedia.org/wiki/JSON

Ett vanligt förfarande vid utvecklandet av t.ex. AJAX-applikationer är att man via JavaScript anropar en webbsida som utför något och som sedan returnerar resultatet tillbaka till JavaScript-funktionen för att där behandlas, t.ex. kan man hämta gästboksinlägg, bloggposter eller vad man nu vill returnera.

När man utvecklar med .NET så finns det inbyggda klasser och funktioner i ramverket som gör att du istället för att skapa upp din JSON-sträng manuellt via t.ex. en loop gör detta automatiskt åt dig och hur detta går till tänkte jag visa nedan.

Börja med att skapa upp en ny webbplats i Visual Web Developer eller vilket verktyg du väljer att utveckla i. Sedan skapar vi en ny klass som vi kallar för Customer. För att kunna använda de inbyggda klasserna för att skapa vår JSON-sträng måste vi importera namnrymden System.Runtime.Serialization samt sätta attributet DataContract() på klassen och DataMember på alla egenskaper som klassen har. Vår klass kommer då att se ut i stil med

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization;

[DataContract()]
public class Customer
{
    [DataMember]
    public string Firstname
    {
        get;
        set;
    }

    [DataMember]
    public string Lastname
    {
        get;
        set;
    }

    [DataMember]
    public int CustomerID
    {
        get;
        set;
    }

    public Customer(string firstname, string lastname, int custmerid)
    {
        this.Firstname = firstname;
        this.Lastname = lastname;
        this.CustomerID = custmerid;
    }
}

Personligen använder jag alltid web handlers/generic handlers när jag skapar sidor som skall anropas av JavaScript-funktioner då man slipper de event som triggas i en vanlig .aspx-sida samt annat som gör att det tar längre tid att anropa sidan.

Nästa steg är att skapa en handler. Döp denna till GetCustomers och gå till kodläget. Det vi ska göra är att importera namnrymden System.Runtime.Serialization.JSON samt skriva den kod som gör om en lista med Customer-objekt till motsvarigheten i JSON.

Jag har importerat dessa namnrymder

using System.Collections.Generic;
using System.Runtime.Serialization.Json;

samt lagt till denna kod i metoden ProcessRequest i min handler

// Vi ändrar ContentType till JSON
context.Response.ContentType = "text/JSON";

// Sedan skapar vi en lista med några Customer-objekt. För att kunna
// göra detta så importerar vi System.Collections.Generic.
List<Customer> cust = new List<Customer>();
cust.Add(new Customer("Kalle", "Anka", 1));
cust.Add(new Customer("Joakim", "von Anka", 2));
cust.Add(new Customer("Oppfinnar-Jocke", "Johansson", 3));

// Sedan skapar vi ett objekt av typen DataContractJsonSerializer
// och talar om vilken typ det är som ska bli serializerad
DataContractJsonSerializer ser = new DataContractJsonSerializer(cust.GetType());

// Sedan skriver vi ut vår lista i JSON-format till "Ut-strömmen"
ser.WriteObject(context.Response.OutputStream, cust);

Som du ser är det inte mycket kod som behövs för att på ett smidigt sätt omvandla vår lista med Customer-objekt till JSON-format. Om du vill testa och se att det fungerar kan du prova handlern genom att högerklicka på den i “Solution Explorer” och välja “View in Browser”.

Har du följt denna artikel hela vägen bör du få detta som resultat

[{"CustomerID":1,"Firstname":"Kalle","Lastname":"Anka"},{"CustomerID":2,"Firstname":"Joakim",
"Lastname":"von Anka"},{"CustomerID":3,"Firstname":"Oppfinnar-Jocke","Lastname":"Johansson"}]

Nu ska vi gå vidare och använda vår webbhandler. Börja med att skapa en .aspx-sida om du inte fick en sådan skapad när du skapade webbsidan. Då jag gillar jQuery kommer jag att nyttja detta och för att slippa hosta jQuery-biblioteket själv kommer jag att nyttja Google till det då de erbjuder detta som en tjänst. I head-taggen i ditt dokument skriver du

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

// För att ladda in jquery från Google så används följande syntax. 1.3.2 
// talar om vilken version vi vill använda
google.load("jquery", "1.3.2");

// Normalt med jquery så använder man $(document).ready() men då vi anropar från 
// Google så får vi använda denna istället
google.setOnLoadCallback(function() {

    var listitem;
    // För att göra det så enkelt som möjligt finns det en inbyggd metod
    // i jquery för att hämta json vid namn getJSON.
    $.getJSON('GetCustomers.ashx', function(items, status) {
        $.each(items, function(index, item) {
            // För varje objekt lägger vi till vår Customer i en lista. 
            // Observera att vi i vårt javascript använder samma namn på
            // egenskaperna som de vi skapade i vår Customer-klass.
            listitem = document.createElement('li');
            listitem.innerHTML = item.Firstname + ' ' + item.Lastname;
            $('#customers').append(listitem);
        });
    });
});
</script>

Glöm inte att lägga till

<ul id="customers">

</ul>

inom body-taggarna.

När du nu kör sidan kommer du att se att alla de objekt som du sparade i listan kommer att skrivas ut på sidan.

Det var allt som behövdes, hoppas du har lärt dig något av detta.

På återseende.

I detta inlägg så ska vi skapa en gästbok där vi lagrar inläggen i ett XML-ark. Fördelen med XML-ark är att det inte krävs någon databas och är således väldigt lätt att installera, dock har det även sina nackdelar men de ska vi inte ta upp här.

Börja med att skapa en ny webbplats i Visual Studio. I mappen App_Data skapar du en xml-fil som heter posts.xml. I denna fil skapar du sedan ett rootelement vid namn posts så filen ser ut så här

<?xml version="1.0" encoding="utf-8"?>
<posts></posts>

När detta är klart ska vi skapa en klass som skall representera våra inlägg. Jag har valt att kalla denna för klass för Post. Först och främst måste du inkludera två “namespaces”.

using System.Xml.XPath;
using System.Xml.Linq;

Själva klassen ska se ut så här:

public string PostId
{
    get;
    set;
}

public string PostedBy
{
    get;
    set;
}

public DateTime DatePosted
{
    get;
    set;
}

public string PostBody
{
    get;
    set;
}

public Post(string postid, string postedby, DateTime dateposted, string post)
{
    this.PostId = postid;
    this.PostedBy = postedby;
    this.DatePosted = dateposted;
    this.PostBody = post;
}

Jag antar att det inte är några konstigheter med ovanstående stycke. Dock vill ju ha möjlighet att spara våra inlägg också och jag har därför skapat tre metoder i denna klass. Det är GetPosts – returnerar alla poster, AddPost – sparar en post samt EditPost vilken givetvis uppdaterar en post. Dessa metoder har jag gjort till static för enkelhetens skull och de ser ut på så här

// Denna metod är bara till lite hjälp så vi slipper skriva samma sak hela tiden
private static XDocument GetXDocument()
{
    return XDocument.Load(HttpContext.Current.Server.MapPath("") + @"/App_Data/posts.xml");
}

public static List<Post> GetPosts()
{
    List<Post> posts;
    
    // Ladda in xmldocumentet
    XDocument xdoc = GetXDocument();
    
    // Med hjälp av LINQ söker vi ut alla post-noder i XML-dokumentet och
    // gör om dem till Post-objekt som vi sedan skapar en lista av.
    posts = (from p in xdoc.Root.Descendants("post")
            select new Post((string)p.Element("PostId"), (string)p.Element("PostedBy"),
                (DateTime)p.Element("DatePosted"), 
                (string)p.Element("PostBody"))).ToList<Post>();

    return posts;        
}

public static void AddPost(Post p)
{
    // Ladda XML-Documentet
    XDocument xdoc = GetXDocument();
    // Sedan lägger vi till ett nytt element först i dokumentet. 
    // Det vi gör är att vi skapar i root-noden en ny nood vid namn post
    // som vi sedan fyller på med element samt dess värden. Bodyn skapar 
    // vi som en CDATA-nod så vi kan ha t.ex. < och > i det fältet. 
    // CDATA-elements innehåll parsas inte.
    xdoc.Root.AddFirst(new XElement("post", 
        new XElement("PostId", p.PostId), 
        new XElement("PostedBy", p.PostedBy),
        new XElement("DatePosted", p.DatePosted), 
        new XElement("PostBody", new XCData(p.PostBody))));

    // Sist men inte minst sparar vi vårt xml-dokument
    xdoc.Save(HttpContext.Current.Server.MapPath("") + @"/App_Data/posts.xml");
}

// Denna metod uppdaterar en post
public static void EditPost(string postid, string postbody)
{
    // Ladda XML-dokumentet
    XDocument xdoc = GetXDocument();
    // Hämtar den aktuella noden med hjälp av XPATH
    XElement node = xdoc.XPathSelectElement("posts/post[PostId='" + postid + "']");

    // Uppdaterar den hämtade noden med en ny body
    node.Element("PostBody").Value = postbody;
    
    // Sedan sparar vi åter igen vårat dokument med den
    // nya informationen
    xdoc.Save(HttpContext.Current.Server.MapPath("") + @"/App_Data/posts.xml");
}

När detta är klart kan vi öppna upp Default.aspx och där dra ut två textboxar, en knapp samt en repeater. De objekt som jag drog ut namngav jag så här

<asp:TextBox ID="PostedBy" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="PostBody" runat="server" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:Button ID="Save" runat="server" Text="Posta inlägg" OnClick="Save_Click" />
<br />

<asp:Repeater ID="rptrPosts" runat="server">
<ItemTemplate>
<ul>
<li>Postat av: <%#Eval("PostedBy") %></li>
<li>Datum: <%#Eval("DatePosted") %></li>
</ul>
<div class="Post">
<%#Eval("PostBody") %>
</div>

Det som är kvar att göra nu är att binda datan till repeatern samt skapa klick eventet. För att göra det enklare och mindre redundant kod rekommenderar jag att du skapar en privat metod vid namn BindData där du tar han om databindningen. Då kan du kalla på denna metod varje gång du vill binda om datan istället för att göra det manuellt.

private void BindData()
{
    // Hämtar posterna och binder till repeatern
    rptrPosts.DataSource = Post.GetPosts();
    rptrPosts.DataBind();
}

I Page_Load så binder vi datan om det inte är en postback

if (!IsPostBack)
{
    BindData();
}

och klick-eventet för vår knapp ser ut så här

protected void Save_Click(object sender, EventArgs e)
{
    // När vi klickar på Spara-knappen så lagrar vi informationen i XML-dokumentet
    Post.AddPost(new Post(Guid.NewGuid().ToString(), PostedBy.Text, DateTime.Now, 
                          PostBody.Text));
    // Och binder om datan
    BindData();
}

Sedan har vi en gästbok som sparar all information i ett XML-dokument. Funktionaliteten för att uppdatera själva XML-arket har jag inte skapat, men det är inga större svårigheter då metoden för det redan är skapad.

Observera att denna gästbok inte har något skydd mot t.ex. XSS, men detta kan du enkelt implementera genom att html-koda den data som användaren har matat in när du hämtar ut datan i metoden GetPosts.

På återseende.

Ladda ner:

Om du liksom jag brukar posta inlägg med kod i så finns det många olika sätt för att få färg på denna kod. Efter att ha provat flera olika, t.ex. först posta koden på pastebin och sedan kopiera in koden i mitt blogginlägg, kopiera koden från Visual Studio m.fl. så började jag använda Windows Live Writer tillsammans med en plugin som heter "Insert Code for Windows Live Writer". Denna plugin gör det extremt enkelt att posta inlägg med färgad kod. Exempel på detta kan du se i senare inlägg på denna blogg.

Funktioner som denna plugin har är

Syntax highlighting för följande språk:

• C#
• Javascript
• Html
• TSQL
• MSH
• Visual Basic

Det går även att få kodraderna numrerade, dessvärre så går det inte att kopiera koden utan att radnumrerna följer med vilket jag anser är denna plugin:s största brist. Det går även att få kodraderna med alternerande bakgrund samt välja att inte infoga css:en direkt i koden utan lägga den i ett externt stylesheet istället.

Du hittar denna excellenta plugin på följande adress: http://gallery.live.com/liveItemDetail.aspx?li=1f57bd9b-a692-4593-9e9e-e2962d9c0eee&bt=9&pl=8

Denna rekommenderas verkligen för dig som postar kod på din blogg.

JCrop är ytterligare en väldigt trevlig plugin till det otroligt smidiga javascript-ramverket jQuery. Med JCrop kan du på ett snygg sätt beskära bilder, eller, du utför inte själva beskärningen med JCrop utan du får upp ett markeringsverktyg för att direkt på bilden markera ytan som du vill beskära.

Det är inte mycket som krävs för att få till detta, men det första vi måste göra är att ladda hem sjäva plugin:en. Du hittar denna plugin här

http://deepliquid.com/content/Jcrop.html

Ladda hem plugin:en och packa upp alla filerna. Sedan skapar du en ny webbplats i Visual studio och flyttar mappen js samt css till ditt nya projekt. Skapa även en mapp i projektet som heter thumbs som ska innehålla våra "croppade" bilder. I mitt exempel har jag en bild som heter flowers.jpg, denna finns i mappen demos/demo_files i zip-arkivet som du tidigare laddade hem. Öppna sedan Default.aspx och lägga till följande rader i head-taggen

<script src="js/jquery.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.Jcrop.min.js" type="text/javascript" language="javascript">
</script>

Det enda dessa två rader gör är att dels ladda in jQuery samt plugin:en JCrop som finns i mappen js. Nästa steg är att lägga in bilden på sidan. Detta görs genom en simpel img-tagg. För att vi ska kunna hålla reda på koordinater som skall användas när vi beskär bilden så lägger vi in fyra stycken gömda fält som ska hålla dessa värden. Så inom form-taggarna i vår aspx-fil lägger vi in följande element

<img src="flowers.jpg" id="crop" alt="JCrop example" /> 
<asp:HiddenField runat="server" ID="X1" /> 
<asp:HiddenField runat="server" ID="Y1" /> 
<asp:HiddenField runat="server" ID="X2" /> 
<asp:HiddenField runat="server" ID="Y2" /> 

Nästa steg är att aktivera själva plugin:en, och detta görs genom följande kodrader som läggs in i head-taggen under de script-taggar som vi lade in tidigare

<script type="text/javascript"> 
$(document).ready(function() { 
$('#crop').Jcrop({ 
     onChange: setCoords, 
     onSelect: resizeImage 
     }); 
}); 
// Denna funtion sparar de valda koordinterna i dolda element 
// så vi kan använda dem sedan för att skala om "croppa" vår bild 
function setCoords(c) { 
     $('#<%=X1.ClientID %>').val(c.x); 
     $('#<%=Y1.ClientID %>').val(c.y); 
     $('#<%=X2.ClientID %>').val(c.x2); 
     $('#<%=Y2.ClientID %>').val(c.y2); 
}
// Denna metod postar formuläret, vill du inte att det skall postas automatiskt kan du 
// ändra till en knapp 
function resizeImage() { 
     $('#form1').submit(); 
} 
</script> 

Först så aktiverar vi plugin:en så att den fungerar på vår bild med id=crop, och tillsammans med detta så anger vi två metoder, en som körs hela tiden då vi håller på och markerar ytan på bilden där vi vill beskära och sparar ner dessa till våra dolda fält. Eftersom .NET skapar egna ID:n på sina element så måste vi använda elementid.ClientID för att få det genererade ID:t. Den andra metoden har jag kallat resizeImage och postar helt enkelt formuläret.

När detta är klart kan du testköra sidan och se att bilden visas samt att du kan markera ytor på bilden och att formuläret postas när du släpper muspekaren. Givetvis händer inget än då vi inte skapat denna funktionalitet än, men det är nästa steg.

Öppna kod-editorn för din aspx-fil och i page_load så talar vi om att vi endast vill utföra något om det är en postback som sker.

// Om det är en postback som sker så har formuläret postats och vi
"croppar" bilden 
if (IsPostBack) 
{ 
     // Vi skickar med våra värden från våra gömda element 
     CropImage(Convert.ToInt32(X1.Value), Convert.ToInt32(Y1.Value), 
               Convert.ToInt32(X2.Value), Convert.ToInt32(Y2.Value)); 
} 

CropImage är en metod som jag har skapat, detta för att göra koden lite tydligare. Som jag sa tidigare så kollar vi om det är en postback och om så är fallet så anropar vi metoden CropImage och skickar med alla koordinater. Själva metoden CropImage är inte så avancerad den heller, utan ser ut som nedan. Det du måste göra för att det ska fungera är att importera System.Drawing. Då klassen Image finns i flera namespaces så har jag valt att sätta ett alias på System.Drawing och det gör man genom att skriva using SD = System.Drawing; när man importerar namespacet. På så vi kan jag skriva SD.Image istället för System.Drawing.Image överallt där jag vill använda det.

// Denna metod hanterar själva "croppningen" av bilden
private void CropImage(int x, int y, int x2, int y2)
{
    // Vi laddar in våran bild.
    using(SD.Image i = SD.Image.FromFile(Server.MapPath("") + @"\flowers.jpg"))
    {
        // Sedan skapar vi en bitmap som vi kan rita på
        using(SD.Bitmap b = new SD.Bitmap(x2-x, y2-y))
        {
            b.SetResolution(i.HorizontalResolution, i.VerticalResolution);
            // Sedan skapar vi ett graphics-objekt
            using(SD.Graphics g = SD.Graphics.FromImage(b))
            {
                g.DrawImage(i, new SD.Rectangle(0, 0, x2 - x, y2 - y), x, y, 
                            x2 - x, y2 - y, SD.GraphicsUnit.Pixel);
                b.Save(Server.MapPath("") + @"\thumbs\" + Guid.NewGuid().ToString() 
                       + ".jpg", i.RawFormat);
            }
        }
}

Detta visar hur du på ett väldigt enkelt sätta kan croppa bilder, och koden ovan är nästan enklast möjligast och öppen för förbättringar, men det är upp till den intresserade :)

Hela artikeln kan laddas hem här: jcrop.zip (48,35 kb)

Uploadify är en plugin till jQuery som gör det extremt enkelt att skapa ett fint uppladdningsformulär. Tekniken bygger på javascript, flash samt valfritt serverspråk. Här kommer vi givetvis att hålla oss till ASP.NET/C# för att åstadkomma själva sparandet av den uppladdade filen.

Det första vi måste göra är att ladda hem själva plugin:en. Detta gör du från nedanstående webbplats.

http://www.uploadify.com/download/

När du laddat hem pluginen så kan du packa upp alla filerna till din dator.

Nästa steg är att skapa en ny ASP.NET webbplats i Visual Studio. När webbplatsen är skapad så skapar vi några mappar för att hålla lite ordning på våra olika filer. De mappar jag har skapat är scripts, handler samt en kallad upload som kommer att vara den katalog som vi laddar upp våra filer till.

När detta är klart så kopierar vi filerna

jquery-1.3.2.min.js
jquery.uploadify.js

till mappen scripts samt lägger filerna

cancel.png
uploader.swf
uploadify.css

i root-katalogen för vår webbplats.

Om Visual studio inte skapa en aspx-fil åt dig så skapar du denna och öppnar upp den. Det första vi måste göra här är att inkludera javascript-filerna. Detta görs genom script-taggar i head-taggen.

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script src="scripts/jquery.uploadify.js" type="text/javascript" language="javascript"></script>

Skapa sedan upp ett valfritt element på din webbsida med valfritt ID. Jag skapade en div som jag valde att sätta ID=Uploader på. Detta ID ska vi sedan använda när vi skapar själva uppladdningsformuläret med hjälp av Uploadify. I body skriver vi alltså

<div id="Uploader">
    
</div>

I head-taggen ska vi sedan "aktivera" själva pluginen och göra om vår div-tagg till ett uppladdningsformulär. Detta görs genom följande enkla kodrader.

<script type="text/javascript">
        $(document).ready(function() {
            $('#Uploader').fileUpload({
            'script': 'handler/upload.ashx',
            'auto': true
            });
        });
</script>

Det vi gör här är att säga till att direkt som DOM:en är redo så tar vi vårat element med ID=Uploader och gör om det till ett uppladdningsformulär med hjälp av pluginen. När du kommit så här långt kan du kolla på din skapade webbsida i webbläsaren och se att det skapas en knapp med texten browse. Dock går det ännu inte att ladda upp något då vi inte skapat filen som tar emot filen och sparar den på hårddisken. Detta ska vi göra nu så nästa steg är att skapa en fil vid namn upload i mappen handler och denna fil ska vara en generic handler (ashx). Koden som krävs för att spara själva filen är väldigt liten och ser ut på följande sätt

// Ta emot filen
HttpPostedFile file = context.Request.Files["Filedata"];

// Först tar vi fram mappen som filen skall sparas i
string targetDirectory = Path.Combine(context.Request.PhysicalApplicationPath, "upload");
// och sedan lägger vi till den uppladdade filens namn till sökvägen
string targetFilePath = Path.Combine(targetDirectory, file.FileName);

// Sedan skriver vi filen till disk
file.SaveAs(targetFilePath);
// och skickar tillbaka 1
context.Response.Write("1");

Det var allt som krävdes för att ladda upp en fil med hjälp av Uploadify. Om du får problem så kontrollera att du har alla behörigheter som krävs för att få spara filer på disk. Givetvis finns det mängder med inställningar du kan göra för plugin:en, och dessa finns dokumenterade på Uploadify:s hemsida för den intresserade.

Vill du se alla filerna som hör till artikeln så kan du ladda ner alltihopa här bredvid. Uploadify.zip (45,91 kb)

Regular Expressions används för att hitta vissa mönster i en textmassa och ta ut de delar som matchar detta mönster. T.ex. så kan du använda det i en när du skapar en gästbok eller forum för att skapa dina egna taggar vilket ger dig kontroll över vilken html som är tillåten. Du har säkert många gånger sett när du skrivit i ett forum att när du vill ha fet text så används [b]Text som skall bli fet[/b]. Denna text kan man sedan med hjälp av Regular Expressions hitta och ersätta med html-motsvarigheten så att den skriver ut <b>Text som skall bli fet</b> istället.

Jag ska börja med att visa hur du gör en sök och ersätt enligt ovan. Börja med att dra ut en literal-kontroll som du sätter ID=litResult på. Sedan så går vi över till kod-filen där vi börjar med att importera namespace:n som vi behöver

using System.Text.RegularExpressions;

och i Page_Load skriver vi in nedanstående kod.

// Här deklarerar vi vårat pattern, samt lägger vill så att vi inte bryr oss om 
// användaren använder stora eller små bokstäver. 
Regex rxPattern = new Regex(@"\[b\](.*)?\[/b\]", RegexOptions.IgnoreCase); 
// Här säger vi att vi vill använda vårat Regex-mönster och göra en replace. 
// Texten som vi ska söka igenom är den första strängen och den andra strängen är vad vi ska 
// ersätta med. $1 betyder att den ska ta den första träffen vårat mönster får och ersätta med. 
litResult.Text = rxPattern.Replace("[b]Text som skall bli fet[/b]", "<b>$1</b>"); 

Om du nu kontrollerar källkoden så kommer du att se att <b>Text som skall bli fet</b> har skrivits ut, detta tack vare vårat mönster som hittade texten vi var ute efter och ersatte den med våran valda text.

Nästa exempel ska visa hur du tar ut valda delar ur en text och skriver ut dessa. Exemplet jag ska visa här tar antalet inloggade på http://www.ASPSidan.se.
Liksom föregående exempel så drar vi ut en literal-kontroll som vi ger ID:t litResult samt importerar namespacet, sedan i Page_Load skriver vi följande kodsnutt.

// För att göra det lite roligare så kommer vi att använda en metod i klassen WebClient för 
// att hämta hem den text vi ska använda för våran utsökning från ASPSidan. 
// Metoden vi ska använda heter DownloadString 
WebClient wcClient = new WebClient(); 
        
// Det första vi gör är att deklarerar vårat mönster som vi kommer att använda för 
// att få fram antalet inloggade 
Regex rxPattern = new Regex(@"inloggade:\s(\d*)?"); 
// Vi sparar sedan vårat resultat i ett Match-objekt 
Match mCount = rxPattern.Match(wcClient.DownloadString("http://www.aspsidan.se")); 
// Vi skriver sedan ut vårat resultat 
litResult.Text = mCount.Groups[1].Value; 
wcClient.Dispose(); 

Gör du utsökningar som får mer än ett resultat så använder du MatchCollection istället samt metoden Matches. Ett exempel visas nedan

MatchCollection mcMatches = rxPattern.Matches("text här som mönstret skall testas emot");

Du har här fått en liten kort introduktion till vad du kan använda Regular Expressions och de är ett mycket kraftfullt verktyg när du behöver hitta valda delar ur en textmassa. Då jag själv inte är nån stjärna på att knåpa ihop dessa Regular Expressions så har jag valt att inte försöka förklara hur man gör detta, men du kan läsa mer om det samt hitta många färdiga RegExp:s på

http://regexlib.com/ samt  http://www.regular-expressions.info/

Om tiden tillåter ska jag försöka vara lite mer aktiv på sidan än jag varit på sistone.

Det var ett tag sedan det skedde en uppdateringen, vilket beror på att jag har haft alldels för mycket att göra. Men här kommer i varje fall ett nytt inlägg och där tänkte jag ta upp hur man använder MySQL tillsammans med .NET.

Det första vi måste göra är att ladda hem senaste MySQL Connectorn för .Net som du hittar här: http://dev.mysql.com/downloads/connector/net/

Jag valde att ladda hem "Binaries, no installer (.zip)". Börja med att packa upp denna fil och kom ihåg var du lägger filerna. Nästa steg är att som vanligt skapa ett webbprojekt i den utvecklingsmiljö du använder. Nästa sak som vi ska göra är att lägga till en referens till MySql-connectorn så att vi kan komma åt de klasser som den innehåller. Detta gör du genom att högerklicka på ditt projekt, och väljer "Add Reference". Klicka sedan på Browse och navigera vidare till den mapp där du packade upp MySql-connectorn. Öppna sedan mappen Bin markera MySql.Data.dll och klicka sedan på OK. Så, du har nu lagt till en referens till MySql.Data.dll och allt är klart för användning.

Om du inte har det, skapa en ny Web Form och välj "Place code in separate file". Öppna sedan filen i kod-läge. Det första vi ska göra är att tala att vi vill använda MySql-klasserna som vi just lade till en referens till. Detta gör du genom att lägga till följande högst upp i kod-filen.

using MySql.Data.MySqlClient;

När detta är gjort så skriver vi in följande kod i Page_Load

// Först skapar vi ett objekt som tar hand om kopplingen till databasen 
String strConString = "Server=serveradress;Database=databasnamn;Uid=användarnamn;Pwd=lösenord;";
MySqlConnection objCon = new MySqlConnection(strConString); 
// Nästa steg är att skapa ett MySqlCommand-objekt som utför själva frågan mot databasen. 
MySqlCommand objCom = new MySqlCommand("SELECT count(*) FROM tbl_users", objCon); 
// Innan vi kan köra några frågor mot databasen måste vi öppna kopplingen 
objCon.Open(); 
// Sedan kör vi frågan och skriver ut resultatet. När SQL-frågan bara returnerar ett resultat 
// så använder man med fördel metoden ExecuteScalar() vilken returnerar just det första 
// resultatet. Vid en insert, update, delete, alter eller liknande frågor som inte returnerar  
// något så används oftast metoden ExecuteNonQuery(). När du vill ha en datareader, vilket 
// är ett objekt som innehåller hela resultatet av SQL-frågan, vilket sen kan bindas till någon 
// data-kontroll så används metoden ExecuteReader(). 
Response.Write(objCom.ExecuteScalar().ToString()); 
// Sedan stänger vi vår koppling och "dödar" alla objekt som vi har skapat 
objCon.Close(); 
objCon.Dispose(); 
objCom.Dispose(); 

Observera att du måste redigera "connectionstringen" så att den kan ansluta mot din server. Även själva SQL-frågan behöver så klart modifieras så att den går att köra mot din databas.

Detta var en riktig crash course i hur man använder MySql tillsammans med ASP.NET. Hoppas du har haft någon nytta av denna artikel.

Har du något tips på vad jag kan skriva om så tar jag emot dessa mer än gärna. Observera dock att jag inte kan ta på mig stora projekt, utan det är mer om det är nån småsak som du tycker det vore bra att jag tog upp.

På återseende.

I detta tips tänkte jag visa hur du enkelt skapar länkar i din Calendar-kontroll. Detta kan vara användbart vid t.ex. bloggar eller andra tillfällen då du vill visa att det finns något speciellt vid ett visst datum. Det första vi ska göra är att skapa oss en ny "web site". Dra sedan ut en Calendar-kontroll på sidan. I denna kontroll sätter du sedan OnDayRender-eventet till DayRender.

<asp:Calendar ID="calBlogg" runat="server" OnDayRender="DayRender"></asp:Calendar> 

Nästa steg är att skriva koden för själva eventet OnDayRender, så vi hoppar genast vidare till Code-läget där vi använder följande kod för att skapa en länk på datumet som kommer fem dagar fram i tiden.

protected void DayRender(object sender, DayRenderEventArgs e) 
{ 
   // Detta är bara ett exempel, egentligen bör det kontrolleras mot databas eller något 
   // liknande om det används i en blogg eller något. 
   HyperLink hl; 
   // Vi börjar med att hämta det datum som renders just nu med e.Day.Date.ToShortDateString(), 
   // detta ger oss ett datum på formen yyyy-MM-dd, i varje fall om vi är i Sverige. 
   // Detta kan du använda för att göra en sökning mot din databas eller vad du nu har för 
   // datakälla för att se om det finns något på detta datum. I detta exempel kollar vi bara 
   // om det är samma som datumet som är fem dagar fram i tiden från idag.
   if(e.Day.Date.ToShortDateString().Equals(DateTime.Today.AddDays(5).ToShortDateString())) 
   { 
        hl = new HyperLink(); 
        // När vi har fått en träff så sätter vi vilken URL som vi ska skickas till när vi 
        // klickar på detta datum. 
        hl.NavigateUrl = "http://www.aspsidan.se"; 
        // Inte helt oväntat sätter vi dagens siffra som text till våran hyperlink-kontroll. 
        hl.Text = e.Day.DayNumberText; 
        // Vi tar bort kontrollen som redan finns där 
        e.Cell.Controls.RemoveAt(0); 
        // Och istället lägger vi dit vår egen hyperlink-kontroll 
        e.Cell.Controls.Add(hl); 
        // Sedan lägger vi på lite bakgrundsfärg så att det syns att det är något 
        //speciellt denna dag. 
        e.Cell.BackColor = System.Drawing.Color.PowderBlue; 
   }        
} 

Som alltid kan du se ett live-demo eller ladda ner scriptet för en närmre kik.

Demo: http://aspdotnet.nu/upload/demo/Calendar/
Script: http://aspdotnet.nu/upload/script/calendar.rar

Det var allt för denna gång. På återseende.

I denna artikel tänkte jag ta upp hur du skapar en enkel user control och hur du sedan använder denna. I artikeln så kommer vi att skapa en RSS-läsare som du sedan kan infoga på din hemsida.

Börja som vanligt med att skapa en ny "web site". Nästa steg är att lägga till en user control, detta gör du genom att höger-klicka på ditt projekt och välj "Add New Item". Leta sedan upp "Web User Control" och döp denna till "FeedReader" och se till så att "Place code in separate file" är ikryssad.

När du utfört dessa steg så öppnar du din nya användarkontroll (FeedReader.ascx) i Source-läget och drar ut en asp:Panel som du döper till pFeed. Det ska då bli något liknande det nedan.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeedReader.ascx.cs" 
Inherits="FeedReader" %> 
<asp:Panel runat="server" ID="pFeed"></asp:Panel>   

Detta är allt som krävs i Source-läget i denna artikel och vi går nu direkt vidare till Code-läget.

Där ska vi börja med att deklarera några variabler som skall användas för att hålla de värden som vi skickar in till våran användarkontroll.

// Adressen till feed:en 
private String feedurl; 
// Antalet poster från feeden som skall visas. Default är det 10, för bredden på 
// feeden så är default 300 
private int numofposts = 10, width = 300; 

Sedan hoppar vi in i Page_Load där vi börjar med att kontrollera så att vi angett en width som är större än 0. Observera dock att vi inte behöver ange något, då den har 300  som default.  Nästa sak är att kontrollera så att vi verkligen har angett något i urlen. Observera att vi inte kontrollerar så att det är en giltig URL, utan vi kontrollerar bara så att den innehåller något. Jag har det inte med i här, men du bör ha try-catch med när du kodar själv. Detta har jag utelämnat här för enkelhetens skull, men finns givetvis med i script-filen som du kan ladda hem.

// Lite grundläggande felhantering så att vi får trevliga felmeddelanden om vi 
// antingen anger en width som är mindre än 0 eller inte anger någon text i URL:en. 
if (width <= 0) 
     throw new Exception("Du måste ange en bredd större än 0"); 

if (string.IsNullOrEmpty(feedurl)) 
     throw new Exception("Du måste ange en URL till feeden du vill läsa"); 

Nästa sak vi ska göra är att sätta våran panel antingen till default-storleken om vi inte satt något storlek eller den storlek som vi valt.

// Sätter våran panels bredd till antingen default-värdet eller det värde vi valt 
// om vi satt något. 
// Vi talar också om att enheten ska vara pixlar. 
pFeed.Width = Unit.Pixel(width); 

Efter detta så kommer själva hämtandet av RSS:en, vilken vi hämtar in i ett XmlDocument-objekt som tillåter oss att läsa ur den information vi vill ha.

// Skapar ett XmlDocument-objekt som skall innehålla våran feed 
XmlDocument xDoc = new XmlDocument(); 

// Laddar vårat objekt med feeden från den URL som vi bifogat 
xDoc.Load(feedurl); 

// Denna hämtar ut alla item-element ur feeden
XmlNodeList items = xDoc.SelectNodes("rss/channel/item");

Den sista raden talar om att vi ska gå in i elementet rss, gå igenom channel och hämta alla item-element som vi träffar på. I nästa steg så skapar vi några Label och ett HyperLink-objekt som skall användas för att skriva ut datan som hämtas från RSS-feeden. Vi kontrollerar även om våran samling med "item"-element är mindre än det antal poster vi vill hämta, är den det så säger vi att vi bara ska hämta så många poster som finns i "item"-samlingen.

Label pubdate, description; 
HyperLink link; 

// Här kollar vi hur många poster vi ska loopa. Innehållar våran XmlNodeList ett 
// mindre antal items 
// än vi har valt så sätter vi antalet den ska loppa till detta. 
if (items.Count <= numofposts) 
    numofposts = items.Count; 

Det sista vi ska göra i Page_Load är att loopa igenom våran samling med "item"-element och skriva ut dem för användaren.

// Loopar igenom våran samling med noder             
for(int i = 0; i < numofposts; i++) 
{ 
           // Kollar så att det är ett element vi har 
           if (items[i].NodeType == XmlNodeType.Element) 
           {
             // Skapar en hyperlink samt två labels 
             link = new HyperLink(); 
             pubdate = new Label(); 
             description = new Label(); 

             // Här sätter vi lite formatering på våran label som innehåller 
             // publiceringsdatumet 
             pubdate.Font.Bold = true; 
             pubdate.Font.Size = FontUnit.XSmall; 
             pubdate.Style.Add("padding-left", "5px;");                         

             // Lägger till dessa kontroller till panelen 
             pFeed.Controls.Add(link); 
             pFeed.Controls.Add(pubdate); 
             pFeed.Controls.Add(description); 

             // Sätter värdene på våra kontroller. Vi hämtar ut en enskild 
             // node med metoden SelectSingleNode och tar ut texten med egenskapen 
             // InnerText 
             link.Text = items[i].SelectSingleNode("title").InnerText; 
             link.NavigateUrl = items[i].SelectSingleNode("link").InnerText; 
             pubdate.Text = items[i].SelectSingleNode("pubDate").InnerText + "<br />"; 
             description.Text = items[i].SelectSingleNode("description").InnerText + "<hr />"; 
     }
} 

Efter att detta är gjort så är vi klara med Page_Load, och vi går nu ut från Page_Load. Under denna ska vi ska nu bara definiera de egenskaper som våran kontroll ska ha. Hur dessa ser ut ser du i kodstycket nedan.

// Dessa är våra egenskaper i våran feed som vi kan sätta 

// URL till feeden
public String FeedURL
{
    set { this.feedurl = value; }
    get { return this.feedurl; }
} 

// Antalet poster som vi vill hämta
public int NumberOfPosts 
{ 
    set { this.numofposts = value; }
    get { return this.numofposts; }
} 

// Bredden på själva feeden 
public int Width 
{ 

    set { this.width = value; } 
    get { return this.width; } 
} 

Detta var det sista vi skulle göra i våran användarkontroll. Gå nu till Default.aspx och hoppa in i Source-läget. Det första vi ska göra är att "registrera" våran kontroll så att den går att använda. Detta gör genom att du skriver följande sak i en rad under page-direktivet på sidan

<%@ Register TagName="Reader" TagPrefix="Feed" Src="~/FeedReader.ascx" %> 

När detta är gjort kan du använda din nya kontroll som vilken kontroll som helst. Se exempel nedan.

<Feed:Reader runat="server" FeedURL="http://www.aspsidan.se/_rss/latest_rss.xml" 
NumberOfPosts="5" Width="500" /> 

Detta var allt jag hade om att skapa en User-Control. Hoppas du fått lära dig något och återkom gärna för fler exempel.

Som alltid kan du hitta både ett live-demo samt hela scriptet för dig som vill ta hem och kika på det.

Demo: http://aspdotnet.nu/upload/demo/UserControl/
Script: http://aspdotnet.nu/upload/script/usercontrol.rar

I denna artiklel tänkte jag ta upp de valideringskontroller som finns i .NET och visa exempel på hur dessa används. I tabellen nedan så listas alla valideringskontroller och deras funktion.

RequiredFieldValidator
Denna kontrollerar så att fältet verkligen innehåller något

CompareValidator
Jämför det inmatade värdet antingen mot ett statiskt värde eller mot en annan kontrolls värde.

RangeValidator
Kontrollerar så att ett värde befinner sig inom ett visst intervall. Det som går att jämföra är siffror, bokstäver och datum.

RegularExpressionValidator
Låter dig använda ett reguljärt uttryck för att kontrollera innehållet som användaren matar in. Observera att denna kontroll inte kan validera tomma inmatningar, utan då måste man använda en RequiredFieldValidator tillsammans med RegularExpressionValidator.

CustomValidator
Låter dig själv skapa logiken för valideringen

ValidationSummary
Denna kontroll utför ingen validering i sig, utan samlar alla kontrollers resultat i en sammanfattning.

Detta var de kontroller som finns. En sak som är bra att veta med kontrollerna är att de alltid utför server-side validering, samt client-side validering om klientens browser kan hantera DHTML.

Det var en snabb sammanfattning av de valideringskontroller som vi har till hands att arbeta med, nu är det dags att visa hur det går till att använda dessa. Vi börjar med att dra ut några textboxar samt en knapp, se exempel nedan.

Förnamn: <asp:TextBox runat="server" ID="txbFname"></asp:TextBox> 
<br /> 
Efternamn: <asp:TextBox runat="server" ID="txbLname"></asp:TextBox> 
<br /> 
E-post: <asp:TextBox runat="server" ID="txbEmail"></asp:TextBox> 
<br /> 
Ålder: <asp:TextBox runat="server" ID="txbAge"></asp:TextBox> 
<br /> 
<asp:Button runat="server" ID="btnValidate" Text="Validera"></asp:Button> 

Detta var vårat grundformulär som vi kommer att utföra våran validering mot. Nästa steg är att dra ut några valideringskontroller, och de vi ska använda i detta exempel är tre stycken RequiredFieldValidator, en RegularExpressionValidator, CompareValidator, RangeValidator. Var du lägger dessa kontroller spelar ingen roll, jag brukar lägga de valideringskontroller som hör till en kontroll under denna eller så samlar jag alla valideringskontroller under alla inmatningsfält. När vi har dragit ut våra valideringskontroller så kommer vårat formulär att se ut något i stil med. Med detta kontroller på plats kan det se lite grötigt ut, se exempel nedan.

Förnamn: <asp:TextBox runat="server" ID="txbFname"></asp:TextBox> 

<asp:RequiredFieldValidator ID="rfvFname" runat="server" ControlToValidate="txbFname" 
ErrorMessage="Du måste ange ditt förnamn"></asp:RequiredFieldValidator> 

<br /> 

Efternamn: <asp:TextBox runat="server" ID="txbLname"></asp:TextBox> 

<asp:RequiredFieldValidator ID="rfvLname" runat="server" ControlToValidate="txbLname" 
ErrorMessage="Du måste ange ditt efternamn"></asp:RequiredFieldValidator> 

<br /> 

E-post: <asp:TextBox runat="server" ID="txbEmail"></asp:TextBox> 

<asp:RegularExpressionValidator ID="rxvEmail" runat="server" ControlToValidate="txbEmail" 
ValidationExpression=".*@.*\..*" ErrorMessage="Ogiltig e-postadress">
</asp:RegularExpressionValidator> 

<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txbEmail" 
ErrorMessage="Du måste ange en e-postadress"></asp:RequiredFieldValidator> 

<br /> 

Ålder :<asp:TextBox runat="server" ID="txbAge"></asp:TextBox> 

<asp:CompareValidator ID="cvAge" runat="server" ControlToValidate="txbAge" ValueToCompare="23" 
ErrorMessage="Du är inte lika gammal som Reager"></asp:CompareValidator> 

<asp:RangeValidator ID="rvAge" runat="server" ControlToValidate="txbAge" MinimumValue="15" 
MaximumValue="25" ErrorMessage="Du måste vara mellan 15 och 25 år"></asp:RangeValidator> 

<asp:Button runat="server" ID="btnValidate" Text="Validera"></asp:Button>

Jag ska nu ta upp de egenskaper som är gemensamma för samtliga av dessa valideringskontroller

ControlToValidate - Den kontroll som vi ska utföra valideringen mot.
ErrorMessage - Det meddelande som skall skrivas ut om valideringen misslyckas.
ValidationGroup - Låter dig skapa "grupper" som kan valideras var för sig. Sätts både på valideringskontrollen samt kontrollen som valideras.
SetFocusOnErrror - Sätter fokus på kontrollen om valideringen misslyckas.
Display - Talar om hur kontrollen skall visas. (none - visar inget, bra tillsammans med validationsummary, static - visar meddelande vid fel reserverar plats på sidan, 
                dynamic - visar felmeddelande, men reserverar ingen plats på sidan).
EnableClientScript - Sätts till false om du inte vill ha validering hos klienten

Sedan så har vaje kontroll sina egna unika egenskaper.

RequiredFieldValidator
InitialValue - Om den kontroll som skall valideras har ett default-värde kan du ange det här så att valideringen misslyckas om det är samma värde när valideringen körs.

RegularExpressionValidator
ValidationExpression - Det reguljära uttryck som skall användas vid valideringen

CompareValidator
ValueToCompare - Detta anges om du vill jämföra med ett statiskt värde
ControlToCompare - Om du istället vill jämföra mot en annan kontroll använder du denna tillsammans med kontrollens ID
Operator - Används för att tala om på vilket sätt du vill jämföra de två värdena

RangeValidator
MaximumValue - Det största värde som den validerade kontrollen får ha
MinimumValue - Det minsta värde som kontrollen får ha
Type - Vilken typ av värde det är som matas in (currency, double, integer, string, date)

Det var ett litet exempel med de fyra av valideringskontrollerna, och jag tänkte göra ett eget litet åt CustomValidator. I detta exempel, som ska göras på samma sida som föregående exempel så kommer jag också att skapa en egen ValidationGroup så att det formuläret kan valideras för sig självt. Allt vårat nästa exempel ska innehålla är en textbox, en knapp och en CustomValidator.

Är Reager bäst? (ja) <asp:TextBox runat="server" ID="txbCustom" ValidationGroup="Custom">
</asp:TextBox> 

<br /> 

<asp:Button runat="server" ID="btnCustom" Text="Validera (Custom)" ValidationGroup="Custom" /> 
<asp:CustomValidator ID="csmvCustom" runat="server" ControlToValidate="txbCustom" 
ErrorMessage="Fel svar" OnServerValidate="Validate" ValidationGroup="Custom">
</asp:CustomValidator>

Nästa steg är att skapa våran valideringslogik. Egenskapen OnServerValidate bestämmer vad denna metod skall heta, och som ni ser så har jag valt att kalla min för valideta. Hoppa till kod-läget och skapa en metod som ser som nedan.

protected void Validate(object sender, ServerValidateEventArgs se)
{
   // Vi utför server-validering, och kontrollerar om värdet som matats in
   // är ja 
   se.IsValid = se.Value.Equals("ja"); 
}

Det enda denna gör är att sätter valideringen som OK om det inmatade värdet är "ja".

Om du nu provar att validera så kommer du att se att den klagar om man matar in ett annat värde än "ja". Vi ska göra lika här och ta upp de unika egenskaperna för CustomValidator. Du märker också att den inte klagar på något i det övre formuläret när du postar det nedre, detta tack vare ValidationGroup, som gör att man kan ha flera grupper av kontroller som valideras av olika knappar.

CustomValidator
ClientValidationFunction - Om du även vill validera på klienten så anger du namnet på metoden som används till detta
ValidateEmptyText - Sätts till true om du vill validera även om ingen inmatning sker.

Det sista vi ska göra är att lägga till en ValidationSummary till det övre samlingen av kontroller. Denna kan du lägga var du vill, jag väljer att lägga den under min knapp. Sedan sätter du en ValidationGroup på samtliga kontroller som hör till det övre formuläret. Visar en liten del nedan.

Ålder :<asp:TextBox runat="server" ID="txbAge" ValidationGroup="validate"></asp:TextBox> 
<asp:CompareValidator ID="cvAge" runat="server" ControlToValidate="txbAge" ValueToCompare="23" 
ErrorMessage="Du är inte lika gammal som Reager" ValidationGroup="validate">
</asp:CompareValidator> 
<asp:RangeValidator ID="rvAge" runat="server" ControlToValidate="txbAge" MinimumValue="15" 
MaximumValue="25" ErrorMessage="Du måste vara mellan 15 och 25 år" ValidationGroup="validate">
</asp:RangeValidator> 
<asp:Button runat="server" ID="btnValidate" Text="Validera" ValidationGroup="validate">
</asp:Button> 
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="validate" />

När du nu provar att validera så kommer det att skrivas ut en lista på de fel som uppstått. Om du bara vill ha listan, men inte att texten även skall skrivas ut av valideringskontrollerna så sätter du Display="None" på samtliga valideringskontroller. Vår vana trogen skall vi lista alla unika egenskaper för ValidationSummary nedan.

ValidationSummary
DisplayMode - Hur sammanfattningen skall visas (bulletlist, list, singleparagraph)
HeaderText - Rubriken på sammanfattningen
ShowMessageBox - Sätts till true om vi vill att sammanfattningen skall visas i en javascript-alert
ShowSummary - Talar om huruvida vi vill visa vår sammanfattning

En demo finns här: http://aspdotnet.nu/upload/demo/ValidationControls/

Det var valideringskontroller i ett nötskal, vill du ha mer information så finns det massor på nätet. Lycka till.

Felhantering är en inbyggd mekanism  i .NET framework och används för att upptäcka och hantera fel som uppstår när kod körs. Dessa fel kan uppstå p.g.a. en massa olika orsaker, felaktig kod, logikfel m.m.

I C# så finns det tre keywords, try, catch, finally som används för att sköta felhanteringen. Inom try så lägger du koden du vill hantera, i catch så fångar du felet och hanterar det och finally används om du vill göra något oavsett om ett fel uppstod eller inte. Se exempel nedan.

try 
{ 
 // Här skriver vi kod som kan generera ett fel 
} 
catch(Exception) 
{ 
 // Inom catch så hanterar vi felet 
} 
finally 
{ 
 // Hit kommer vi oavsett om det uppstår något fel eller inte 
}

Om det uppstår något fel inom try-blocket så hamnar vi i catch och sedan i finally där vi kan utföra eventuell städning av objekt, stängning av databaskopplingar eller vad det nu kan vara. Klassen Exception är basen för alla Exceptions vilket innebär att vi kommer att fånga alla undantag som kastas där oavsett vilken typ det är av.

Vill du göra olika saker beroende på vilket fel som uppstått så kan du ha flera catch-block. Se exempel nedan.

try 
{ 
 // Här skriver vi kod som kan generera ett fel 
} 
catch(NullReferenceException) 
{ 
 // Skulle det uppstå ett NullReferenceException så hamnar vi här 
} 
catch(Exception) 
{ 
 // Annars hamnar vi här 
} 
finally 
{ 
 // Hit kommer vi oavsett om det uppstår något fel eller inte 
}

Vi ska i nästa steg kika på ett riktigt exempel där det uppstår ett fel.

try 
{ 
   int x = 0; 
   Response.Write("15/0 blir " + (15 / x)); 
} 
catch (Exception ex) 
{ 
   Response.Write("Följande fel uppstod: " + ex.Message); 
}

Denna kodrad kommer att generera felmeddelandet "Följande fel uppstod: Attempted to divide with zero." och talar om för oss att vi försökt dela ett tal med noll vilket så klart inte går. Observera att jag skapat variabeln ex i min catch för att kunna skriva ut felmeddelandet. Anledningen till att jag deklarerat variabeln x är att det annars kommer att uppstå ett kompileringsfel då det inte är tillåtet att dela med 0.

Varför ska man då använda felhantering? Exceptions ger dig ett mycket kraftfullt verktyg genom vilket du kan kommunicera de fel som uppstår på ett bra sätt istället för att användarna möts av en krashad sida. Du får även möjlighet att göra dig av med dina objekt vid eventuella fel så inte dessa ligger kvar och tar upp minne.

Detta var en riktig snabblektion i felhantering. Hoppas du fått ut något av det iallafall.

I denna artikel så tänkte jag visa hur man enkelt laddar upp en bild samt skapar en thumbnail av den i ASP.NET

Det första vi ska göra är att skapa ett nytt webbprojekt. I detta webbprojekt så ska det finnas en katalog som heter images och i denna katalog ska du skapa en katalog som heter thumbs. Glöm inte att sätta skrivrättigheter på dessa mappar.  Sedan ska du dra ut de kontroller vi kommer att använda. Dessa kontroller listas nedan

1. <asp:FileUpload ID="fuImage" runat="server" /><asp:Button ID="btnUpload" runat="server" Text="Ladda upp" />
2. <br />
3. <asp:Label ID="lblStatusMessage" runat="server"></asp:Label>

Som du kanske ser så har inte våran knapp något Click-event, och något sådant behövs heller inte utan att sköts
via Page_Load.

Om vi går till Code-läget och hoppar till page-load så är det första vi ska göra att kolla om det är en Postback samt
om våran fileupload innehåller någon fil. Detta görs genom följande kodrader

// Börja med att kolla om det är en Postback
1.         if (IsPostBack)
2.         {
3.             // Om det är en postback så kollar vi om vi har en fil
4.             // Har vi det så tar vi hand om den
5.             if (fuImage.HasFile)
6.             {

Som du ser så är det inga konstigheter här, utan vi kollar först om det är en Postback och sedan om vi har en fil på ingång.
Eftersom vi inte vill tillåta annat än bilder så kontrollerar vi detta

1.                 // Vi tar med hjälp av metoden GetExtension reda på vilken filtyp
2.                 // det är då vi vill ha möjlighet att begränsa filtyperna till olika
3.                 // bildformat då det är bilduppladdning vi håller på med. För att förenkla
4.                 // kollen senare av filändelsen så gör vi om den så att den bara innehåller
5.                 // små bokstäver med hjälp av metoden ToLower()
6.                 String extension = System.IO.Path.GetExtension(fuImage.FileName).ToLower();
7.                 // Sedan skapar vi en array med de filtyper som vi vill godkänna
8.                 String[] extensions = { ".gif", ".jpeg", ".jpg" };
9.                
10.                 // Denna variabel sätts till true om det är en tillåten filtyp vi har att göra
11.                 // med.
12.                 bool allowed = false;
13.                 // Vi loopar igenom våran array med tillåtna filändelser                
14.                 foreach (String ex in extensions)
15.                 {
16.                     // Om vi får en match betyder det att våran fil är tillåten och allowed sätts till true
17.                     if (ex.Equals(extension))
18.                         allowed = true;
19.                 }

Koden förklarar sig självt väldigt bra tycker jag och vi hoppar direkt till nästa del, vilken tar upp själva sparandet av filen samt
skapandet av thumbnailen.

                // Nu kollar vi om det var en tillåten fil vi hade sparar vi den
1.                 // i mappen images, annars skriver vi bara ut ett felmeddelande
2.                 if (allowed)
3.                 {
4.                     // Vi sparar våran filnamn i en variabel innan vi använder den då vi
5.                     // vill använda den för att förminska bilden. Guid.NewGuid skapar ett så
6.                     //gott som unikt värde som kan användas då man behöver unika namn.
7.                     String filename = Guid.NewGuid() + extension;
8.                     // Sparar filen,
9.                     fuImage.SaveAs(Server.MapPath("images/") + filename);
10.                     // Efter att bilden är sparad så ska vi förminska den
11.                     // Vi börjar med att ladda in våran bild i ett Image-objekt
12.                     // med hjälp av den den InputStream som vi får av upload-kontroll
13.                     System.Drawing.Image imgImage = Bitmap.FromStream(fuImage.PostedFile.InputStream);
14.                     // För att våran bild ska ha de rätta proportionerna även efter
15.                     // förminskningen så tar vi ut höjd samt bredd från orginalbilden.
16.                     int height, width;
17.                     // Vi tar ut höjden och bredden från orginalbilden för att
18.                     // kunna kontrollera den.
19.                     height = imgImage.Height;
20.                     width = imgImage.Width;
21.                     // Här bestämmer jag att maximala höjden på den nya bilden ska vara 120 pixlar.
22.                     if (height > 120)
23.                     {
24.                         // Vi sätter bredden till 120* förhållandet mellan bredd & höjd på orginalbilden
25.                         width = 120 * width / height;
26.                         height = 120;
27.                     }
29.                     // Skapar våran thumbnail från orginalbilden med de nya värdena
30.                     imgImage = imgImage.GetThumbnailImage(width, height, null, System.IntPtr.Zero);
31.                     // Sedan sparar vi denna bild med samma namn som orginalet i katalogen thumbs som återfinns i mappen images
32.                     imgImage.Save(Server.MapPath("images/thumbs/") + filename);
33.                     // Sist men absolut inte minst så förstör vi våra objekt för att frigöra minnet
34.                     imgImage.Dispose();
35.                     fuImage.Dispose();
36.                     // Talar om att allt gick som det skulle samt visar thumbnailen
37.                     lblStatusMessage.Text = "Bild uppladdad och thumbnail skapad <img src=\"images\\thumbs\\" + filename + "\">";
38.                 }
39.                 else
40.                     lblStatusMessage.Text = "Otillåten filtyp.";
41.                    
42.             }
44.         }

Så enkelt var det att i ASP.NET både ladda upp en bild och skapa en thumbnail. Hur du väljer att presentera de uppladdade bilderna tänkte jag låta vara upp till dig. För att du ska kunna testa så finns som vanligt möjlighet att ladda ner hela projektet samt att testa det live direkt här.

Demo: http://aspdotnet.nu/upload/demo/ImageUploadWithResize/
Script: http://aspdotnet.nu/upload/script/ImageUploadWithResize.rar

I denna artikel tänkte jag gå igenom Sessions och Cookies lite snabbt.

Sessions
Att sätta en Session i ASP.NET skiljer sig inte nämnvärt ifrån hur man gör i vanlig ASP, dock
finns det vissa småskillnader i syntax som jag kommer att ta upp här.

1. // Att sätta en Session är väldigt lätt
2. // Observera dock att det är hakparenteser [] istället för vanliga paranteser när man
3. // arbetar med C#
4. Session["mysess"] = "Reager";

Inga konstigheter här, utan Sessionen sätts i princip likadant som i vanlig ASP. Att skriva ut värdet i din Session är inte heller något konstigt.

Output:
Reager

Läs mer http://msdn2.microsoft.com/en-us/library/6ad7zeeb.aspx
Läs mer http://msdn2.microsoft.com/en-us/library/03sekbw5.aspx

Cookies
Liksom med Sessions så är det inga direkta konstigheter med Cookies, utan
de fungerar nästan likadant som i vanlig ASP.

// För att skapa en Cookie så använder vi Response.Cookies
1. Response.Cookies["mycookie"]["namn"] = "Reager kan allt";
2. // Om vi inte vill att våran Cookie ska "dö" direkt så måste vi sätta ett datum som
3. // den ska gälla till. Detta görs genom att använda egenskapen Expires. Koden
4. // nedan gör så att våran Cookie gäller i 24 timmar.
5. Response.Cookies["mycookie"].Expires = DateTime.Now.AddDays(1);

Att kunna skapa en Cookie men inte kunna läsa ut värdet ur den gör ju ingen glad
så detta ska vi gå igenom i nästan kodstycke.

// För att läsa ut värdet ur en Cookie så använder vi Request.Cookies
Response.Write(Request.Cookies["mycookie"]["namn"]);

Output:
Reager kan allt

Att kunna ta bort en Cookie är ju inte heller helt fel så detta ska vi nu lära oss.

1. // Först skapar vi ett objekt av typen HttpCookie och hämtar in våran Cookie vid namn
2. // mycookie
3. HttpCookie c = new HttpCookie("mycookie");
4. // För att sedan ta bort den sätter vi Expires till ett datum som redan var
5. c.Expires = DateTime.Now.AddDays(-10);
6. // Sedan lägger vi till denna cookie i responsen till klienten
7. Response.Cookies.Add(c);