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

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>MagicAjax.NET Features</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style type="text/css"> <!-- .MainHeader { font-weight: bold; color: white; background-color: #0066cc; font-size: 10pt}
	body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: black; background-color: white}
	.BorderHeader { background-color: #999900; font-size: 8pt; font-weight: bold; color: #333300; text-align: center}
	.MainContent { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: black }
	.BorderContent { font-size: 8pt; color: black; border-color: black #666600 #666600; padding-top: 2px; padding-right: 2px; padding-bottom: 10px; padding-left: 2px; margin-bottom: 2px; border-style: solid; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
	a:link { color: #000099; text-decoration: underline}
	a:hover { color: #000099; text-decoration: underline}
	a:visited { color: #000099; text-decoration: underline}
	li { color: black; list-style-type: circle; position: relative; left: -15px; clip: rect( )}
	.NewsDate { color: black; font-weight: bold}
	td { font-size: 10pt}
	th { font-size: 10pt}
	.Annotation { font-size: 10px}
	H1 { text-align: center; }
	A.qindex {}
	A.qindexRef {}
	A.el { text-decoration: none; font-weight: bold }
	A.elRef { font-weight: bold }
	A.code { text-decoration: none; font-weight: normal; color: #4444ee }
	A.codeRef { font-weight: normal; color: #4444ee }
	DL.el { margin-left: -1cm }
	DIV.fragment { width: 100%; border: none; background-color: #003300 }
	DIV.ah { background-color: black; margin-bottom: 3; margin-top: 3 }
	TD.md { background-color: #006600 }
	DIV.groupHeader { margin-left: 16; margin-top: 12; margin-bottom: 6; font-weight: bold }
	DIV.groupText { margin-left: 16; font-style: italic; font-size: smaller }
	FONT.keyword { color: #008000 }
	FONT.keywordtype { color: #999920 }
	FONT.keywordflow { color: #e0FF00 }
	FONT.comment { color: #009900 }
	FONT.preprocessor { color: #809020 }
	FONT.stringliteral { color: #002080 }
	FONT.charliteral { color: #008080 }
	H3 { FONT-FAMILY: trebuchet ms,helvetica,arial }
	.ex { FONT-SIZE: 8pt; FONT-FAMILY: tahoma }
	CODE.keywordtype { COLOR: #00ccff }
	CODE.keyword { FONT-WEIGHT: bold; COLOR: #00ccff }
	CODE.fn { COLOR: white; FONT-WEIGHT: bold; }
	CODE.var { COLOR: #dcdcdc; }
	CODE.macro { COLOR: #809020; FONT-WEIGHT: bold; }
	CODE.comm { COLOR: lime }
	CODE.num { COLOR: purple }
	CODE.str { COLOR: #ffcc33; font-style: italic }
	.SectionHeader { font-size: 14px; color: #FFFFCC; font-weight: bold}
	.header { font-size: 16px; font-weight: bold; color: #663399}
	--></style>
	</head>
	<body text="#000000" bgColor="#ffffff">
		<p class="header" align="center">MagicAjax.NET Framework</p>
		<P class="header" align="center">Features</P>
		<p class="MainHeader" align="left">MagicAjax Features</p>
		<p class="NewsDate">Easy integration</p>
		<UL>
			<LI>
			Just a few lines in web.config are enough to have MagicAjax working with 
			default configuration options
			<LI>
				Only one easy to use control (AjaxPanel) is required to be included in your 
				page to enable the AJAX functionality
			</LI>
		</UL>
		<p class="NewsDate">Usability</p>
		<UL>
			<LI>
			You put the part of your page that you want to have AJAX functionality inside 
			an AjaxPanel and that's it; the MagicAjax framework takes care all of the 
			intrinsic details for you
			<LI>
			The AjaxPanel works like the ASP.NET Panel and can display its contents on the 
			Visual Studio Designer, allowing you to add controls to it visually
			<LI>
				No javascript code is needed to be written
			</LI>
		</UL>
		<p class="NewsDate">Programming</p>
		<UL>
			<li>
			For most cases you can add AJAX functionality to your existing pages by only 
			adding AjaxPanels and without even a single change in the source code
			<LI>
			MagicAjax replaces PostBacks with AJAX callbacks (AjaxCalls) that do not cause 
			a refresh on the client's browser
			<LI>
			The PostBack and AJAX functionality can co-exist in the same page; only the 
			controls that are inside an AjaxPanel will perform an AjaxCall instead of a 
			PostBack
			<LI>
			The page's ViewState is shared amongst PostBacks and AjaxCalls; any changes to 
			it by an AjaxCall will be available to a PostBack and vice versa
			<li>
			You handle an AjaxCall just like a PostBack, using the ASP.NET server-side 
			programming model
			<li>
			MagicAjax intuitively spots the changes that occured during an AjaxCall and 
			sends the minimum possible required javascript that will reflect the changes on 
			the client's browser
			<LI>
				There are plenty of helper methods to help you with handling an AjaxCall by 
				code (i.e. if you want to send additional custom javascript to the client)
			</LI>
		</UL>
		<p class="NewsDate">User experience</p>
		<UL>
			<LI>
			The user of your page enjoys a faster and richer browser UI, without the 
			annoying PostBacks
			<li>
			A 'Loading' label notifies the user that an AjaxCall has been invoked
			<li>
			Instead of downloading the whole page for a Postback, the client only downloads 
			chunks of javascript code that apply the changes made to the page's html
			<LI>
				MagicAjax's changes to the page are kept in the browser's cache, so if the user 
				navigates to another page and then presses the browser's 'Back' button, he will 
				see the same page that he was viewing before</LI>
		</UL>
		<p class="NewsDate">Customization</p>
		<UL>
			<LI>
			Many configuration options give you total control of the inner workings of 
			MagicAjax
			<LI>
			A small set of attributes applied to your ASP.NET controls can customize the 
			way that they will be handled by MagicAjax
			<li>
			You can define that an AjaxCall will be invoked asynchronously or synchronously 
			for all controls of an AjaxPanel or for a single control
			<li>
			You can define&nbsp;that certain&nbsp;controls of an AjaxPanel will invoke a 
			plain PostBack
			<LI>
			If the 'tracing' configuration option is enabled, a popup window is created 
			that displays information about the data that were sent to and from the server, 
			allowing you to monitor the traffic of AjaxCalls that the page invokes
			<li>
				Clean object-oriented design makes it easy to extend the framework and add your 
				own AjaxControls
			</li>
		</UL>
		<p class="NewsDate">Compatibility</p>
		<UL>
			<LI>Internet Explorer, Firefox, Netscape and Opera browsers are supported<li>
				If a browser is not supported or the user has disabled javascript, the page 
				will revert to plain PostBacks automatically
			</li>
		</UL>
		<P class="MainHeader" align="left">&nbsp;</P>
		<P>Copyright � 2005-2006 by The&nbsp;MagicAjax.NET Team</P>
	</body>
</html>

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
Web03 | 2.8.140814.1 | Last Updated 28 May 2007
Article Copyright 2005 by Argiris Kirtzidis
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid