Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » Ajax » General » Downloads
 
Add your own
alternative version
Go to top

Magic AJAX: Applying AJAX to your existing Web Pages

, 28 May 2007
How to apply AJAX technologies to your web pages without replacing ASP.NET controls and/or writing JavaScript code.
magicajax-030-net11.zip
magicajax
Examples
ExampleSite (.NET 2.0 only)
Web.sitemap
webparts
images
first.GIF
last.GIF
next.gif
pow_by_aspnet2.0.gif
prev.GIF
examples
App_Data
App_Code
Docs
Core
script
bin
MagicAjax.dll
magicajax-030-net20.zip
MagicAjax.dll
Web.sitemap
first.GIF
last.GIF
next.gif
pow_by_aspnet2.0.gif
prev.GIF
magicajax-030-source.zip
Web.sitemap
CVS
Root
Repository
Entries.Old
Entries
Entries.Extra.Old
Entries.Extra
first.GIF
last.GIF
next.gif
pow_by_aspnet2.0.gif
prev.GIF
CVS
Root
Repository
Entries.Old
Entries
Entries.Extra.Old
Entries.Extra
CVS
Root
Repository
Entries.Old
Entries
Entries.Extra.Old
Entries.Extra
CVS
Root
Repository
Entries.Old
Entries
Entries.Extra.Old
Entries.Extra
CVS
Root
Repository
Entries.Old
Entries
Entries.Extra.Old
Entries.Extra
CVS
Root
Repository
Entries
Entries.Extra
Entries.Old
Entries.Extra.Old
CVS
Root
Repository
Entries.Old
Entries.Extra.Old
Entries
Entries.Extra
CVS
Root
Repository
Entries
Entries.Extra
Entries.Old
Entries.Extra.Old
MagicAjax.snk
CVS
Root
Repository
Entries.Old
Entries.Extra.Old
Entries
Entries.Extra
UI
Design
CVS
Root
Repository
Entries.Old
Entries.Extra.Old
Entries
Entries.Extra
Controls
ClientEventControls
CVS
Root
Repository
Entries.Old
Entries
Entries.Extra.Old
Entries.Extra
CVS
Root
Repository
Entries.Extra
Entries.Old
Entries
Entries.Extra.Old
CVS
Root
Repository
Entries.Old
Entries.Extra.Old
Entries
Entries.Extra
Interfaces
CVS
Root
Repository
Entries.Old
Entries.Extra.Old
Entries
Entries.Extra
Configuration
CVS
Root
Repository
Entries.Old
Entries.Extra.Old
Entries
Entries.Extra
CVS
Root
Repository
Entries
Entries.Extra
Entries.Old
Entries.Extra.Old
CVS
Root
Repository
Entries.Old
Entries.Extra.Old
Entries
Entries.Extra
magicajax.zip
AJAXTest
AJAXTest.csproj.webinfo
Global.asax
Ajax
Ajax.csproj.user
Controls
Design
script
<%@ 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>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The MIT License

Share

About the Author

Argiris Kirtzidis
Web Developer
Greece Greece
No Biography provided

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 28 May 2007
Article Copyright 2005 by Argiris Kirtzidis
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid