Fremus.co.za

Ajax is not new, its not revolutionary, but it has changed the way I view web development. Javascript no longer comes as a might-have, instead it comes as a critical part of any website application. These days I use JavaScript as the UI scripting tool of choice, and I try to steer away from doing to much UI lifting in my server side code. jQuery makes dealing with UI quite pleasant.

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?

I have been thinking a lot recently about the use (or abuse) of AJAX on a website and it made me think of a strategy to try and adopt. Like all technological things it makes sense to understand the overall business goal first and then to proceed to the next step. It also makes sense not to focus too much effort in one area and neglect others. For instance, too much AJAX and JavaScript will create bigger and bigger .js files, which require more and more maintenance to try and keep small. On the other hand you cannot, not use AJAX, on or in your web applications these days. So whats the best strategy? Well I think you need to understand your business goals, and make sure that what you want to achieve can be achieved. Consistency is often something to strive for in this context, because being consistent is often far tougher than making one or two good impressions. The User Interface (UI) must be consistent throughout any application, rather than be too elaborate.

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.

I attended the Mix Essentials 2008 event at Canal Walk (Cape Town, South Africa) today and there were quite a few things that interested me. There were five speakers at the event:

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.

I downloaded the LiveValidation script recently and I realised after implementing it on a webpage I did not understand how it interacts with a PHP or ASP.NET application and it got me thinking that maybe I need to just try and understand how server-side and client-side code interacts with JavaScript.

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.

Here’s the thing right, I really want to create a nice contact form for my website, but I also want to make sure that the form accepts the right type of information. For this I need some JavaScript and of late I have been reading a lot about JavaScript libraries such as jquery, mootools and prototype. I have also worked a bit with ASP.NET Ajax, but I do find the .NET implementation does hide a lot of the inner workings of the JavaScript and does not force you to understand the core references as some of the other JavaScript libraries do. With .NET you can get some AJAX running without touching much JavaScript code at all.

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;
}

JavaScript has been found out! Its not as simplistic and uncomplicated as some, including me, believed. Its a full featured object-oriented scripting language that runs in your browser, and it spurned the development of Web 2.0 with the emergence of AJAX (Asynchronous Javascript and XML). The emergence of AJAX resulted in the development of better user interfaces for the web, better in the sense that they are more responsive. No longer are there clicks (post backs) or flickers when you click on a link or a button but instead you now have smoother responses. Off course if you turn JavaScript off in your browser, then all the functionality will disappear, but then again I guess not too many people do that.