I have also, in the last year and a half or so, been coding without MS Ajax. I have let go of things like the UpdatePanel and the Script Manager and have instead come to do direct Ajax calls to .ashx, default.aspx and web services. It feels that when you follow this approach that you have much tighter control over the quality of the UI. So what are your options for making Ajax calls in a .NET environment? I would like to think that there are a few options that stand out:

• Direct page ajax calls – you can use jQuery’s ajax function to call .ashx and .aspx pages. I have recently started using the [WebMethod] attribute in my .aspx files to make calls, and what I like about it is that you can tell the page to output JSON, which automatically serializes the method’s return type. I have also used ashx files to do ajax calls and this worked well
• SOAP-based web services – an approach I learned last year was to use a javascript soap parser to parse soap-based web services. These were mainly .asmx services. You can configure .asmx services to return JSON as well
• WCF-services can be configured for SOAP or JSON but also use a REST-like approach

What other options are there for .NET developers when making Ajax calls?

So to come back to my strategy for using AJAX in web applications, I think an approach I am going to try is to divide navigation into two classes:
*Website navigation
*Page level navigation

Website navigation will generally allow for “postbacks” whereas page level navigation will allow for actions that are very specific for that page. The MVC framework provides a structure that supports this strategy. Your views act as your “postbacks” and the actual views themselves are where the activity takes place. Postbacks in this instance refers to the flicker effect you get when you click on links, whereas AJAX allow for a smoother effect.

The other bit of strategy I would like to think about is processing the results from datasources through AJAX. At the moment I am developing web applications where the web services return HTML strings, and the JavaScript simple ends up displaying it. I feel that this approach is messy and does not allow for a clear and contextualised view of your system. There must be an approach that creates good quality AJAX that can interact with server side code. I am looking for an approach that will make it easier to develop and implement my classes. I love the classical object design approach because I like things organised that way.

1. David Ives – Developer and Platform Strategy Group for Microsoft in South Africa – Microsoft
2. Brad Abrams – Group Program Manager for the UI Framework and Services Team – Microsoft
3. Michael Koester – Designer Marketing Manager for Middle East and Africa and Central and Eastern Europe – Microsoft
4. Julian Harris – Conchango
5. David Pugh-Jones – Microsoft

The event was split into two tracks, a developer track and a designer track, but it generally focussed on Silverlight, and more specifically on two software packages, Visual Studio 2008 and Expression Studio, and even more specifically it introduced XAML as a common way for these packages to share content between them. XAML, Extensible Application Markup Language is an XML-like language that defines graphic elements in a human readable form that can be used in vector-imaging programs as well as Visual Studio 2008. This gives designers the flexibility to design interfaces without having to worry about programmers not being able to replicate their designs in a programming environment. Julian Harris demonstrated that you can export files from Adobe Illustrator into XAML format and import that XAML into Visual Studio 2008. XAML is also used in the Expression Studio range of products which includes amongst other two interesting products:

• Expression Blend
• Expression Design

Expression Blend is, almost like Adobe’s Flash Studio, which is an IDE that allows you to create WPF (Windows Presentation Foundation) and Silverlight applications. WPF is a technology that allows developers (and designers) to create applications that give users a better user experience (UX). Contemporary windows applications generally use square (often mundane) windows, whereas WPF applications allow designers to implement creative graphics into the interface. Rounded corners and transparent backgrounds for instance are used, and because Expression Blend can read and understand XAML, none of a designer’s creative flair is lost. The developer no longer has any excuses to develop interfaces that do not exactly meet the designer’s design.

What is AJAX? I know it’s an acronym for Asynchronous JavaScript and XML, but what does it really mean and how does it work. Client- and Server-side scripting is easy to understand on their own and its easy to understand how both technologies are used, but where it becomes tricky for myself is when the server-side and client-side code need to interact with each other. Developing web applications with ASP.NET does not always expose a developer to the inner workings of that specific technology. AJAX is not unique to PHP or ASP.NET. Both ASP.NET and PHP are server side scripting languages. The first thing to understand is that AJAX is not a technology on its own, nor is it something that has not been there before, because it uses existing technologies (JavaScript, XML) to do what it does. AJAX uses a combination of programming tools to create web-based applications that react more like software applications – this means that the web-based application responds much smoother and nicer and the page does not reload to retrieve new content.

I still have not defined what AJAX looks like or what it exactly does. AJAX is based on open standards such as HTML, CSS, XML and JavaScript. AJAX uses XML and HTTP Requests to communicate with a web server. Another important thing to note is that with AJAX web applications do not re-submit a web page every time a user makes a request. If for example a user enters data on a form and submits the information to a web server, the web server will traditionally create a new page after the submit has occurred, but AJAX communicates with the web server in such a way that updates to the page only happen to the sections of the page that are affected.

So the contact form on my website should allow visitors to send an email with their name, email address and a message. All three fields are required and should not contain empty values. The validation will be done server side, so that the user can see what they are doing wrong immediately and take any necessary steps to correct the information they entered.

One thing that has been bugging me recently has been to find an easy way to validate forms, and I came across LiveValidation. It’s pretty easy to setup and use, and I will be using it to create the form described above.

I also downloaded Amaya, an free XHTML editor, since I am extremely keen on sticking to Web Standards and all.

The basic structure for the form can be seen here. The form requires all three fields and validates the email address field, and if the email address field is found to be valid a alert message box appears on the screen. The underlying JavaScript code is quite interesting to note:

var fld_name = new LiveValidation( 'fld_name', {onlyOnSubmit: true } );
fld_name.add(Validate.Presence);
var fld_email = new LiveValidation( 'fld_email', {onlyOnSubmit: true } );
fld_email.add(Validate.Email);
fld_email.add(Validate.Presence);
var fld_msg = new LiveValidation( 'fld_msg', {onlyOnSubmit: true } );
fld_msg.add(Validate.Presence);
var automaticOnSubmit = fld_email.form.onsubmit;
fld_email.form.onsubmit = function(){
    var valid = automaticOnSubmit();
    if(valid)alert('Thank you for submitting your message!');
    return false;
}