The basic jQuery library doesn't do UI but there is a related jQueryUI library that does. NetAdvantage jQuery extends the UI and while it comes with ASP.NET MVC helper functions it can be used very easily from almost any server side technology. The reason for this is, of course, that it is a pure JavaScript clientside implementation. Let's take a look at how this works and how it all fits in with jQuery.

Getting started

All you have to do to start developing client side UIs is to download the trial version of NetAdvantage for jQuery from the Product Downloads page of the Infragistics website.

Once you have the zip file, run the installer which you will currently find in the Setups directory. The installer that you need to follow the instructions in this article is NetAdvantage_jQuery_20111, but you might also want to install the samples that you will find in the same directory.

Once the installer is finished you will discover an Infragistics item in the start menu. This is handy to gain access to the documentation and forums; however for the real work, you need to navigate to:

C:\Program Files (x86)\Infragistics\
             NetAdvantage 2011.1\jQuery

where you will find the JavaScript libraries and the MVC helper classes.

There are many ways to work with HTML/JavaScript and they are all equally good. To make things concrete I selected Microsoft's WebMatrix, which is free to download and very easy to use. T

o try out NetAdvantage jQuery simply start a new empty Web Site, Use the command New Site, Site from template.

The only really tricky bit in using jQuery and the Netadvantage add-on library is getting the correct JavaScript files available in the correct place. As with the main jQuery libraries, you can either opt to host the files yourself of use a Content Delivery Network CDN for all of the libraries. Infragistics has set up a CDN for NetAdvantage jQuery and Google offers one for the main jQuery files. For a production application using a CDN has lots of advantages, but to simply try things out it is safer in terms of making sure things work to actually place the files you need in local directories.

When you first start, working out exactly what files you need to load can be confusing. This isn't helped by the fact that you not only need the correct JavaScript files for things to work, you also need style sheets. Programmers often think that style sheets just modify the way things look and not how they work. This is more or less true, but it if you miss an appropriate style sheet what you see can be so different from what is intended that it effectively no longer works - see later for an example.

This confusion is compounded by the general omission of discussion of style sheets from the documentation. I can only assume that the programmers writing the documentation also view CSS files as being less important than the main JavaScript files.

To get started, create a Scripts directory in the project and store in it the single file:

ig.ui.min.js

The easiest way to do this is to right-click on the project and use the Show in Windows Explorer command - then simply drag and drop files from the Infragistics installation directory. At the time of writing the javascript file you need is in:

C:\Program Files (x86)\Infragistics\
         NetAdvantage 2011.1\jQuery\js\
                             combined\min

Next simply drag and drop the themes directory into the project. This contains all of the style sheets and images needed and, while you don't need all of them for any given project, you might as well copy them all for the purpose of development.

After copying the project structure should look something like:

Now we are ready to start building our first example page. If you are wondering where the main jQuery libraries are, we will download them from the Google CDN. If you want to you can download them into the script directory but using a CDN is simpler in this case.

A first control

Create a new HTML file called currency. The first thing we need to do is load the script libraries. First the two jQuery libraries:

<script src="https://ajax.googleapis.com/
 ajax/libs/jquery/1.4.4/jquery.min.js" 
        type="text/javascript"></script>
<script src="https://ajax.googleapis.com/
 ajax/libs/jqueryui/1.8.13/
    jquery-ui.min.js" 
        type="text/javascript"></script>

and finally the Netadvantage library:

<script src="/Scripts/ig.ui.min.js" 
        type="text/javascript"></script>

If you have stored any of the JavaScript files anywhere else then simply change the paths.

The process of using jQuery controls is fairly standard. First you need a suitable "dummy" html control in the web page that can be used by the JavaScript to create a "decorated" control which does the intended job. For a first example we are going to use a very simple control - the Currency Editor.  The html control that will form the basis of the enhanced control is a simple input box:

<body>
 <input id="currencyEditor" 
   type="text" 
     value="12345678.56723456" />
</body>

The value is optional but it gives us something to see when the page is first loaded. Note the id specified - which is used to connect the jQuery component to it.

Next we need to run the JavaScript code when the page is fully loaded. To do this we might as well take advantage of the jQuery ready event which with run a function when the document is fully loaded:

<script type="text/javascript">
 $(document).ready(function () {

All we have to do next is use jQuery to find the input box and then call the igCurrencyEditor method with appropriate parameters to augment it to a full Currency Editor object:

 $(document).ready(function () {
  $('#currencyEditor').igCurrencyEditor({
     width: 200
    });

Finally we have to remember to tidy up the function call with a closing

 });
</script>

The complete web page is:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <script src="https://ajax.googleapis.com/
    ajax/libs/jquery/1.4.4/jquery.min.js"
         type="text/javascript"></script>
 <script src="https://ajax.googleapis.com/
    ajax/libs/jqueryui/1.8.13/
      jquery-ui.min.js" 
         type="text/javascript"></script>
 <script src="/Scripts/ig.ui.min.js" 
         type="text/javascript"></script>
 <script type="text/javascript">
  $(document).ready(function () {
   $('#currencyEditor').igCurrencyEditor({
     width: 200
    });
  });
 </script>
 <title></title>
 </head>
 <body>
  <input id="currencyEditor" 
          type="text" 
          value="12345678.56723456" />
 </body>
</html>

When you launch the page, right click on the file and select launch in browser, you will see the Currency Editor complete with the initial value property formatted.

That's about all there is to it. You can now specify other parameters in the call to the method that augments the basic html control  You can look up the possible parameters in the documentation for each control although it has to be pointed out that at the moment many are missing and the sample code is the best source of information on options.