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.
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.
Top Reasons to host your ASP.NET MVC Website with HostForLife.eu
There are many reasons why so many people choose HostForLife over any other web hosting provider each year. Whether you’re beginner or an experience webmaster, HostForLife offers the perfect solution for everyone.
You’ll have highly trained, skilled professional technical support people ready, willing, and wanting to help you 24 hours a day. Your web hosting account servers are monitored from three monitoring points, with two alert points, every minute, 24 hours a day, 7 days a week, 365 days a year. The followings are the list of other added-benefits you can find when hosting with us:
1. World-class 24x7 Customer Support
Will your hosting company promptly answer questions and resolve issues - at 3 am on a Sunday? Even some providers claiming “24x7” support will not - but HostForLife will. Our outstanding uptime is backed by true 24x7 customer support. An expertly trained technician will respond to your query within one hour, round the clock. You will also get qualified answers. Other hosting companies typically have very low - level support staff during the night or weekends. HostForLife always has knowledgeable, top - level support standing by, day or night, to give you the answers you need.
2. Commitment to Outstanding Reliability
Reliability, Stability, and Performance of our servers remain out TOP priority. Even our basic service plans are equipped with standard service level agreements for 99.99% uptime. Advanced options raise the bar to 99.99%. Our state-of-the-art data centers combine servers and SAN storage with full redundancy and operational tools with proprietary service management techniques. Full backup and recovery capabilities are implemented, including redundant power supplies, cooling and connectionsto major data networks.
3. “Right-size” plans for maximum value
HostForLife offers a complete menu of services. IT professionals select only what they need - and leave behind what they don’t. The result is an optimal blend of cost and performance. We offer IT professionals more advanced features and the latest technology - ahead of other hosting companies.
4. Profitable, Stable, Debt-free Business
Financial stability is the bedrock of a hosting provider’s ability to deliver outstanding uptime, cost-effective service plans and world-class 24x7 support. HostForLife’s customers are assured of our financial integrity and stability - a stark contrast to the ups and downs they may have experienced with other providers.
5. The Best Account Management Tools
HostForLife revolutionized hosting with Plesk Control Panel, a Web-based interfaces that provides customers with 24x7 access to their server and site configuration tools. Some other hosting providers manually execute configuration requests, which can take days. Plesk completes requests in second. It is included free with each hosting account. Renowned for its comprehensive functionally - beyond other hosting control panels - and ease of use, Plesk Control Panel is available only to HostForLife’s customers.
6. 30-Day Money Back Guarantee
HostForLife 30 day money back guarantee ensures you have the ability to cancel your account anytime within your first 30 days under our full 30 day money back guarantee (less one-time account setup free). So what are you waiting for? Sign up today, risk free…
7. Simplicity with FREE 1-Click Installation
HostForLife was designed with ease of use in mind. From one click installations of your favourite website applications to our much talked about drag and drop website builder, you can rest assure your stay with us is going to be a smooth one. HostForLife offers the most extensive set of scripts on the web allowing you to build complicated websites with little or no programming knowledge at all. From blogs to forums to powerful e-commerce solutions, Super Green has something that is right for you.