• Comment as much as needed, but no more: comment what you consider needed, but don’t tell others your life story. Too many comments may make some other developer get distracted from the actual code.
• Javascript is used to define the behaviour, not the look & feel: even though there’s the possibility to set the appearance of your application through JavaScript, you should leave that for CSS. Always follow the “separation of concerns” mantra. A change in the icons or the color of borders shouldn’t require dealing with JavaScript code.
• Modularize: keep your code modularized and specialized. Make sure to write smaller, generic helper functions that fulfill one specific task, rather than catch-all methods.
• Allow for configuration and translation: everything that is likely to change in your code should not be scattered throughout the code, for example, labels, CSS classes and IDs. By putting these into a configuration object and making it public, we make maintenance very easy and allow for customization.
• Access the DOM as little as possible: accessing the DOM in browsers is an expensive thing to do. The DOM is a very complex API and rendering in browsers can take up a lot of time. To make sure that your code is fast and doesn’t slow down the browser to a halt try to keep DOM access to a bare minimum.
• Build on the shoulders of giants: JavaScript libraries are specifically built to make browsers behave as you would expect by plugging browser holes. Therefore, if you want to write code that works without keeping the maintenance overhead of supporting current browsers and those to come, start with a good library.
• Development code is not live code: live code is done for machines, development code is done for humans. Make your code as readable and understandable as possible. Then, before deploying your web application, collate, minify and optimize your code in a build process.

If you follow all these recommendations, you can be sure you’ll have produced a high quality code that will be easy to maintain.

Related posts:

1. JavaScript best practices I
2. Javascript frameworks overview
3. Object Oriented JavaScript I: the basics

• Always use ‘var’: although it is not compulsory, the use of the ‘var’ keyword is always recommended. By using it, your code will execute faster, and you will avoid some potential problems.
• Feature-detect rather than browser-detect: before using any advanced feature that an older browser may not support, check to see if the function or property exists first, instead of writing code to detect browser versions.
• Avoid ‘eval’: the eval() function in JavaScript allows a programmer to run arbitrary code at run-time, by interpreting a string as if it was code. If it exists in your page, there is almost always a more correct way to accomplish what you are doing. “Eval is evil.” Don’t use it unless you are an experienced developer and know that your case is an exception.
• Use unobstrusive JavaScript: now, this is an important one: HTML and JavaScript code should not be mixed together. You should always follow the “separation of concerns” mantra: HTML defines the structure and content of a web page, and JavaScript defines the behavior. Therefore, do not use inline event handlers. Attach your event-handling code by JavaScript. This way, you’ll improve readability and maintainability.
• Avoid cluttering the global namespace: global variables and functions are rarely required. Using globals may cause naming conflicts between JavaScript source files and cause code to break. You should always use object oriented programming and write all your code in classes when writing JavaScript code.
• Use JSON: when storing data structures as plain text or sending/retrieving data structures via Ajax, use JSON instead of XML when possible. JSON (JavaScript Object Notation) is a more compact and efficient data format, and is language-neutral.
• Make you code understandable: choose easy to understand and short names for variables and functions. Think of your code as a story – a story that should be easy to read and understand, the names you choose shouldn’t make it more complicated.

In my next post I’ll discuss some more recommendations. Stay tuned!

Related posts:

1. JavaScript best practices II
2. Object Oriented JavaScript III: some tips
3. Object Oriented JavaScript I: the basics
4. Javascript frameworks overview
5. Object Oriented JavaScript II: the pattern

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!

UPDATE (October 12th, 2010):

The Web Socket protocol is not closed yet, so it is being constantly updated. This means that previous Web Socket server implementations might stop working after an update has been made to the API. The original version of the code I released here complied with version 75 of the Web Socket draft. The current version is 76, so I updated my code and released a second project.

No idea of what I’m talking about? I’ll make it easy for you… download the v76 implementation first, and if it doesn’t work then check out the v75 implementation. If you’re using one of the latest browsers, you should have no trouble.

WebSocketsTest (draft 75).zip (Older browsers)

WebSocketsTest (draft 76).zip (Latest browsers)

Related posts:

1. HTML 5 Web Sockets
2. AJAX call using an ASP.NET web page
3. AJAX call using an ASP.NET HTTP Handler
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 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

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 an ASP.NET HTTP Handler
4. AJAX call using ASP.NET Web Services
5. HTML 5 C# Web Sockets server and ASP.NET client implementation

We’ve implemented the jqGrid plugin in a couple of pages in our project at work. We needed some multiselect in one of them. This option seems very easy to implement: just add a couple of options at creation time and you’re done… well, not quite. JqGrid’s multiselect default behaviour is not really the standard one. I mean, it is a multiselect, just not what the regular user might be used to.

What I was expecting from a multiselect behaviour is to behave just as normal as long as no special key is pressed. I mean, if you have a row selected and  click on another with no other key pressed, then it should select the new one and deselect the old row. Well, jqGrid’s standard options lets you choose between always regular behaviour, or always multiselect. You can’t have multiselect only when a special key is pressed.

I didn’t like it. So I changed it. So here I’m posting the code that needs to be changed in case somebody wants this behaviour too. I wrote some comments throughout the code to clarify what I’m doing a bit.

Please note that these changes are made to the 3.4.4 version of jqGrid. If you’re using some other version, consult first whether this behaviour is not already implemented… or even if these changes can be made at all.

File grid.base.js. Line 193 – function setSelection:

	// We get a parameter telling us whether the special multiselect key has been pressed
	// This parameter might not always be passed
	$.fn.setSelection = function(selection,onsr,sd,multiselectKeyPressed) {
		return this.each(function(){
			var $t = this, stat,pt, ind;
			onsr = onsr === false ? false : true;
			if(selection===false) {pt = sd;}
			else { ind = $($t).getInd($t.rows,selection); pt=$($t.rows[ind]);}
			selection = $(pt).attr("id");
			if (!pt.html()) {return;}
			if($t.p.selrow && $t.p.scrollrows===true) {
				var olr = $($t).getInd($t.rows,$t.p.selrow);
				var ner = $($t).getInd($t.rows,selection);
				if(ner >=0 ){
					if(ner > olr ) {
						scrGrid(ner,'d');
					} else {
						scrGrid(ner,'u');
					}
				}
			}
			// If multiselect is enabled but the key has not been pressed, it's as if multiselect was disabled
			if(!$t.p.multiselect || (multiselectKeyPressed != null && !multiselectKeyPressed)) {
				if($(pt).attr("class") !== "subgrid") {
				if( $t.p.selrow ) {
					// This only deselects the last selected row. Only one row was supossed to be selected simultaneously
					// $("tr#"+$t.p.selrow.replace(".", "\\."),$t.grid.bDiv).removeClass("selected");
					// This way we consider there may be more than one selected row. Deselects all selected rows:
					$("#" + this.id + " tr.selected").removeClass("selected");
				}
				$t.p.selrow = selection;
				$(pt).addClass("selected");
				if ($t.p.multiselect) {
					$t.p.selarrrow = new Array();  // Empty the array containing selected rows
					$t.p.selarrrow.push($t.p.selrow);  // Insert the new selected row
				}
				if( $t.p.onSelectRow && onsr) { $t.p.onSelectRow($t.p.selrow, true); }
				}
			} else {
				$t.p.selrow = selection;
				var ia = $.inArray($t.p.selrow,$t.p.selarrrow);
				if (!$(pt).hasClass("selected") && ia != -1) ia = -1;  // Might report as not in the array
				if (  ia === -1 ){
					if($(pt).attr("class") !== "subgrid") { $(pt).addClass("selected");}
					stat = true;
					$("#jqg_"+$t.p.selrow.replace(".", "\\.") ,$t.rows).attr("checked",stat);
					$t.p.selarrrow.push($t.p.selrow);
					if( $t.p.onSelectRow && onsr) { $t.p.onSelectRow($t.p.selrow, stat); }
				} else {
					if($(pt).attr("class") !== "subgrid") { $(pt).removeClass("selected");}
					stat = false;
					$("#jqg_"+$t.p.selrow.replace(".", "\\.") ,$t.rows).attr("checked",stat);
					$t.p.selarrrow.splice(ia,1);
					if( $t.p.onSelectRow && onsr) { $t.p.onSelectRow($t.p.selrow, stat); }
					var tpsr = $t.p.selarrrow[0];
					$t.p.selrow = (tpsr==undefined) ? null : tpsr;
				}
			}
			function scrGrid(iR,tp){
				var ch = $($t.grid.bDiv)[0].clientHeight,
				st = $($t.grid.bDiv)[0].scrollTop,
				nROT = $t.rows[iR].offsetTop+$t.rows[iR].clientHeight,
				pROT = $t.rows[iR].offsetTop;
				if(tp == 'd') {
					if(nROT >= ch) { $($t.grid.bDiv)[0].scrollTop = st + nROT-pROT; }
				}
				if(tp == 'u'){
					if (pROT < st) { $($t.grid.bDiv)[0].scrollTop = st - nROT+pROT; }
				}
			}
		});
	};

Line 1433: event handling:

		$(ts).before(grid.hDiv).css("width", grid.width+"px").click(function(e) {
			evt = window.event || e;  // Get the event
			td = (e.target || e.srcElement);
			if (td.href) { return true; }
			var scb = $(td).hasClass("cbox");
			ptr = $(td,ts.rows).parents("tr.jqgrow");
			if($(ptr).length === 0 ) {return false;}
			var cSel = true;
			if(bSR) { cSel = bSR(ptr.attr("id"));}
			if(cSel === true) {
				if(ts.p.cellEdit === true) {
					if(ts.p.multiselect && scb){
						$(ts).setSelection(false,true,ptr);
					} else {
						ri = ptr[0].rowIndex;
						ci = !$(td).is('td') ? $(td).parents("td:first")[0].cellIndex : td.cellIndex;
						try {$(ts).editCell(ri,ci,true,true);} catch (e) {}
					}
				} else if ( !ts.p.multikey || !e[ts.p.multikey] ) {  // Check if the special multiselect key was pressed
					if(ts.p.multiselect && ts.p.multiboxonly) {
						// Pass whether the special multiselect key was pressed
						if(scb){$(ts).setSelection(false,true,ptr,e[ts.p.multikey]);}
					} else {
						// Pass whether the special multiselect key was pressed
						$(ts).setSelection(false,true,ptr,e[ts.p.multikey]);
					}
				} else {
					if(e[ts.p.multikey]) {
						$(ts).setSelection(false,true,ptr);
					} else if(ts.p.multiselect && scb) {
						scb = $("[id^=jqg_]",ptr).attr("checked");
						$("[id^=jqg_]",ptr).attr("checked",!scb);
					}
				}
				if(onSC) {
					ri = ptr[0].id;
					ci = !$(td).is('td') ? $(td).parents("td:first")[0].cellIndex : td.cellIndex;
					onSC(ri,ci,$(td).html(),td);
				}
			}
			e.stopPropagation();
		})

But there’s still more. One of the great features of jqGrid is subgrid. This feature allows having a nested grid inside a row. When enabling the subgrid option, you’ll get one checkbox column. But this column it’s not really necessary, you might opt for hiding it out. If you do so when you have multiselect enabled, then the subgrids will look weird… they will have moved to the right, leaving an ugly blank space to the left… what happened?

When having multiselect enabled, the subgrid assumes you’ll always display the checkbox column. That’s all. So we can go the subgrid code and tweak it to check if the checkbox column is hidden.

File grid.subgrid.js, line 20 – Click event handler:

.click( function(e) {
	if($(this).hasClass("sgcollapsed")) {
		pID = $("table:first",ts.grid.bDiv).attr("id");
		res = $(this).parent();
		var atd= pos==1?'< td>< /td>':'';

		// Begin modification
		// To reach the grid we need $(this).parent().parent().parent()
		$($(this).parent().parent().parent()[0].p.colModel).each(function(i) {
			// If CB column exists and it's hidden, there's one cell less
			if (this.name == 'cb' && this.hidden) atd= pos==1?'':'';
		});
		// End modification

		_id = $(res).attr("id");
		bfsc =true;
		if($.isFunction(ts.p.subGridBeforeExpand)) {
			bfsc = ts.p.subGridBeforeExpand(pID+"_"+_id,_id);
		}

I posted the code here just to see what the changes are. If you’re going to be using this modification, probably it’s going to be easier if you just download the modified files and replace them with the ones you have: grid.base.js and grid.subgrid.js . Remember this modification is ONLY for version 3.4.4 of jqGrid!

Hope this helps! If you have any doubt, don’t hesitate to drop me a line!

Related posts:

1. jQuery Grid plugin: jqGrid

Themeable interface: you can set it up as you wish

The most important features jqGrid has are:

• Paging. This feature enables the developer to display data page by page. Data will not be retrieved from the server until the end user comes to that page. Developers can control how many rows are displayed at a time.
• Resizable Columns. Column width can be changed by the end user.
• Sorting & various data types. The end user can sort records by clicking on the header of a column. Developers can specify sorting for various types including string, number, boolean, link, select and percent.
• Event handlers & user API. Event handlers and various methods give you more flexibility without coding too much.
• Auto loading data when scrolling. This feature allows you to load data without paging and using only the vertical scrollbar.
• Working with local data. jqGrid can work with local data defined as an array.
• Cross browser. Supports IE 6.0+, FireFox 2.0+, Safari 3.0+, Opera 9.2+ and Google Chrome.
• Multilanguage support (i18n). JqGrid currently supports more than 20 languages.
• Support for XML, JSON and arrays as data sources. Another great feature is the possibility to define your own custom data type.
• SubGrids. Using a SubGrid is the easiest method for displaying data from child records.
• Inline editing. Allows to update the cell content in a particular row in an in easy way.
• Searching and filtering. The columns in the grid can be used as the basis for a search form to appear above, below, or in place of the grid.
• Import / Export. JqGrid is able to import or export the entire grid configuration to another file format.
• And many more!

This is a Javascript plugin running on the client which communicates with the server through AJAX. This means that you can use any technology you like on the server: ASP, PHP, JSP, etc.

In some other post I’ll explain how set it up and get it working in an ASP.NET project…

Links:

• jqGrid official web page
• Some demos
• Documentation

This is the grid I’m using at work. Both myself and the end users are very happy with this plugin. Check it out and see for yourself what I’m talking about!

Related posts:

1. jqGrid multiselect: a little improvement