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.

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)