Click here to Skip to main content
15,886,362 members
Articles / Web Development / HTML

Magic AJAX: Applying AJAX to your existing Web Pages

Rate me:
Please Sign up or sign in to vote.
4.82/5 (72 votes)
28 May 2007MIT12 min read 968.1K   2.7K   251  
How to apply AJAX technologies to your web pages without replacing ASP.NET controls and/or writing JavaScript code.
<%@ Page language="c#" %>
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>
<html>
	<head>
		<title>MagicAjax .NET 2.0 Webpart Examples</title>
		<style type="text/css">
			body { font-size: small; font-family: verdana }
		</style>
	</head>
	<body>
		<h4>MagicAjax .NET 2.0 Webpart Examples</h4>
		<form id="form1" runat="server">
		    <asp:WebPartManager ID="wpm" runat="server" Personalization-Enabled="true" />
		    <span style="float:right"><asp:Button runat="server" Text="Regular PostBack" /></span>
    		
		    <hr />
		    <h5>1. WebPart demo</h5>
		    <ajax:ajaxpanel ID="Ajaxpanel1" runat="server">
		    <asp:Button runat="server" id="Toggle" Text="Switch to EditMode" OnClick="Toggle_Click" />
		    <table><tr><td>
		        <asp:WebPartZone runat="server" ID="WebPartZone1">
		            <PartTitleStyle CssClass="WebPartTitle" BackColor="LightBlue" ForeColor="Black" />
		            <ZoneTemplate>
		                <asp:Calendar runat="server" ID="Calendar1"></asp:Calendar>
		            </ZoneTemplate>
		        </asp:WebPartZone>
            </td><td>
		        <asp:WebPartZone  runat="server" ID="WebPartZone2">
		            <PartTitleStyle CssClass="WebPartTitle" BackColor="LightBlue" ForeColor="Black" />
		            <ZoneTemplate>
		                <asp:Calendar runat="server" ID="Calendar2"></asp:Calendar>
		            </ZoneTemplate>
		        </asp:WebPartZone>
				</td><td>
					<asp:CatalogZone ID="CatalogZone1" runat="server">
						<ZoneTemplate>
							<asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
							<asp:ImportCatalogPart Visible="true" ID="ImportCatalogPart1" runat="server" />
							<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server" Title="Catalog">
								<WebPartsTemplate>
									<asp:Calendar ID="cal" runat="server" />
								</WebPartsTemplate>
							</asp:DeclarativeCatalogPart>
						</ZoneTemplate>
					</asp:CatalogZone>
				</td></tr></table>
		    </ajax:ajaxpanel>
		</form>
	</body>
</html>

<script language="C#" runat="server">

	private void Page_Load(object sender, EventArgs e)
	{
		if (!IsPostBack)
		{
          ((GenericWebPart)Calendar1.Parent).Title = "Calendar1";
          ((GenericWebPart)Calendar2.Parent).Title = "Calendar2";
		}
	}

	protected void Toggle_Click(object sender, EventArgs e)
	{
		if (wpm.DisplayMode == WebPartManager.BrowseDisplayMode)
		{
			Toggle.Text = "Switch to ViewMode";
			wpm.DisplayMode = WebPartManager.CatalogDisplayMode;
		}
		else
		{
			Toggle.Text = "Switch to EditMode";
			wpm.DisplayMode = WebPartManager.BrowseDisplayMode;
		}
	}
</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


Written By
Web Developer
Greece Greece
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions