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