AJAX
Børre Stenseth
Moduler>AJAX>AJAX i .NET>Enkel

Enkel AJAX i .Net

Hva
AJAX i .NET, en enkel løsning

I dette eksempelet bruker vi de innebygde Ajaxmekanismene i .Net. Det vil si at vi bruker et UpdatePanel og overlater til .Net å lage nødvendig Javascriptkode. Du kan sammenligne denne løsningen med den som er beskrevet i modulen Håndlaget. Det er det samme problemet som skal løses og vevsidene ser (nesten) helt like ut.

Du kan teste det herhttp://donau.hiof.no/borres/dn/AjaxShake2/Default.aspx

I designeren i Visual Studio har vi laget følgende side:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>WS</title>
    <script type="text/javascript">
    
      function pageLoad() {
      }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <h1>William Shakespeare</h1>
        <p>Henter sonetter inn i et UpdatePanel</p>
         <img src="ws.jpg" alt="" />
         <br />
        <asp:TextBox ID="TextBoxSonetteNr" runat="server">18</asp:TextBox>
        <asp:Button ID="ButtonGetSonette" runat="server" Text="Hent sonnete" 
            onclick="ButtonGetSonette_Click" />
        <br />
        <asp:RangeValidator ID="RangeValidator1" runat="server" 
            ControlToValidate="TextBoxSonetteNr" Display="Dynamic" 
            ErrorMessage="Tall i området" MaximumValue="154" MinimumValue="1" 
            Type="Integer"></asp:RangeValidator>
        <asp:Label ID="Label1" runat="server" Text=" [1..154]">
        </asp:Label>
        
        <!-- The update panel -->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="LabelDikt" runat="server" 
                     Font-Bold="True" ForeColor="#0066FF"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ButtonGetSonette" 
                                           EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        
    </div>
    <hr/>
<p>Studer kildekoden.</p>
<p><a href="javascript:history.back()">Tilbake</a></p>
    </form>
    </body>
</html>

Koden som går bak er slik

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void ButtonGetSonette_Click(object sender, EventArgs e)
    {
        // get parameter
        String S = TextBoxSonetteNr.Text;
        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();
        String Res="";
        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");
            Res = "<h3>Nr: " + heads.Item(0).InnerText + "</h3>\r\n";
            foreach (XmlNode n in lines)
            {
                Res += "<div>" + n.InnerText + "</div>\r\n";
            }
        }
        catch (Exception ex)
        {
            Res="Could not find a sonnette: " + ex.Message;
        }
        // Update results
        LabelDikt.Text = Res;
    }
}
Referanser
Shakespear:
https://svn.hiof.no/svn/psource/Csharpsites/AjaxShake2
Vedlikehold

B. Stenseth mars 2008

(Velkommen) Moduler>AJAX>AJAX i .NET>Enkel (Toolkit)