Moduler>AJAX>AJAX i .NET>Toolkit
AJAX i .Net med Toolkit
I designeren i Visual Studio har vi laget følgende side:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit"
namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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">
<!-- a big panel to give us room to move in -->
<asp:Panel ID="PanelBig" Height="800px" Width="600px" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<h1>William Shakespeare</h1>
<p>Henter sonetter inn i et UpdatePanel som kan flyttes.
Bildet kan også flyttes.
<asp:Image ID="Image1" runat="server" ImageUrl="~/ws.jpg" />
</p>
<cc1:DragPanelExtender ID="Image1_DragPanelExtender" runat="server"
DragHandleID="Image1" Enabled="True" TargetControlID="Image1">
</cc1:DragPanelExtender>
<div>
<asp:TextBox ID="TextBoxSonetteNr" runat="server">18</asp:TextBox>
<asp:Button ID="ButtonGetSonette" runat="server" Text="Hent sonnete"
onclick="ButtonGetSonette_Click" />
</div>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="TextBoxSonetteNr" Display="Dynamic"
ErrorMessage="Tall i området" MaximumValue="154" MinimumValue="1"
Type="Integer"></asp:RangeValidator>
<div>
<asp:Label ID="Label1" runat="server" Text=" [1..154]">
</asp:Label>
</div>
<!-- Wrap the update panel to make it stick on update -->
<asp:Panel ID="Updateholder" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server"
BackColor="#E5E5E5" BorderColor="#000099"
BorderStyle="Solid" Height="400px" Width="400px"
Wrap="False">
<asp:Panel ID="Panel2" runat="server">
<asp:Label ID="LabelHeader" runat="server" Text=""
Font-Bold="True" ForeColor="Red">
</asp:Label>
</asp:Panel>
<asp:Label ID="LabelDikt" runat="server" Font-Bold="True"
ForeColor="#000000" Text=""></asp:Label>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonGetSonette"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
<cc1:DragPanelExtender ID="Updateholder_DragPanelExtender" runat="server"
DragHandleID="Updateholder" Enabled="True" TargetControlID="Updateholder">
</cc1:DragPanelExtender>
<p>Studer kildekoden.</p>
<p><a href="javascript:history.back()">Tilbake</a></p>
</asp:Panel> <!-- big -->
</form>
</body>
</html>
Det er lagt til extensions (DragPanelExtender) for ett bilde (Image1) og et panel (Updateholder). Merk dessuten panelet: PanelBig, som har som oppgave å ekspandere "sidearealet" slik at vi har litt plass å flytte på.
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="";
String Header = "";
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");
Header = "<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;
LabelHeader.Text = Header;
}
}
Som du ser av løsningen er forbedringspotensialet definivt tilstede. Hva med et penere panel for selve diktet ?
