Magic AJAX: Applying AJAX to your existing Web Pages

<%@ Page language="C#" MasterPageFile="~/MasterPage.master" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
	<ajax:ajaxpanel ID="Ajaxpanel1" runat="server">
	<fieldset>
		<legend>Simple button showing server time</legend>
		<i>The button makes a callback to the server and shows the server's date and time in a asp:Label tag.</i><br /><br />
		<asp:Button runat="server" ID="ShowTime" Text="Show server's date & time" OnClick="ShowTime_Click" CausesValidation="false" />
		<asp:Label runat="server" ID="lblShowTime" BackColor="Blue" ForeColor="White" />
	</fieldset>

	<fieldset>
		<legend>Master/detail dropdown lists</legend>
		<i>An example of two connected dropdown lists (aka master-detail) without having to write any javascript client code. Note: to see the aspx source, click the 'View Source' link at the bottom of this page.</i><br /><br />
		Please pick a car:&nbsp; 
		<asp:DropDownList id="brand" runat="server" AutoPostBack="true" OnSelectedIndexChanged="brand_SelectedIndexChanged">
			<asp:ListItem>- Select car brand -</asp:ListItem>
		</asp:DropDownList>
		<asp:DropDownList id="model" runat="server" AutoPostBack="true" Visible="false" OnSelectedIndexChanged="model_SelectedIndexChanged" /><br /><br />
		<asp:Button id="select" runat="server" CausesValidation="false" Text="Select Car" Enabled="false" OnClick="select_Click" />&nbsp; 
		<asp:Label id="lblSelectedCar" runat="server" />
	</fieldset>
	
	<fieldset>
		<legend>Textbox with a server-side validator</legend>
		<i>Demonstrate the use of server-side validators with MagixAjax. Works for all browsers ;)</i><br /><br />
		Enter username: <asp:TextBox runat="server" ID="username" /> <asp:Button ID="username_submit" runat="server" Text="Submit" /> 
		<asp:RequiredFieldValidator ID="username_check" runat="server" ControlToValidate="username" EnableClientScript="false" ErrorMessage="Please enter username." />
	</fieldset>
	</ajax:ajaxpanel>
	
	<fieldset>
		<legend>Regular (Non-Ajax) Postback button</legend>
		<i>The 'Regular PostBack' button is used to demonstrate that the ViewState of the page is persisted between AJAX callbacks.</i><br /><br />
		<asp:Button ID="Button1" runat="server" Text="Regular Postback" CausesValidation="false" />
	</fieldset>

	<ajax:ajaxpanel ID="Ajaxpanel2" runat="server">
	<fieldset>
		<legend>Button invoking a Response.Redirect()</legend>
		<i>This button calls the server side Response.Redirect() method to navigate to another page.</i><br /><br />
		<asp:Button runat="server" CausesValidation="false" Text="Go to DataGrid example" OnClick="Redirect_Click" />
	</fieldset>
	</ajax:ajaxpanel>
</asp:Content>

<script language="C#" runat="server">
	
	private void Page_Load(object sender, EventArgs e)
	{
		if (!IsPostBack)
		{
			//fill the car brands
			brand.Items.Add("VW");
			brand.Items.Add("Mercedes");
			brand.Items.Add("Citroen");
		}
	}

	protected void ShowTime_Click(object sender, EventArgs e)
	{
		lblShowTime.Text = DateTime.Now.ToString();
	}

	protected void brand_SelectedIndexChanged(object sender, EventArgs e)
	{
		model.Items.Clear();
		model.Items.Add(new ListItem("- Select car model -", ""));
		model.Visible = true;
		select.Enabled = false;
		lblSelectedCar.Text = null; 

		switch (brand.SelectedValue)
		{
			case "VW":
				model.Items.Add("Golf");
				model.Items.Add("Passat");
				model.Items.Add("Beetle");
				model.Items.Add("Phaeton");
				break;
			case "Mercedes":
				model.Items.Add("S Class");
				model.Items.Add("E Class");
				model.Items.Add("A Class");
				model.Items.Add("M Class");
				break;
			case "Citroen":
				model.Items.Add("C3 Pluriel");
				model.Items.Add("C5 Break");
				model.Items.Add("C8");
				model.Items.Add("Berlingo");
				break;
			default:
				model.Visible = false;
				break;
		}
	}

	protected void model_SelectedIndexChanged(object sender, EventArgs e)
	{
		select.Enabled = model.SelectedIndex != 0;
		lblSelectedCar.Text = null;
	}

	protected void select_Click(object sender, EventArgs e)
	{
		lblSelectedCar.Text = "You have picked the " + brand.SelectedValue + " " + model.SelectedValue;
	}

	protected void Redirect_Click(object sender, EventArgs e)
	{
		Response.Redirect("DataGrid.aspx");
	}
</script>