Objekt till JSON

by Reager 6. August 2009 14:43

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.

Tags:

jQuery | Javascript | C# | ASP.NET | Artikel | JSON

Skapa en gästbok med Linq 2 XML

by Reager 11. July 2009 20:26

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:

Tags: , , ,

Artikel | ASP.NET | C# | XML | Linq

Jcrop och ASP.NET

by Reager 29. June 2009 11:31

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)

Tags: , , ,

Artikel | ASP.NET | C# | jQuery

Uploadify och ASP.NET

by Reager 28. June 2009 19:28

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)

Tags: , , ,

Artikel | ASP.NET | C#

Regular Expressions

by Reager 19. October 2007 11:41

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 s
ka 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.

Tags: , ,

ASP.NET | C# | Regular Expressions | Artikel

Introduktion till MySQL med ASP.NET

by Reager 19. September 2007 19:05

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. V
id 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.

Tags: , ,

Artikel | C# | Databaser | MySQL

Radnummer i gridview

by Reager 29. August 2007 22:45

Det har varit lite dåligt med uppdateringar på sistone, men här kommer iallafall ett litet tips. Om du skulle behöva radnummer i din gridview så kan du göra som jag ska visa nu. Börja med att skapa ett webbprojekt och dra ut en gridview. I denna ska vi sedan skapa en asp:TemplateField som vi gör en ItemTemplate i. Se exempel nedan.

<asp:GridView ID="gwRowNum" runat="server"> 
        <Columns> 
            <asp:TemplateField HeaderText="Radnummer"> 
                <ItemTemplate> 
                     <%# Container.DataItemIndex+1 %>             
                </ItemTemplate>             
            </asp:TemplateField> 
        </Columns> 
</asp:GridView> 

I nästa steg så ska vi bara skapa en test-datakälla, som blir en arraylist i detta fall. Gå till kodläget och inkludera System.Collections genom att ange using System.Collections; högst upp på kod-sidan. Sedan i Page_Load anger du följande kod för att skapa en ArrayList och sätta den som datasource för att som sista steg binda datan till gridview:n.

ArrayList arrObjects = new ArrayList(); 
arrObjects.Add("Reager"); 
arrObjects.Add("rokkar"); 
arrObjects.Add("som"); 
arrObjects.Add("vanligt"); 
gwRowNum.DataSource = arrObjects; 
gwRowNum.DataBind(); 

Hoppas du får användning för detta tips. Mer kommer när jag får tid över.

Tags: , , , , ,

ASP.NET | C# | Tips&Trix

Skapa länkar i Calendar-kontrollen

by Reager 21. August 2007 19:30

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.

Tags: , , , , ,

ASP.NET | C# | Artikel

Skapa en enkel User Control

by Reager 21. August 2007 13:50

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

Tags: , , , , ,

ASP.NET | C# | Artikel

Valideringskontroller

by Reager 18. August 2007 12:51

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.

Grunderna i felhantering med C#

by Reager 16. August 2007 19:43

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.

Tags: , , , , , ,

ASP.NET | C# | Artikel

Ladda upp bild samt förminska den

by Reager 15. August 2007 18:30

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

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

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.

  1.                 // Nu kollar vi om det var en tillåten fil vi hade sparar vi den
  2.                 // i mappen images, annars skriver vi bara ut ett felmeddelande
  3.                 if (allowed)
  4.                 {
  5.                     // Vi sparar våran filnamn i en variabel innan vi använder den då vi
  6.                     // vill använda den för att förminska bilden. Guid.NewGuid skapar ett så
  7.                     //gott som unikt värde som kan användas då man behöver unika namn.
  8.                     String filename = Guid.NewGuid() + extension;
  9.                     // Sparar filen,
  10.                     fuImage.SaveAs(Server.MapPath("images/") + filename);
  11.                     // Efter att bilden är sparad så ska vi förminska den
  12.                     // Vi börjar med att ladda in våran bild i ett Image-objekt
  13.                     // med hjälp av den den InputStream som vi får av upload-kontroll
  14.                     System.Drawing.Image imgImage = Bitmap.FromStream(fuImage.PostedFile.InputStream);
  15.                     // För att våran bild ska ha de rätta proportionerna även efter
  16.                     // förminskningen så tar vi ut höjd samt bredd från orginalbilden.
  17.                     int height, width;
  18.                     // Vi tar ut höjden och bredden från orginalbilden för att
  19.                     // kunna kontrollera den.
  20.                     height = imgImage.Height;
  21.                     width = imgImage.Width;
  22.                     // Här bestämmer jag att maximala höjden på den nya bilden ska vara 120 pixlar.
  23.                     if (height > 120)
  24.                     {
  25.                         // Vi sätter bredden till 120* förhållandet mellan bredd & höjd på orginalbilden
  26.                         width = 120 * width / height;
  27.                         height = 120;
  28.                     }
  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.             }
  43.         }

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

Tags: , , ,

ASP.NET | C# | Artikel

Gästbok med Captcha

by Reager 13. August 2007 22:16

"En captcha är en "robotfälla", ett test som är lätt att lösa för människor, men inte för automatiska datorprogram. Captchor används vid inloggning på gratis e-posttjänster och ibland även före avsändning av e-post för att förhindra missbruk av e-posttjänsten (utskick av spam) med hjälp av automatiska program, robotar. Captchor används även vid många former av registreringar på webbsidor, som till exempel forum och gästböcker.

Vanliga captchor består av förvrängda eller överlappande ord eller teckenkombinationer som avsändaren måste avläsa och skriva in korrekt i ett fält. Sådana förvrängda tecken är relativt lätta för människor att läsa (förutsatt att de inte är synskadade), men datorprogram för teckenigenkänning klarar dem inte.

Ordet captcha är en alternativ, ljudenlig stavning av det engelska ordet capture (fångst). Det är alltså ett slags fälla. Ibland förklaras ordet captcha som en förkortning för "Completely Automated Public Turing-test to tell Computers and Humans Apart", "Helt automatiskt Turingtest för att skilja på datorer och människor", men det är en efterhandskonstruktion (s.k. "backronym")."

Källa: Wikipedia, http://sv.wikipedia.org/wiki/Captcha

Detta är aspdotnet.nu:s första Script, det är samma gästbok som återfinns i artikel, http://www.aspdotnet.nu/post/Skapa-en-g%c3%a4stbok-i-ASPNET-utan-databas.aspx. Denna kod kan du helt enkelt ladda ner för att studera den eller köra den direkt.

För att du ska ha möjlighet att se vad det är för något så har jag lagt upp både en demo-länk samt en länk direkt till Scriptet för nerladdning.

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

Tags: , ,

C# | Script

Sessions och Cookies i ASP.NET

by Reager 12. August 2007 23:07

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.

  1. // För att skriva ut värdet från din Session så hämtar du bara värdet i din Session
  2. // och eftersom det är en sträng som vi har lagrat i den så måste vi omvanlda den till en string
  3. Response.Write(Session["mysess"].ToString());

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.

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

  1. // För att läsa ut värdet ur en Cookie så använder vi Request.Cookies
  2. 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);
   Detta var en riktig snabblektion i Sessions och Cookies och jag rekommenderar
   dig att kika på de länkar som jag bifogar i mina artiklar då de tar upp lite
   mer än det som jag tog med. Hoppas du lärt dig nåt nytt. Tjipp.

   Läs mer http://msdn2.microsoft.com/en-us/library/ms178194.aspx
   Läs mer http://msdn2.microsoft.com/en-us/library/78c837bd.aspx
   Läs mer http://msdn2.microsoft.com/en-us/library/bd70eh18.aspx
   Läs mer http://msdn2.microsoft.com/en-us/library/ms178195.aspx

Tags: , , ,

ASP.NET | C# | Artikel

Skicka mail med .NET

by Reager 12. August 2007 21:28

Någon som i gamla ASP krävde speciella komponenter och en del krångel är nu hur enkelt som helst i .NET, och det jag pratar om är att skicka mail. Börja med att inkludera namespacet System.Net.Mail genom att placera följande kodrad högst upp på sidan.

  1. using System.Net.Mail

När detta är gjort så krävs det endast två rader kod för att skicka ett enkelt mail. Se exempel nedan. Lägg denna kod i t.ex. ett click-event till en knapp eller var du nu tycker att det passar för dig.

  1. SmtpClient smtp = new SmtpClient("min.smtp.se");
  2. smtp.Send(new MailMessage("from@mail.com", "to@mail.com", "Ämne", "Meddelande"));

Vill du läsa mer om detta rekommenderar jag följande länk: http://msdn2.microsoft.com/en-us/library/system.net.mail.aspx

Hoppas du får nytta av detta tips.

Tags: , , ,

ASP.NET | C# | Tips&Trix

<< Previous posts

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen

RecentComments

Comment RSS