110 likes | 121 Views
Desert Code Camp. Ajax Enabling a Web site using AjaxPro.NET. Joseph Guadagno http://www.josephguadagno.net presentations@josephguadagno.net. Requirements. ASP 1.1 C# VB.NET (possibly) JavaScript DHTML AjaxPro.NET Library (http://www.ajaxpro.info/). What will be covered. What is Ajax?
E N D
Desert Code Camp Ajax Enabling a Web site using AjaxPro.NET Joseph Guadagno http://www.josephguadagno.net presentations@josephguadagno.net
Requirements • ASP 1.1 • C# • VB.NET (possibly) • JavaScript • DHTML • AjaxPro.NET Library (http://www.ajaxpro.info/)
What will be covered • What is Ajax? • XMLHttpRequest Object • Dynamic HTML (DHTML) • Creating the dynamic web site
Quick Comments • I tried to make the demos somewhat useful. • The demos build upon each other. • The UI is not the best but pretty good. • There is probably a better way to do some of the JavaScript functions • I will not cover the business objects created (unless asked)
What is Ajax • Asynchronous JavaScript and XML (AJAX) is not a technology in itself, but is a term that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and the XMLHttpRequest object. When these technologies are combined in the AJAX model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.
XMLHttpRequest • A HTTP Response that returns an XML document. • Reference Site (http://jibbering.com/2002/4/httprequest.html)
Basic Steps • Add the reference to AjaxPro.DLL • Register the page for AjaxPro.NET • AjaxPro.Utility.RegisterTypeForAjax(typeof(Namespace.class)); • Add the AjaxMethod attribute to the method • [AjaxPro.AjaxMethod()] • Add the JavaScript function to call the method • Optional – Create the call back function
JavaScript Functions Main Function function LoadList() { Namespace.Class.Method(param1, param2, function_callback); }
Callback Function //callback we told Ajax.Net to pass the response to function Function_CallBack(response) { //if the server side code threw an exception if (response.error != null) { DisplayError(response.error, "LoadEngagementTeams"); return; } var teams = response.value; //if the response wasn't what we expected if (teams == null || typeof(teams) != "object") { var Message = "An unexpected error happened retrieving the teams list"; DisplayError (Message, "LoadEngagementTeams"); } for (var i = 0; i < oTeamList.Rows.length; ++i) { oControl.options[oControl.options.length] = new Option(oTeamList.Rows[i].team, oTeamList.Rows[i].team); } hideIndicator(); }
Links Internet Explorer Developer Toolbar http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Microsoft Developer’s Network (http://msdn.microsoft.com) Mozilla / Firefox Developers Center (http://www.mozilla.org/developer/) AjaxPro.NET Support Group (http://groups.google.com/group/ajaxpro?lnk=lr ) Other Ajax – Google Groups Ajax World (http://groups.google.com/group/ajax-world) Ajax-Web-Technology (http://groups.google.com/group/ajax-web-technology)