5 Ways to Improve Your ASP.NET MVC Pages With Help From jQuery UI

Introduction to ASP.NET MVC

ASP.NET MVC (Model-View-Controller) provides a light-weight framework with a lot of flexibility over the base ASP.NET framework. Unfortunately, this means we lose most of the high-level control structure provided by ASP.NET. This isn't necessarily a bad thing when you consider where web appplications are today. The focus has shifted to provide better and more unique user-interfaces. Thus MVC is the perfect fit whereby we can generate very controlled markup and user navigation.

From this base we can carefully add components to the project as necessary to build web applications. Out of the box, MVC projects include several JavaScript libraries including jQuery-1.4.1.js, jQuery.validate.js, etc. One library which could bring a lot to your MVC project is jQuery UI. The jQuery UI library allows you to easily create high-level UI functions in JavaScript. Using jQuery + jQuery UI you are able to easily create some of those controls which are missing from MVC. Listed below are 5 ways in which you can use jQuery UI to improve your MVC projects.

1. Dialog/Popups

Creating popup windows within JavaScript is not an easy proposition when you need to factor in features such as modal/non-modal, moveable, etc. Within jQuery UI all popups are known collectively as a dialog. When using dialogs there are a couple common usages such as displaying a static popup message, displaying a popup add/edit screens. Often add/edit dialogs, such as those used on grids are quite complex as it requires a call to the server before displaying the dialog. With a the help of a Partial View and the jQuery UI dialog it is quite simple as shown below.

First we need a DIV element which we will use to house the content for the popup. For our purpose here we can can just create a DIV with the id of EditDialogDiv. Then we need to create a javascript method to retrieve the contents for the dialog, open the popup and to close the popup. These two javascript methods are listed below.

  <script type="text/javascript">
  function GetEditDialog()
  {
     var lnk = '<%= Url.Action("EditDialog") %>';
  
     $.ajax({
        url: lnk,
        success: function (data) {
          //Set the Dialog Contents
          $('#EditDialogDiv').html(data);
  
          //Initialize and show the Dialog
          $('#EditDialogDiv').dialog();
          $('#EditDialogDiv').dialog({ title: 'Dialog Title', resizable: true, modal: false });
          $('#EditDialogDiv').dialog('open');
        }
     });
  }
  
  function EditDialogComplete()
  {
     $('#EditDialogDiv').dialog('close');
  }
  </script> 

The first method GetEditDialog uses a jQuery Ajax request to grab the contents of a PartialView returned from a Controller method. Once the Ajax call has the contents it replaces the EditDialogDiv with the data returned. Then the method initializes the jQuery Dialog and opens it. The second method EditDialogComplete will be called from within the dialog and is used to close it. Now that we have the JavaScript needed to open and close the Dialog, we need to look at how to trigger these. The open is simple enough, call GetEditDialog() on an a button or link. To understand the close we need to look at the markup within the partial view used for the contents of the edit dialog. The partial view is shown below:

  <% using (Ajax.BeginForm("EditDialogSave", new AjaxOptions { UpdateTargetId = "EditDialogDiv", OnComplete = "EditDialogComplete" }))
  { %>
     Partial Edit Dialog
     <br />
     <input type="submit" value="Save" />
  <% } %>  

This partial view is using the Ajax.BeginForm instead of the Html.BeginForm which allows us to asynchronously postback the contents of the form. Upon completion of the call, it will call the EditDialogComplete JavaScript method which will close the dialog. While a simple example it should illustrate how easy it is to make use of the jQuery Dialog an create Add/Edit dialogs which has been traditionally a very complex operation.

2. The Missing Date Picker

A date picker is a complex component to build yourself in JavaScript, luckily jQuery UI includes an effective Date Picker. To create a DatePicker we first need a text input box and a call upon document ready to initialize it as shown below:

  <input id="DatePicker" type="text" />
  
  <script type="text/javascript">
  $(document).ready(function ()
  {
     $('#DatePicker').datepicker();
  });
  </script>

As you can see this simple snippet is all you need to start a Date Picker. When the user clicks on the DatePicker input box the calendar will be displayed and allow the user to choose a date.



5 Ways to Improve Your ASP.NET MVC Pages With Help From jQuery UI

3. Simple Autocomplete

The autocomple provided with jQuery UI allows for very easy integration with MVC. We start by creating an input box and a call upon document ready to setup the Auto Complete as shown below:

  <input id="AutoComplete" type="text" />
  
  <script type="text/javascript" >
  $(document).ready(function()
  {
     $('#AutoComplete').autocomplete({
          minLength: 2,
          source: '<%= Url.Action("AutoComplete") %>'
     });
  }
  </script>

The AutoComplete method within the Controller will receive a QueryString item of the name of the term. The method will need to return a JsonResult with a list made records each with an id, label and value.

4. Prebuilt Themes and Style Builder

When using many 3rd party tools we are often forced to use the built-in styles or go down the path of modifying the included CSS. Modifying CSS files for 3rd party tools can be extremely time consuming, especially if the documentation is lacking. jQuery UI is completely backwards to many other 3rd party controls. The jQuery UI website provides a suite of themes as well as a tool called Theme Roller which allows users to create and edit themes. This allows you to start from scratch or start with one of the similar themes and create the one that matches your site. This can be a huge time saver and drastically reduce the amount of time it takes to utilize jQuery UI within your site.

5. Better User Interactions With the Tabs, Accordion, Sortable Lists, additional Effects, etc.

jQuery UI also includes several elements which primarily serve to improve user interaction. The Tabs and Accordion elements are both useful in user navigation in that they allow you to embed more content on the page without using up more screen real estate. One important note about Tabs is that the content for each Tab can be fetched asynchronously allowing for you to use a Controller Action and a Partial View as a Tab. Another useful control is the Sortable or Sortable List which enables you to take a group of elements and allow the user to reorder them as needed. jQuery UI also includes other controls which can be useful such as a Slider and simple Progress Bar. Also included are additional animation effects similar to those included with jQuery.

Conclusion

Traditional ASP.NET is a bit of a challenge to take full advantage of jQuery UI due to the high-level nature of the platform. Since MVC and its low-level nature you are able to take advantage of jQuery UI without a lot of effort. With the flexibility provided by MVC, you to pull in and utilize just about any JavaScript library, jQuery UI is particularly attractiven given that MVC works so well with jQuery. Similar to jQuery, jQuery UI is also a very small library dispite the number of features packed in. Not to mention the documentation and tools provided for jQuery UI.

Related Articles





About the Author

Chris Bennett

Chris Bennett is a Manager with Crowe Horwath LLP in the Indianapolis office. He can be reached at chris.bennett@crowehorwath.com.

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Learn How A Global Entertainment Company Saw a 448% ROI Every business today uses software to manage systems, deliver products, and empower employees to do their jobs. But software inevitably breaks, and when it does, businesses lose money -- in the form of dissatisfied customers, missed SLAs or lost productivity. PagerDuty, an operations performance platform, solves this problem by helping operations engineers and developers more effectively manage and resolve incidents across a company's global operations. …

  • The hard facts on SaaS adoption in over 80,000 enterprises: Public vs. private companies Mid-market vs. large enterprise GoogleApps, Office365, Salesforce & more Why security is a growing concern Fill out the form to download the full cloud adoption report.

Most Popular Programming Stories

More for Developers

RSS Feeds