Professional ASP.NET MVC 4

Beyond Helpers

If you send your browser to http://plugin.jquery.com, you'll find thousands of jQuery extensions. Some of these extensions are graphically oriented and can make things explode (in an animated way). Other extensions are widgets like date pickers and grids.

Using a jQuery plugin usually involves downloading the plugin, extracting the plugin, and then adding the plugin to your project. A few of the jQuery plugins are available as NuGet packages, which makes it trivially easy to add the plugin to your project. In addition to at least one JavaScript file, many plugins, particularly the UI-oriented plugins, might also come with images and a style sheet you'll need to use.

Every new ASP.NET MVC project starts with two plugins: jQuery Validation (which you've used) and jQuery UI (which you will look at now).

jQuery UI

jQuery UI is a jQuery plugin that includes both effects and widgets. Like all plugins it integrates tightly with jQuery and extends the jQuery API. As an example, let's return to the first bit of code in this chapter — the code to animate album items on the front page of the store:

$(function () {
   $("#album-list img").mouseover(function () {
       $(this).animate({ height: ‘+=25', width: ‘+=25’ })
              .animate({ height: ‘-=25', width: ‘-=25’ });
   });
});

Instead of the verbose animation, use jQuery UI to make the album bounce. The first step is to include jQuery UI across your application by adding a new script tag to the layout view:

 <script src="∼/Scripts/jquery-1.6.2.min.js" ...