14.6. State Management and ASP.NET AJAX
The nice thing with ASP.NET AJAX is that you now have the ability to record state back to the server in a quick and little request. Before AJAX, you would have to make an entire post of the page and send back the entire page in the response just to write something to a Session object or some other aspect of recording state.
To provide an example of this, Listing 14-8 shows an ASP.NET AJAX page that is working with a Session object on the server and changing aspects of the page using an UpdatePanel server control.
Example 14-8. Working with a Session object from an ASP.NET AJAX page
<%@ Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
int resultCount = int.Parse(Session["count"].ToString());
resultCount += 1;
Session["count"] = resultCount.ToString();
Label1.Text = "Hello " + TextBox1.Text;
Label2.Text = "You have put in your name " + Session["count"] + " times.";
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{Session["count"] = 0;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Working with Sessions</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server"
Text="Submit your name numerous times" OnClick="Button1_Click" />
<br /><br />
<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html> |
For this example, type you name in the TextBox server control and then click the page's button a number of times. Each time you click on the button the page count is counted up. This number is being stored up on the server in a Session object (even though you could have just as easily worked on the value from the client).
The request from this page (as captured using Fiddler) is presented here in Listing 14-9.
Example 14-9. The request after clicking the button
POST /WebSite1/Default.aspx HTTP/1.1 Accept: */* Accept-Language: en-us Referer: http://localhost.:2972/WebSite1/Default.aspx x-microsoftajax: Delta=true Content-Type: application/x-www-form-urlencoded; charset=utf-8 Cache-Control: no-cache UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2142; .NET CLR 3.5.30729; Zune 3.0) Host: localhost.:2972 Content-Length: 304 Connection: Keep-Alive Pragma: no-cache Cookie: ASP.NET_SessionId=fm140145nufe3355auhpig45 ScriptManager1=UpdatePanel1%7CButton1&__EVENTTARGET=&__EVENTARGUMENT=&__VIEWSTATE=% 2FwEPDwUKLTI2NTM4Mzg2OGRkmCUF3vkmxzkjgRzR4MjeLNLBYZU%3D&__EVENTVALIDATION=%2FwEWAwL 2iLTMCALs0bLrBgKM54rGBlaCxawV0gCxB8d%2FaZ6tfsVDTHbN&TextBox1=Bill%20Evjen& __ASYNCPOST=true&Button1=Submit%20your%20name%20numerous%20times |
The response in this case is smaller than returning the entire page as the labels you are working with are encapsulated within the UpdatePanel server control. The response is presented here in Listing 14-10.
Example 14-10. The AJAX response
HTTP/1.1 200 OK
Server: ASP.NET Development Server/9.0.0.0
Date: Sat, 20 Sep 2008 17:43:38 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: private
Content-Type: text/plain; charset=utf-8
Content-Length: 882
Connection: Close
313|updatePanel|UpdatePanel1|
<input type="submit" name="Button1" value="Submit your name
numerous times" id="Button1" />
<br /><br />
<span id="Label1">Hello Bill Evjen</span>
<br />
<span id="Label2">You have put in your name 1 times.</span>
|184|hiddenField|__VIEWSTATE|/wEPDwUKLTI2NTM4Mzg2OA9kFgICBA9kFgICBQ9kFgJmD2QWBAIDDw
8WAh4EVGV4dAUQSGVsbG8gQmlsbCBFdmplbmRkAgUPDxYCHwAFIllvdSBoYXZlIHB1dCBpbiB5b3VyIG5hb
WUgMSB0aW1lcy5kZGSh1ltQhlo4FNr+uUq79Ib9uA1Yaw==|56|hiddenField|__EVENTVALIDATION|/w
EWAwKfgM6jAwKM54rGBgLs0bLrBsdqWqQTIx9avehV7hvlmI1t0ilI|0|asyncPostBackControlIDs|||
0|postBackControlIDs|||13|updatePanelIDs||tUpdatePanel1|0|childUpdatePanelIDs|||12|
panelsToRefreshIDs||UpdatePanel1|2|asyncPostBackTimeout||90|13|formAction||
Default.aspx|21|pageTitle||Working with Sessions| |
Instead of working with Sessions, you could have also just as easily used ViewState as a means to maintain state. Changing all the Session objects to ViewState would have produced a response as presented here in Listing 14-11.
Example 14-11. The response using ViewState
HTTP/1.1 200 OK
Server: ASP.NET Development Server/9.0.0.0
Date: Sat, 20 Sep 2008 17:50:10 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: private
Content-Type: text/plain; charset=utf-8
Content-Length: 894
Connection: Close
313|updatePanel|UpdatePanel1|
<input type="submit" name="Button1" value="Submit your name
numerous times" id="Button1" />
<br /><br />
<span id="Label1">Hello Bill Evjen</span>
<br />
<span id="Label2">You have put in your name 1 times.</span>
|196|hiddenField|__VIEWSTATE|/wEPDwUKLTI2NTM4Mzg2OA8WAh4FY291bnQFATEWAgIED2QWAgIFD2
QWAmYPZBYEAgMPDxYCHgRUZXh0BRBIZWxsbyBCaWxsIEV2amVuZGQCBQ8PFgIfAQUiWW91IGhhdmUgcHV0I
GluIHlvdXIgbmFtZSAxIHRpbWVzLmRkZAH9HdFUrhSDLax5cvGNjRHGAA1+|56|hiddenField|
__EVENTVALIDATION|/wEWAwK2wPbTAgKM54rGBgLs0bLrBp1lMhefZsuvFEUluX7sQsrglEM5|0|
asyncPostBackControlIDs|||0|postBackControlIDs|||13|updatePanelIDs||tUpdatePanel1|0
|childUpdatePanelIDs|||12|panelsToRefreshIDs||UpdatePanel1|2|asyncPostBackTimeout||
90|13|formAction||Default.aspx|21|pageTitle||Working with Sessions| |
In this case, the ViewState in the response is a bit longer, as this is where the count value is stored.