doc_mm.AjaxExtensions2

Ajax is not complicated when you dissect code carefully. Boring? yes, Is it better with Studio? Yes, somewhat , needs additional readings, cheat sheet etc

In this example, we again see the separation of a Block and its content updating with Ajax extension that would post only this block that loading a whole content of the web page.

The ContentTemplate element initiate asynchronous postback, of the content items when placed with in this block. If an Item is set elsewhere other than "ContentTemplate", another element named "Trigger" is used as we will see in the next document.

Step: 1 Create New web site, you may keep as a file system, so that

OR if you are using Window Server, like here I am using Windows Server 2008 Standard version, Create a web site with pride and use it like a pro.

Step 2: Code

Default.aspx

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

<!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 id="Head1" runat="server">
<title>mm.AjaxExtension2 : UpDatePanel</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table >
<tr>
<td class="td1">
<asp:Label ID="L3" runat="server" Text=""></asp:Label>
</td>
<td class="td1">
<asp:TextBox ID="TextBox1" runat="server" Text="2" ></asp:TextBox>
<asp:Label ID="L4" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td class="td1">
<asp:Button ID="Button1" runat="server" Text="Update with Page-Reload" onclick="Button1_Click" Width="163px" /><br />
<asp:Label ID="L1" runat="server"></asp:Label>
</td>
<td class="td1">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Timer id="Timer1" runat="server" Interval="12000" OnTick="Button2_Click"/>
<asp:Button ID="Button2" runat="server" Text="Update with AJAX" onclick="Button2_Click" Width="160px" /><br />
<asp:Label ID="L2" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr><td class="td1"> </td><td class="td1"> </td></tr>
</table>

</div>
</form>
</body>
</html>

Default.aspx.cs

using System;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
private static int n1 = 0; private static int n2 = 0; private static int n3 = 0;
string str; RoundTrip rd2 = new RoundTrip(); RoundTrip rd = new RoundTrip();
RoundTrip rd1 = new RoundTrip();
protected void Page_Load(object sender, EventArgs e)
{
n2++;

L3.Text = "Page Loaded " + n2 + " Times";

str = TextBox1.Text;
rd1.roundtrip_property = Convert.ToInt32(str);
L4.Text = "Read " + rd1.roundtrip_property.GetHashCode().ToString();
if (this.IsPostBack)
{
n3++;
//L1.Text = "Post-Back Page Load :round :&nbsp:" + n3 + " Time : " + DateTime.Now.ToString() + "<br/>";
L1.Text = "<br/> Post-Back Page Load :round :&nbsp:" + n3 + " <br/>Time : " + DateTime.Now.ToString() + "<br/>Class Method Trip: " + rd1.roundtrip_method().ToString() + " <br/>Prop set at Button 1 : " + rd1.roundtrip_property.ToString() + "<br/>Prop Set at Button- 2 : " + rd.roundjax_property.ToString() + "<br/>";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
// Click event will cause page load there fore you don't need to use the script below.
}
protected void Button2_Click(object sender, EventArgs e)
{
n1++;
rd.roundjax_property = Convert.ToInt32(str);
L2.Text = "<br/> Event Local Counter " + n1 + " <br/> Time " + DateTime.Now.ToString() + "<br/>Class Method Trip: " + rd2.roundtrip_method().ToString()+ "<br/> Prop set at Button 1 " + rd2.roundtrip_property.ToString() + "<br/>Prop Set at Button- 2 : "+ rd.roundjax_property.ToString()+"<br/>";
}

}

main.css

body
{
background-color:Gray;
}
table
{
width:600px; border:solid 2px navy; background-color:#FEFFE1;
}
.td1
{
text-align:left; border:solid 2px Navy; vertical-align:top; padding-left:10px;width:300px;
}
.td2
{
width:200px;
}

RoundTrip.cs

using System;
/// <summary>
/// Summary description for RoundTrip
/// </summary>
public class RoundTrip
{
public static int nround = 0;
private int nset;// { get; set; }
private int nset2;
public RoundTrip()
{
//
// TODO: Add constructor logic here
//
}
public int roundtrip_method()
{
nround++;
return (nround);
}
public int roundtrip_property
{
get { return nset; }
set { nset = value; }
}
public int roundjax_property
{
get { return nset2; }
set { nset2 = value; }
}

}

Step 3: Runtime analysis

First time Load

As timer kicks in, you see data changed

Change the value in text box

if you click on Page-Load, the click event, reads the actual value as the page was traversed by Ajax functions.