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.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read