AJAX
Børre Stenseth
Moduler>AJAX>AJAX i .NET>Håndlaget

Håndlaget AJAX i .Net

Hva
AJAX i .NET, en enkel håndlaget løsning

I dette eksempelet tar vi fullt ansvar for Javascriptkoden og vi organiserer heleløsningen ved å bruke en tom vevside med "code behind" for å produsere de komponentene vi skal hente.

Når vi skal gi en resons på tjenersiden på en Ajax-forespørsel betyr det en tre stegs operasjon:

  1. Vi må plukke opp og tolke alle parametrene som kommer
  2. Vi må gjøre en eller annen job ( beregninger, databaseoppslag, XML-parsing, osv) og vi må pakke resultatet i et eller annet format, vanligvis XML, HTML-fragment eller kanskje JSON.
  3. Vi må sende tilbake en respons. Denne resonsen er de dataene vi har preparert sammen med eventuelle headerinformasjon som cookies.

I C# har vi verktøy for alle disse operasjonene.

Punkt 1 ovenfor har vi kontroll over via klassen Request. Vi kan f.eks. spørre etter en verdi slik:

String S = Request.QueryString["nummer"];
	

Punkt 2 har vi hele C# biblioteket til å hjelpe oss med.

Punkt 3 ordner vi med klassen Response som vi kan skrive til. F.eks slik:

Response.Write("<div>Hallo</div>");
	

Eksempel

Eksempelet er framvisning av Shakespeares sonetter, jQuery [1] brukt som javascriptbibliotek.

Du kan teste det herhttp://donau.hiof.no/borres/dn/AjaxShake1/index.html

Det vi gjør er ganske enkelt å bruke "code-behind"-strategien og la vevsiden, aspx-fila, som skal returneres bestå av kun en linje:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="result.aspx.cs" Inherits="result" %>
	

Koden som kjører, result.aspx.cs, forholder seg bare til Request og Respons og skriver eksplisitt til den siste, istedet for å returnere en vevside slik som vi vanligvis gjør i nettløsninger. Page-objektet er uinteressant.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
public partial class result : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // get parameter
        String S = Request.QueryString["nummer"];
        int sonetteNum;
        try
        {
            sonetteNum = Convert.ToInt16(S);
        }
        catch (Exception ex)
        {
            sonetteNum = 1;
        }
        sonetteNum=Math.Min(Math.Max(1,sonetteNum),154);
        
        // get the XML-file with sonnetes
        string physicalPath =HttpContext.Current.Server.MapPath(".").ToString();
        String filename = physicalPath + "\\App_Data\\sonnetes.xml";
        XmlDocument doc = new XmlDocument();
        try
        {
            doc.Load(filename);
            XmlNodeList list = doc.GetElementsByTagName("sonnet");
            XmlElement p = (XmlElement)list.Item(sonetteNum-1);
            XmlNodeList lines = p.GetElementsByTagName("line");
            XmlNodeList heads = p.GetElementsByTagName("id");
            String Res = "<h3>Nr: " + heads.Item(0).InnerText + "</h3>\r\n";
            foreach (XmlNode n in lines)
            {
                Res += "<div>"+n.InnerText+"</div>\r\n";
            }
            Response.Write(Res);
        }
        catch (Exception ex)
        {
            Response.Write("Could not find a sonnette: "+ex.Message);
        }
        Response.Flush();
    }
}

Request - Response

Request -ojektet som vi har tilgang på på serversiden gir oss all informasjon som er relevant i en http-request. Respons-objektet gir oss mulighet for å kontrollere det vi skal sende tilbake.

Følgende program er lagt ut på serveren og viser noe av den informasjonen vi kan ha bruk for. Programmet returnerer en minimalistisk HTML-side og er derfor ikke, uten endringer, egnet som "AJAX-leverandør":

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Specialized;
using System.Text;
public partial class tester : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        String method = Request.HttpMethod;
        String user=Request.UserAgent;
        NameValueCollection Qs=Request.QueryString;
        String[] keys = Qs.AllKeys;
        String raw=Request.RawUrl;
        NameValueCollection Sv=Request.ServerVariables;
        String[] svKeys = Sv.AllKeys;
        HttpCookieCollection kaker=Request.Cookies;
        String[] kakekeys = kaker.AllKeys;
        Response.Write("<html>");
        Response.Write(method);
        Response.Write("<br/>"+user);
        Response.Write("<hr/>");
        Response.Write("<br/>" + raw);
        for (int ix=0;ix<keys.Length;ix++)
            Response.Write("<br/>" + keys[ix] + " : " + Qs[keys[ix]]);
        
        Response.Write("<hr/>");
        Response.Write("cookies:");
        for (int ix = 0; ix < kakekeys.Length; ix++)
            Response.Write("<br/>" + kakekeys[ix] + " : " + kaker[kakekeys[ix]].Value);
        Response.Write("<hr/>");
        for (int ix = 0; ix < svKeys.Length; ix++)
            Response.Write("<br/>" + svKeys[ix] + " : " + Sv[svKeys[ix]]);
        
        Response.Write("</html>");
        
        
    }
}

Du kan kopiere denne URL'en, legge på parametere, eventuelt sette cookies og teste den i en nettleser.
http://donau.hiof.no/borres/dn/demosite3/tester.aspx

Hvis du vil sette en cookie: http://donau.hiof.no/borres/dn/demosite3/tester2.aspx

Og så kan du se på http://donau.hiof.no/borres/dn/demosite3/tester.aspx om igjen.

Koden som kjører når vi setter en cookie ser slik ut:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class tester2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HttpCookie cok=new HttpCookie("user","me");
        cok.Expires = DateTime.Now.AddHours(1);
        Response.SetCookie(cok);
        Response.Write("<html>");
        Response.Write("har satt en cookie: user:me");
        Response.Write("<br/>expires at: "+cok.Expires.ToLocalTime().ToString());
        Response.Write("</html>");
        Response.Flush();
    }
}
Referanser
  1. jQuery Javascript bibliotekjqueryjquery.com/04-07-2010
Shakespear:
https://svn.hiof.no/svn/psource/Csharpsites/AjaxShake1
Vedlikehold

B. Stenseth revidert mars 2008

(Velkommen) Moduler>AJAX>AJAX i .NET>Håndlaget (Enkel)