Ajax Example

First we added the script manager to the page. this is necessary to use any of the Ajax controls. Then we added an Udate panel. This is the section of the page updatable by Ajax. The Ajax panel requires a content template. Inside the content template we added a radio button list with two buttons. One for yes and one for no. Under the list we added a simple panel from the main tool box and copied the content of the order form into the panel.

Here is a crude map of the layout:



Here is the changed source for Default2.aspx.

<%@ Page Title="Order Form" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!--script manager must be on page. It handles the Javascript and xml for ajax-->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<h2>Order Your Computer</h2>
<p>Are you ready to order</p>


<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!--Start content for ajax update panel-->
<!--radio button list in Ajax panel but not in the plain panel-->
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
<!-- start plain panel to box in form-->
<asp:Panel runat="server" ID="Panel1">
<!-- start order form-->
<p>Choose your size</p>
<asp:RadioButtonList ID="rdoSize" runat="server" cssclass="myList">
<asp:ListItem Value="400">15 Inch</asp:ListItem>
<asp:ListItem Value="500">17 Inch</asp:ListItem>
</asp:RadioButtonList>
<p>Choose Ram</p>
<asp:RadioButtonList ID="rdoRam" runat="server" CssClass="myList">
<asp:ListItem Value="100">3 gigabytes</asp:ListItem>
<asp:ListItem Value="150">4 gigabytes</asp:ListItem>
<asp:ListItem Value="250">8 gigabytes</asp:ListItem>
</asp:RadioButtonList>
<p>Choose Processor</p>
<asp:RadioButtonList ID="rdoProcessor" runat="server">
<asp:ListItem Value="100">I3</asp:ListItem>
<asp:ListItem Value="150">I5</asp:ListItem>
<asp:ListItem Value="200">I7</asp:ListItem>
</asp:RadioButtonList>

<br /><asp:Button ID="Button1" runat="server" Text="Submit"
onclick="Button1_Click" />
<!--end order form-->
</asp:Panel><!--end plain panel-->
<!--end ajax panel content-->
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

Here is the code for the Default2.aspx.cs. the only real changes on this are the radiobutton_selectedIndexchanged event and the redirect with the url query string

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Panel1.Visible = false;
}

protected void Button1_Click(object sender, EventArgs e)
{
//this code executes when the button is clicked
//declare and instantiate the Computer class
Computer comp = new Computer();

//assign the selected values to class properties
comp.Size = rdoSize.SelectedItem.ToString();
comp.SizePrice = double.Parse(rdoSize.SelectedValue.ToString());
comp.Ram = rdoRam.SelectedItem.ToString();
comp.RamPrice = double.Parse(rdoRam.SelectedValue.ToString());
comp.Processor = rdoProcessor.SelectedItem.ToString();
comp.ProcessorPrice = double.Parse(rdoProcessor.SelectedValue.ToString());

//Save the object to a session variable
Session["myOrder"] = comp;

//redirect to the second page
Response.Redirect("Default3.aspx");

}

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedIndex == 0)
{
Panel1.Visible = true;
}
else
{
//Panel1.Visible = false;
//redirect with a url passing a name value pair
Response.Redirect("Default4.aspx?msg=Please Come Again");
}
}
}

Here is the change on Default3.aspx.cs for the URL querystring

protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("Default4.aspx?msg=Thank You for your Order");
}

Here is the code on the confirmation page to read the query string and choose the label.

protected void Page_Load(object sender, EventArgs e)
{
msgLabel.Text = Request.QueryString["msg"];
}