Click here to Skip to main content
15,897,704 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 985.1K   2.7K   251  
How to apply AJAX technologies to your web pages without replacing ASP.NET controls and/or writing JavaScript code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>MagicAjax.NET Integration</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">Integration</P>
		<p class="MainHeader" align="left">MagicAjax Integration</p>
		<p class="NewsDate">Modifying web.config</p>
		<p class="MainContent">
			The MagicAjaxModule should be registered in the <i>system.web</i> section of 
			the web.config file of your application, like this:
			<pre>
&lt;httpModules&gt;
	&lt;add name="MagicAjax" type="MagicAjax.MagicAjaxModule, MagicAjax" /&gt; 
&lt;/httpModules&gt;</pre>
			MagicAjax will work with the default configuration options. If you want to 
			change an option you must define it in web.config; see <A href="Configuration.html">
				Configuration Options</A>
		<P></P>
		<p class="NewsDate">Adding the controls on page</p>
		<p class="MainContent">
			A tag prefix should be registered for MagicAjax's controls namespace at the top 
			of the page like this:
			<pre>
&lt;%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %&gt;</pre>
			Controls can then be defined using the tag prefix:
			<pre>
&lt;ajax:AjaxPanel id="AjaxPanel1" runat="server"&gt;
&lt;/ajax:AjaxPanel&gt;</pre>
			For more information about the controls of the framework see <A href="Usage.html">Usage</A>
		<P></P>
		<p class="NewsDate">Putting the controls in Toolbox (Visual Studio .NET 2003)</p>
		<p class="MainContent">
			It is recommended that you put the controls of MagicAjax in toolbox so that you 
			can add them on page with a simple drag'n'drop. At Visual Studio, from the <b>Tools</b>
			menu choose <b>Add/Remove Toolbox Items</b>, click on <b>Browse</b> and find 
			the MagicAjax.dll file. The controls will be placed in toolbox for easy access.
		</p>
		<P class="MainHeader" align="left">&nbsp;</P>
		<P>Copyright � 2005-2006 by The 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


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