Artiklar » .NET 3x » Objekt till JSON

 
 

Objekt till JSON

Författare: Reager
Datum: den 6 augusti 2009
Antal lästa: 2377
Ej stjärnmärkt

Något som är väldigt praktiskt att använda ibland, speciellt då man bygger 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
Kod:

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
Kod:

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


samt lagt till denna kod i metoden ProcessRequest i min handler
Kod:

// 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
Kod:

[
{"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
Kod:

<script type="text/javascript" src="http://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
<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
Kod:

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

Orginalartikeln återfinns på http://www.aspdotnet.nu/
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0625 sekunder att ladda sidan