Those who have never tried unit testing before might be wondering right now… so, you’re saying that we need to write code that isn’t destined to make the application work? As if regular coding wasn’t hard enough! Well, keep in mind that these isolated tests provide different basic advantages:

• Unit testing promotes change: It facilitates a programmer to rewrite some code to improve its structure, architecture or performance (what is called refactoring). These tests will be run afterwards, making sure the code still has the same functionality as before.
• Unit testing simplifies integration: If we apply unit tests to all the different parts of our code, once we reach the integration phase we can be certain the code is actually working properly. This way integration tests will be simplified and the time spent in this phase will be highly reduced.
• Unit testing documents the code: The very tests themselves tell other programmers how to use the code and its intended behavior.
• Unit testing facilitates and promotes separation between interface and implementation: Since the only interaction between test cases and the code being tested are their interface, any change to them must be done without changing it.
• Unit testing make errors bounded and easier to locate: since you’re checking the behaviour of a small piece of code at a time.
• Unit testing discovers bugs very early in the development process: always remember that the effort to solve a bug is not a linear but an exponential function in time: the more time elapsed from the writing of the code till the discovery of a bug, the more difficult it will be to remove it. The majority of bugs of a module must be taken care of before marking that module as finished.

Unit tests are a fundamental tool to catch bugs early in the development process. I will never get tired to repeat that bugs must be discovered as soon as possible: if a bug is discovered in pre-production phase it will most likely be extremely difficult to take care of… or it might not even be removed at all!

Although I mention some of the benefits of using unit tests here, I can’t really explain how much your experience as developer will improve by using them! If you start writing unit tests for all the code you write, you will very shortly start to produce modules with many many many less bugs than before, making you a faster and more productive developer, and improving the relationship with your boss and clients.

So, if I have already convinced you of how convenient the habit of writing unit tests is, take a look at NUnit. NUnit is the most used unit testing framework for .NET and Mono. It is open source, and has a whole bunch of documentation available, so it shouldn’t be very difficult to get started with it.

Just to get an idea of what NUnit is about, here’s some example code:

using NUnit.Framework; 

[TestFixture]
public class NUnitExample
{
    [Test]
    public void Test()
    {
         Assert.AreEqual(10, 5+5, "Add");
    }
}

Simple enough, right? Well, trust me when I tell you that it can really get much more complicated than this… but still, this will give you an idea about what this whole thing is about.

Now, you have to keep in mind that, as with all writing of code, the quality of unit tests depends on the programmer. If you write bad unit tests, then you won’t have advanced a great deal in discovering possible bugs. Unit tests are not miracles, they are just one more tool you have to do your job better.

But as true as this is, I totally recommend you to start trying out unit testing ASAP! Don’t be lazy to start writing unit tests! The time you loose today in writing one will be recovered tomorrow multiplied by a factor of 10. Once you have the habit of always writing unit tests, you’ll see that you’re much more productive than before.

You just must keep on practicing writing unit tests. As all things in life, the more you practice, the better you’ll do!

Related posts:

1. Improving software quality: automatic testing

There are many tools to improve the quality of our work. Developers have refactoring tools, memory profilers, code coverage, etc. But in a software project we also have testing resources, also known as Quality Assurance. Their job is to test the application and find as many bugs as possible: to achieve a high quality product, thorough testing is a very important step. However, this can be a very tedious and time-consuming task. Fortunately, part of this work can be performed automatically using some tools.

Automated testing tools provide:

1. Better software
   By building a library of automated tests, you are generally going to ship better software that you can guarantee will work when used in certain, predictable, preconceived ways (the uses cases that have been accounted for in the tests).
2. Continuously-run tests
   Once you have tests automated, there is very little cost to running the tests. As such, once you’ve made the investment in building automated tests scripts, there is no good reason not to run them frequently. You could schedule a process to run all tests every night, and get the results in the morning to start fixing the bugs as soon as possible.
3. Cheaper to fix bugs
   The moment in which you find the bug and how much it costs to fix are highly correlated. The more time that elapses from when the bug was created to when the bug is actually found, the more expensive the bug becomes to find and fix. If it is found in a matter of hours instead of weeks (or maybe even months) the amount of effort involved in fixing it is going to be orders of magnitude smaller.
4. Freedom to change and evolve the software
   As software systems get bigger, it becomes harder and harder to make changes without breaking things. If you’ve got a large battery of automated test scripts, it frees the programmers to touch parts of the code that they might have fear to break otherwise.  the automated testing is a “safety net”: they can refactor the code, add or change features, etc. with a lot less loss of sleep.
5. Happier clients
   Less bugs mean less problems with customers, less support costs and higher retention rates.

A growing trend in software development is the use of testing frameworks that allow the execution of unit tests to determine whether various sections of the code are acting as expected under various circumstances. Test cases describe tests that need to be run on the program to verify that the program runs as expected. These tests are written to define the functionality before the code is written. Only when all tests pass is the code considered complete.

Many test automation tools provide record and playback features that allow users to interactively record user actions and replay it back any number of times, comparing actual results to those expected. The advantage of this approach is that it requires little or no software development to perform the tests. This approach can be applied to any application that has a graphical user interface. These tools perform what is called Graphical User Interface (GUI) testing.

In the next two posts we’ll be discussing Unit and GUI testing tools. Stay tuned!

Related posts:

1. Unit testing

I’ve developed a very basic Web Socket server implementation in C# just as a proof of concept. It handles the most basic operations you would expect from a server: start a new connection, disconnect, and send and receive data. Besides, I’ve developed the client part as well using regular ASP.NET. Actually it’s just plain HTML and JavaScript being served from an ASP.NET server – this example doesn’t use any fancy runat=server controls or anything of the like. The functionality is achieved with very simple and easy to understand JavaScript.

So what does this example do? It provides two projects: a Web Socket server and a Web Socket client. The server is a windows console application that once executed just sits there waiting for a connection request. When a client connects, the server sends its date and time to the client every 10 seconds. The client is a web page with some controls to connect/disconnect and to send data to the server, as well as a log window to see what’s going on. Take a look at the example at the bottom of the page.

Here’s a description of the public members of the Web Socket Server:

// Possible status of the server
enum ServerStatusLevel { Off, WaitingConnection, ConnectionEstablished };
// Constructor of the server with default values
WebSocketServer();
// Constructor of the server with the specified values
WebSocketServer (int serverPort, string serverLocation, string connectionOrigin);
// Close the server and release all resources
void Dispose();
// Start the server and make it listen for connection requests
void StartServer();
// Send data to the connected client
void Send (string message);
// Whether events should be logged or not
bool LogEvents;
// Origin of the connection
string ConnectionOrigin;
// Location of the server
string ServerLocation;
// Port of the server
int ServerPort;
// Current status of the server
ServerStatusLevel Status;
// Fired when data is received from the client
event DataReceivedEventHandler DataReceived;
// Fired when client is disconnected
event DisconnectedEventHandler Disconnected;
// Fired when a new connection is established
event NewConnectionEventHandler NewConnection;

Note how I provide two constructors for the Web Socket Server class: one with default parameters (if you want to keep it as simple as possible), and another one to specify the values you want. Anyways, you can still change them after creating the new instance, as the properties are public. You can also specify whether you want the server to log out the events to the console with the LogEvents property.

In order to get the data being sent from the client, you must attach your own function to the DataReceived event, which will then receive the message as a parameter.

So here’s how you would use this Web Socket Server:

public void Test()
{
    WebSocketServer WSServer = new WebSocketServer();  // Default values
    WSServer.NewConnection += new NewConnectionEventHandler(WSServer_NewConnection);
    WSServer.Disconnected += new DisconnectedEventHandler(WSServer_Disconnected);
    WSServer.DataReceived += new DataReceivedEventHandler(WSServer_DataReceived);
    WSServer.StartServer();
}

void WSServer_DataReceived(string message, EventArgs e)
{
    Console.WriteLine("Data received from the client: " + message);
}

void WSServer_Disconnected(EventArgs e)
{
    Console.WriteLine("Server disconnected");
}

void WSServer_NewConnection(EventArgs e)
{
    Console.WriteLine("New connection established");
    WSServer.Send("Hello new client! I hope you enjoy your visit!");
}

It’s a very simple Web Socket server, so it’s very easy to use. You shouldn’t have much problem understanding it.

Go ahead and download the Visual Studio solution and give it a try!

WebSocketsTest.zip

Related posts:

1. HTML 5 Web Sockets
2. AJAX call using an ASP.NET web page
3. AJAX call using an ASP.NET Page Method
4. AJAX call using an ASP.NET HTTP Handler
5. AJAX call using ASP.NET Web Services

The history: the beginning of AJAX

The world wide web and the Internet started as a stateless content delivery mechanism, taking a step backwards compared to traditional desktop applications. Early Internet applications needed to explicitly request every piece of information, and the server sent only the requested data.

Then came what we now call “Web 2.0 application development”: Dynamic HTML, heavy usage of JavaScript, AJAX, and various plugins (Adobe Flash and Microsoft Silverlight). These applications were dynamic and responsive, and they brought much of that rich interactive experience users enjoyed in desktop client/server applications to the Internet. However, due to the request and response architecture that these applications are based on, the latest Rich Internet Applications still cannot match the connectivity and the capability to get real-time data that client/server applications had more than a decade ago.

The reason is that these applications still need to initiate the communication from the web browser to get some data from the server: that is, the client part of the application running in the web browser has no way to know whether the server has some data for it.

The next logical step: polling and Comet programming techniques

Thus, software engineers started working in solving this problem. The client needed to be conscious of any request the server might have for it. But how to achieve this? Well, if communication can only be started by the client, then let’s just make it that way. We’ll make the client constantly ask the server whether there’s some data ready for it. This is what is called polling.

By using this technique, the web application essentially polls the server on a regular basis, based on a timer, using a simple HTTP request each time the timer expires. However, the cost of polling frequently is very high – both in terms of network bandwidth as well as server infrastructure needed to support a huge number of polling requests. The server must have the capability to buffer the data that it needs to send to the client until the next request comes from the client.

After a short while, this technique was seen totally unusable due to its great resource requirements. Then came the Comet programming techniques – long polling and streaming:

In long polling, also known as asynchronous polling, the browser sends a request to the server and the server keeps the request open for a set period. If a notification is received within that period, a response containing the message is sent to the client. If a notification is not received within the set time period, the server sends a response to terminate the open request and the browser resends the request to the server.

When streaming is used, the browser sends a complete request, but the server sends and maintains an open response that is continuously updated. A request is sent and kept open indefinitely (or for a set period of time) and the response is updated whenever a message is ready to be sent, but the server never signals to complete the response, thus keeping the connection open to deliver future messages.

But if you think about it, these techniques are just hacks, tricks used to simulate a technology that doesn’t exist: server-sent events. If the server could actually start the communication, none of these ugly tricks would be needed.

The evolution: server-sent events & Web Sockets

We had to wait until HTML 5 came to solve this problem. The Communication section in the HTML 5 specification section introduces server-sent events and Web Sockets. These new features enable a new paradigm of web application programming that will revolutionize the way to develop and deploy web applications.

Server-sent events are not quite the solution, but a formalization of Comet programming techniques. The server-sent event HTML 5 specification introduces a new DOM element called eventsource.

But the guy we must pay all our attention to is the HTML 5 Web Socket specification: the Web Socket interface defines a full duplex communications channel that is exposed via a JavaScript interface in HTML 5 compliant browsers.

When a new Web Socket connection is established, the browser opens an HTTP connection to the server first and then negotiates with the server to upgrade the connection to a dedicated and persistent Web Socket connection. This process automatically sets up a tunnel through to the server, solving numerous issues that the various Comet programming techniques encountered. Once established the Web Socket is a full duplex channel between the client and the server.

I’ve developed a Web Socket server and client implementation. Check it out for yourself and see what I’m talking about!

Related posts:

1. HTML 5 C# Web Sockets server and ASP.NET client implementation
2. Different ways to use AJAX in ASP.NET
3. AJAX call using an ASP.NET web page
4. AJAX call using an ASP.NET Page Method
5. AJAX call using ASP.NET Web Services

Web Services are a very general model for building applications, and can be implemented for any operation system that supports communication over the Internet. A Web Service is some programmable application logic accessible via standard Web protocols. It is often referred to as Web APIs as well, since they are a set of methods that provide some functionality through remote method calls. It is a way of offering some of your functionality to all of the internet. But, of course, some kind of restrictions and security can be built into your web services, if that’s what you wish.

As it turns out, the previous article I posted showing how to use Page Methods was also a Web Service: Web Methods are the building blocks of Web Services (a Web Service has many different Web Methods). But it was a very small and simple implementation, intended to return simple data to a small script placed in that same web page. The example we’re going to see follows the same concept, but in a larger way. We’re going to see the basics of how to implement a full-blown Web Service that can be accessed from anywhere on the internet.

This is very handful if you want to develop a collection of methods to be called from anywhere in your application. Imagine you’d like to know in which moment the user logged in to the system: you could write this server method and then make it public as a web service. This way, you’ll have this server functionality available through an AJAX call from anywhere in the application.

Ok, enough theory, now let’s get our hands dirty. Get to the .aspx part of the web page in which you wish to implement your ajax call, and write the HTML code we’ve been using in all our examples:

<body>
    <form id="form1" runat="server">
      <h2>AJAX call test page</h2>
      <button type="button" onclick='ExecuteAJAXCall()'>Get server time</button>
      <br /><br />
      <div id="DataContainer" ></div>
    </form>
</body>

We need a button to perform the AJAX call, and an empty DIV to hold the data retrieved from the server. Now, the Javascript code:

<script type="text/javascript">
    function ExecuteAJAXCall() {
        $.ajax({
            type: "POST",
            url: "AJAXCalls.asmx/GetServerTime",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: Callback_AJAXCall
        });
    };

    function Callback_AJAXCall(data) {
        document.getElementById("DataContainer").innerHTML = "The time at the server is: " + data.d;
    };
</script>

Note that the first function is invoked when the button is pressed. This function is in charge of performing the AJAX call by using the jQuery framework. This time, this function has changed a bit from other examples. Web Services calls require more parameters to set the communication between client and server up. The content type must be declared as “application/json; charset=utf-8”. And, as with the previous Page Method example, server procedures are called using the syntax [page name] + “/” + [method name].

When the AJAX call returns, we have the usual function that takes care of painting the result on the screen. Note how we need to use the d property to access the data this time.

Now, we need to write the Web Service. The easiest way is to right-click on your project and add a new item from there. Select Web Service, and you’ll get a skeleton from which you can implement the functionality you wish in your web service. For our example, we’ll write this piece of code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebServiceAJAXCall
{
    /// <summary>
    /// Summary description for AJAXCalls
    /// </summary>
    [WebService(Namespace = "http://www.undisciplinedbytes.com/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class AJAXCalls : System.Web.Services.WebService
    {

        [WebMethod] public string GetServerTime()
        {
            return DateTime.Now.ToString();
        }
    }
}

As you can see, we’ve only written the code required to return the server date and time. If you compare this example to the previous one where I explained how to implement AJAX calls with page methods, you can see that this is essentially the same thing. It all comes down to using the WebMethod attribute from the System.Web.Services library. However, this example that we’re seeing today is more complete, as it is implemented using a full-blown web service. The objective of this article is not to fully explain ASP.NET Web Services (I’ll leave that to some other post I have in mind), but to explain the very basics to be able to implement and AJAX call using them, so I won’t bother about diving into the details. But keep in mind that Web Services are much more powerful than this, and that their intention aim much higher than simple AJAX calls.

Here’s the Visual Studio project for you to play with:

WebServiceAJAXCall.zip

Related posts:

1. AJAX call using an ASP.NET Page Method
2. AJAX call using an ASP.NET HTTP Handler
3. AJAX call using an ASP.NET web page
4. Different ways to use AJAX in ASP.NET
5. HTML 5 C# Web Sockets server and ASP.NET client implementation

ASP.NET allows you to define methods in the code-behind of an ASPX page. This is very helpful in situations where you want to expose some specific server side functionality such as data retrieval for a specific page. If you need to make the operation available to multiple different .aspx pages it’s a better idea to use a web service so your pages can share the functionality. We’ll see how to use web services in the next post.

Please note that page methods must be declared as static, meaning a page method is completely self-contained, and no page controls are accessible through the page method. For example, if you have a textbox on the web form, there is no way the page method can get or set its value. Consequently any changes with regards to the controls have no affect on the page method. It is stateless and it does not carry any of the view-state data typically carried around by an ASP.NET page.

Ok, so we’ll set up the HTML we need to run this test. We’ll use the same one we’ve been using in all our examples:

<body>
    <form id="form1" runat="server">
      <h2>AJAX call test page</h2>
      <button type="button" onclick='ExecuteAJAXCall()'>Get server time</button>
      <br /><br />
      <div id="DataContainer" ></div>
    </form>
</body>

As usual, we’ll draw a button to perform the AJAX call, and an empty DIV to hold the data retrieved from the server. Now, the Javascript call:

<script type="text/javascript">
    function ExecuteAJAXCall() {
        $.ajax({
            type: "POST",
            url: "default.aspx/GetServerTime",
            contentType: "application/json; charset=utf-8",
            data: "{}",
            dataType: 'json',
            success: Callback_AJAXCall
        });
    };

    function Callback_AJAXCall(data) {
        document.getElementById("DataContainer").innerHTML = "The time at the server is: " + data.d;
    };
</script>

Note that the first function is invoked when the button is pressed. This function is in charge of performing the AJAX call by using the jQuery framework. This time, this function has changed a bit from other examples. Page method AJAX calls require more parameters to set up the communication between client and server. We need to set the content type, and send the parameters to the method, even if it is a parameter-less method. Note how we’re calling the method by using the syntax [page name] + “/” + [method name].

When the AJAX call returns, we have the usual function that takes care of painting the result on the screen. Note how we need to use the d property to access the data this time.

Now comes the interesting part. As we saw before, we’re programming a serverside method in the same web page to return the data from the server, so we don’t need any more web pages in our project. To implement this functionality, get to the codebehind part of the web page and write this code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace PageMethodAJAXCall
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod] public static string GetServerTime()
        {
            return DateTime.Now.ToString();
        }
    }
}

The secret behind this magic is just the System.Web.Services library we’re importing. This library provides the WebMethod attribute, which can be used in public static methods to indicate they’re to be accessed by remote client calls. Whatever the function returns will be sent to the client. Note how this time we don’t need to serialize the data nor we need to deactivate the cache: everything is taken care of by the Web Services library. You just need to set the WebMethod attribute and return the data you want. Nothing more is required.

I would say this way of performing AJAX calls is the easiest of all. It requires almost no more concepts than what a developer will have from regular programming, and hides much of the complexity. However, it is not the standard way of communicating with the server for controls, plugins and widgets out there, so it is not always possible to use it. But if you’re developing your own web control from scratch or you can tweak the way some other web control requests data, you should consider using this technique. Remember: keep it simple!

As usual, you can take the Visual Studio project from here and take a look at it:

PageMethodAJAXCall.zip

Related posts:

1. AJAX call using ASP.NET Web Services
2. AJAX call using an ASP.NET web page
3. AJAX call using an ASP.NET HTTP Handler
4. Different ways to use AJAX in ASP.NET
5. HTML 5 C# Web Sockets server and ASP.NET client implementation

But, what is an HTTP handler? Well, as its names suggests, it is an element that handles HTTP requests. Well, but that’s what an .aspx web page does, right? Sure, but in a lengthier, slower and resource-hungrier way. Regular web pages inherit from the System.Web.UI.Page class, which contains a lot of overhead and pre and post-processing in order to make it easier for the programmer to return HTML code to the client performing a request. In other words, the web page class has stuff to make it easier to develop a web page. It’s got some logic, doesn’t it?

But, what if we don’t want to return a web page? Then we’re just wasting resources in our server, since we’re not to going to use any of the facilities the web page class provides. If what we want to return is not an actual web page, then you should avoid using the System.Web.UI.Page class.

We’ll take a closer look at HTTP handlers in some other post I’m preparing, but for now you should know that they’re more adequate for processing AJAX requests.

This example is quite similar to the previous one: the only difference is that the HTTP handler replaces the web page. Except for that, we’ll be doing the same call and using the same javascript code. However, just for clarity’s shake, I’ll be posting all the code involved here.

Ok, so now we’ll get our hands dirty and start doing some work! First, we’ll need some HTML code to draw a simple test page. Start a new Visual Studio Project and get to the newly created page. On the C# codebehind of the new page we won’t be changing anything. Leave everything by default. We’ll be doing our work in the .aspx part. This HTML code should be sufficient for our needs:

<body>
    <form id="form1" runat="server">
      <h2>jQuery AJAX call test page</h2>
      <button type="button" onclick='ExecuteAJAXCall()'>Get server time</button>
      <br /><br />
      <div id="DataContainer" ></div>
    </form>
</body>

This is a very simple page. We’ll just have a heading, a button to perform the AJAX call, and an empty DIV to hold the data retrieved from the server. Now we need some actual code to make the AJAX call:

<script type="text/javascript">
   function ExecuteAJAXCall() {
         $.ajax({
             url: "AJAXRequest.ashx",
             dataType: 'json',
             success: Callback_AJAXCall
         });
   };

   function Callback_AJAXCall(data) {
         document.getElementById("DataContainer").innerHTML = "The time at the server is: " + data;
   };
</script>

Note that the first function is invoked when the button is pressed. This function is in charge of performing the AJAX call by using the jQuery framework. We’re passing three parameters to the function: the URL of the element that will get called, they type of data we’re expecting back (JSON in this case) and the javascript function to execute once the data gets back to the client. The jQuery ajax function has many more parameters, but we didn’t need them this time since the example is not very complicated.

The function called when the data is returned is very simple: its only purpose is to take the string returned from the server and write it in the container we previously created for this purpose. Note that the parameter it receives, data, is already a javascript object. The AJAX call returns a simple string from the server, but the jQuery function is smart enough to convert that string to a javascript object and pass it to the function we indicated.

Ok, now we’re getting to the interesting point. Now that we have the test page in place, let’s deal with the AJAX call server-side. The AJAXRequest.ashx HTTP handler is the link between the client web browser and the server. Here we’ll process everything we need and we’ll return a string to the client with the data requested.

So here’s how we program an HTTP handler:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace WebApplication1
{
    ///
    /// Processes AJAX requests
    ///
    public class AJAXRequest : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            JavaScriptSerializer JSSerializer = new JavaScriptSerializer();
            string CurrentDate = DateTime.Now.ToString();

            context.Response.CacheControl = "no-cache";
            context.Response.ContentType = "text/plain";
            context.Response.Write(JSSerializer.Serialize(CurrentDate));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

To implement an HTTP handler you just need to implement the System.Web.IHttpHandler interface. You need to provide the desired behaviour to the ProcessRequest method and the  IsReusable property. The first method is the one which actually takes care of processing the HTTP requests and returning the data. The IsReusable property determines whether this instance of HTTP handler can be reused for fulfilling another request of the same type.

This implementation is very simple: it just takes the current date and time from the server, converts it to JSON format and returns it. Note the System.Web.Script.Serialization class we’re importing. This class takes care of converting the object we want to return to JSON format. Note the line in which we deactivate the cache as well. If you don’t do this, the AJAX call will always seem to return the same data, as the web browser will have kept a copy of it the first time it was executed. Most AJAX calls need the cache disabled in order to work properly.

You can download a copy of the Visual Studio project and do some tests to check how it works:

jQueryAJAXHTTPHandlerCall.zip

Related posts:

1. AJAX call using an ASP.NET web page
2. AJAX call using an ASP.NET Page Method
3. AJAX call using ASP.NET Web Services
4. Different ways to use AJAX in ASP.NET
5. HTML 5 C# Web Sockets server and ASP.NET client implementation

I’ll be using jQuery in this example. jQuery is a superb Javascript framework, and is the one I use the most. If you don’t know what it is yet, then the first thing you should do is getting acquainted with it. This JavaScript framework has many convenient functions to make an AJAX call. These functions hide much of the complexity of an AJAX call: you can forget about the XMLHttpRequest object if you wish, and only worry about what to do with the data once you get it back from the server.

So, in order to perform an AJAX request, we’ll follow these steps:

1. We’ll perform an AJAX call from the client, using Javascript. As I said before, we’ll be using jQuery. It makes the process much easier.
2. We’ll construct some way for the server to receive the request: in this example we’ll use a regular .aspx web page.
3. We’ll fetch the data to be returned to the client. This example is just a proof of concept, so we’ll leave this task to the reader. We’ll just return the server time.
4. We’ll convert that data into JSON notation.
5. Once the data gets back to the client, the jQuery library takes care of the conversion of the string received from the server to a Javascript object.
6. In this point we’ll have the data available to us. We’ll do something with it to show it on screen, for example.

Ok, we already have the theory covered. Now, let’s get to work! Start a new Visual Studio project, and get to the newly created page. On the C# codebehind of the new page we won’t be changing anything. Leave everything by default. We’ll be doing our work in the .aspx part. First, we’ll need a little bit of HTML to draw our page:

<body>
   <form id="form1" runat="server">
     <h2>jQuery AJAX call test page</h2>
     <button type="button" onclick='ExecuteAJAXCall()'>Get server time</button>
     <br /><br />
     <div id="DataContainer" ></div>
   </form>
</body>

This is a very simple page. We’ll just have a heading, a button to perform the AJAX call, and an empty DIV to hold the data retrieved from the server.

Now we need some actual code to make the AJAX call:

<script type="text/javascript">

    function ExecuteAJAXCall() {
        $.ajax({
            url: "AJAXCall.aspx",
            dataType: 'json',
            success: Callback_AJAXCall
        });
    };

    function Callback_AJAXCall(data) {
        document.getElementById("DataContainer").innerHTML = "The time at the server is: " + data;
    };

</script>

Note that the first function is invoked when the button is pressed. This function is in charge of performing the AJAX call by using the jQuery framework. We’re passing three parameters to the function: the URL of the page that will get called, they type of data we’re expecting back (JSON in this case) and the javascript function to execute once the data gets back to the client. The jQuery ajax function has many more parameters, but we didn’t need them this time since the example is not very complicated.

The function called when the data is returned is very simple: its only purpose is to take the string returned from the server and write it in the container we previously created for this purpose. Note that the parameter it receives, data, is already a javascript object. The AJAX call returned a simple string from the server, but the jQuery function is smart enough to convert that string to a javascript object and pass it to the function we indicated.

Ok, so now that we have the test page in place, let’s deal with the AJAX call server-side. The AJAXCall.aspx page is the link between the client web browser and the server. Here we’ll process everything we need and we’ll return a string to the client with the data requested.

Here is the C# codebehind from the AJAXCall.aspx page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

namespace jQueryAJAXCall
{
    public partial class AJAXCall : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) // Returns the server current date and time
        {
            JavaScriptSerializer JSSerializer = new JavaScriptSerializer();
            string CurrentDate = DateTime.Now.ToString();
            Response.CacheControl = "no-cache";
            Response.Write(JSSerializer.Serialize(CurrentDate));
        }
    }
}

Note the System.Web.Script.Serialization class we’re importing. This class takes care of converting the object we want to return to JSON format.

This page is very simple: it just takes the current date and time from the server, converts it to JSON format and returns it. Nothing more is needed. Simple enough, right? Be aware that this page must not return anything else than the JSON string: if you’re using Visual Studio be careful when creating this new webpage, as VS adds a bunch of HTML code by default in the .aspx page. Erase all HTML code, otherwise your javascript won’t be able to understand the data sent back.

Note the line in which we deactivate the cache. If you don’t do this, the AJAX call will always seem to return the same data, as the web browser will have kept a copy of it the first time it was executed. Most AJAX calls need the cache disabled in order to work properly.

So this is it! Nothing else is required. Donwload the Visual Studio project and play with it as much as you want:

jQueryAJAXCall.zip

Related posts:

1. AJAX call using an ASP.NET Page Method
2. AJAX call using an ASP.NET HTTP Handler
3. AJAX call using ASP.NET Web Services
4. Different ways to use AJAX in ASP.NET
5. HTML 5 C# Web Sockets server and ASP.NET client implementation

First things first: the basics

AJAX is a set of web application development techniques used to create RIA (Rich Internet Applications). These techniques are used in the web browser at the client’s computer, while an asynchronous communication with the web server is held in the background. Thus, it is possible to make changes in the pages without the need to reload them, increasing interactivity, speed and usability in these applications, compared to traditional click-and-wait web pages.

An AJAX call is nothing more than a request to the server for some data. It is the same thing as when you type in a web page address in your browser’s address box and hit Enter: your browser requests the server the HTML code representing that webpage. The only difference is that with an AJAX call, all this process takes place in the background, without the user’s knowledge. It is performed programmatically, using JavaScript.

AJAX stands for Asynchronous JavaScript and XML, which means that in its first conception XML was used to transmit data from the server to the client. But XML is not used much anymore, JSON is the preferred notation for this task. JSON is a lighter notation as it uses less characters, and follows the natural syntax of the JavaScript language. This means that, once you’ve received the data from the server in your JavaScript code, it is much simpler and faster to process it if it’s in JSON notation.

Let’s see a couple of examples to understand it better. This would be XML:

<Person firstName="John" lastName="Smith">
    <address>
      <streetAddress>21 2nd Street</streetAddress>
      <city>New York</city>
      <state>NY</state>
      <postalCode>10021</postalCode>
    </address>
    <phoneNumber type="home">212 555-1234</phoneNumber>
    <phoneNumber type="fax">646 555-4567</phoneNumber>
    <newSubscription>false</newSubscription>
    <companyName />
</Person>

And this would be the same data transmitted in JSON notation:

{
       "firstName": "John",
       "lastName": "Smith",
       "address": {
           "streetAddress": "21 2nd Street",
           "city": "New York",
           "state": "NY",
           "postalCode": 10021
       },
       "phoneNumbers": [
           { "type": "home", "number": "212 555-1234" },
           { "type": "fax", "number": "646 555-4567" }
       ],
       "newSubscription": false,
       "companyName": null
}

As you can see XML is lengthier to transmit. Besides, as it is not natural to JavaScript, the data must be interpreted and translated to a JavaScript object once it gets to the client, whereas JSON must not. Don’t worry though, you won’t have to deal with converting data to JSON and back, all this is done automatically.

Different ways of requesting data from the web server

There are several different techniques used to retrieve data from the server using ASP.NET technology. The most common ones are:

• URL. This is the most used technique to provide data through AJAX. Most JavaScript plugins are designed to work this way, so it can be considered the most important technique as well. At the server, this type of request can be processed using two different approaches:
  • The request is processed as if it was a regular web page
  • The request is processed through an HTTP Handler
• Page method. Server methods can be easily called just by using an attribute.
• Web service. Web services can be consumed from JavaScript, providing for an easy way to request data to the server.
• Web sockets. Not quite AJAX itself, web sockets are here to revolutionize the logic behind traditional client-server communication. Web sockets bring full-duplex and server-initiated communications, two techniques not possible in the web till now. They belong to the new HTML5 specification, and as such must be treated, meaning there’s not much support for it yet.

We’ll be taking a look at each of these techniques. Stay tuned!

Related posts:

1. AJAX call using an ASP.NET web page
2. AJAX call using an ASP.NET Page Method
3. AJAX call using ASP.NET Web Services
4. AJAX call using an ASP.NET HTTP Handler
5. HTML 5 C# Web Sockets server and ASP.NET client implementation

1. PHP is free. You do not have to pay to use it. With ASP.NET you need to pay a whole bunch of licenses.
2. PHP runs faster than ASP.NET.
3. PHP hosting is cheaper.
4. Out there on the internet, you can see more PHP than ASP.NET applications.
5. There’s more CMS on PHP than on ASP.NET.

Ok, he had his reasons, but I didn’t fully agree with him. So I discussed some of those ideas with him:

1. Yes, PHP is free, like ASP.NET. Well, at least for basic stuff. I mean, the core of ASP.NET is standardized, which means that anyone can develop a compiler/server for these specifications. As a matter of fact, the Mono Project aims to develop alternative components to replace Microsoft’s products. So far, they have released an implementation of the .NET runtime, a .NET development environment, and much more stuff. You can read more about this on Mono FAQ.
   Besides, if you don’t like MonoDevelop, you can still use the free version of Microsoft’s Visual Studio: Visual Web Developer. It’s pretty much the same thing, only designed to be used just by one person coding by himself.
2. PHP is an interpreted script, while ASP.NET applications are compiled. This means that ASP.NET is way faster than PHP. Yes, you could still use some techniques to accelerate PHP (like caching), but those same techniques can be applied to ASP.NET as well, making it even faster. If you want facts, you can take a look at this comparison.
3. Well, it depends. If you’re talking about installing your application in your own server, then you might need to install some windows server and IIS, and both of them cost money. Actually, Windows does cost money, but IIS is already included in the most recent versions. But, as I said before, the Mono Project provides some free alternative to that.
   If you’re talking about deploying your web app in some external hosting and paying a monthly fee, then it is not more expensive at all. I’ve found similar offers in both technologies… it’s not even hard to find free external hosting for both platforms – although that might not be the best experience, depending on your needs.
4. So? Other people might have some other different reasons. Or maybe they want to adopt the cheapest platform and they just don’t know that ASP.NET is standardized and that there’s open source solutions for this technology as well.
5. He might be right, the number of CMS implemented with PHP might be greater than those that use ASP.NET. But that doesn’t mean they’re better. In order to choose a CMS for your project, you should compare some of them and decide which one better fits your needs. And you can find almost identical functionality on CMS from both platforms.

But I still had some more points to add:

• Although many of them are not free, there’s a bunch of pre-programmed controls and components you can incorporate in your web app in ASP.NET (some of them are really impressive). And many of them don’t require much effort from your part… just drag&drop the component on your web app and you’re done. You can even develop your own highly-complex, highly-reusable web app controls and share them among many different apps in just a matter of minutes. This is especially useful for GUI widgets.
• By having full access to the .NET Framework, your ASP.NET application can have all the power of any Windows app.
• PHP is a single threaded application, while .NET framework supports multi-threading. In a highly loaded app, this can make a huge difference.

I know this discussion has been going on ever since ASP.NET was first released… but I’d say that asking whether PHP or ASP.NET is better just doesn’t make sense. There’s no such thing as the best language. The language you should use is the one that fits your needs best in the least amount of time. For some people it will be ASP.NET, and for others it will be PHP.

Still, I consider the ASP.NET platform an important skill every web application developer should have. But still, the whole point here is that you can find enough reasons to prefer or dislike any of these platforms… so it just comes down to personal preferences and project requirements.