Channels ▼
RSS

Tools

Extend MVC Apps Easily Using NuGet Packages


The ASP.NET MVC Framework provides a lot of control over rendering HTML out of the box, but that comes at a cost. The HTML helpers are basic and provide only simple user-interface elements, leaving it up to you to hand-craft UIs using HTML and CSS. Although that's a great option for an experienced Web designer, most developers find third-party components a boost to productivity. They let you develop your application rather than spend lots of time on UI infrastructure.

That's what the NuGet Package Manager is all about. This article teaches you a little bit about NuGet and shows you how to use it to add functionality to a project.

About NuGet

NuGet is a Visual Studio extension that makes it easy to pull libraries, components, and, most importantly, their configuration into your Visual Studio project. This tool is installed with MVC 3 and it is used to bring in various components to make developing with MVC easier. These components are called NuGet packages, and they can include .NET assemblies, JavaScript files, HTML/Razor files, CSS files, images, and even files that can add configuration data to your project's web.config. The goal of NuGet is to make it super-easy to load or update a component.

When you create an MVC3 project in Visual Studio, some NuGet packages are automatically installed. These are jQuery, jQuery UI, Modernizr, and Entity Framework. The reason this is a big deal for you and me is this: jQuery and Modernizr are open-source projects that have frequent releases, much more frequent than the release schedule of ASP.NET or MVC. Because these libraries are included in the default project as NuGet packages, it is insanely easy to update to the latest versions: All it takes is the click of a button. Without NuGet, updating these libraries would have been a manual process of searching for each of the project's Web sites and downloading the files. While this change may seem trivial, it is not. The ability to update and move fast will allow you to begin writing code sooner and spend less time guessing and testing libraries. If you update a library and your tests fail, it is trivial to roll back to the previous version.

NuGet has both a GUI and command-line interface to work with packages in your projects. First, we will walk through updating a library from the default project template using the GUI. In the Visual Studio Solution Explorer window, right-click on the Project node and you will see a new context menu: Manage NuGet Packages (Figure 1).

Figure 1: The Manage NuGet Packages menu.

Clicking on this menu will bring up the Manage NuGet Packages dialog. The dialog defaults to show packages that are installed in your project and have updates available on the office package source, as seen in Figure 2. The package source is a publicly hosted server that hosts both open-source and closed-source libraries and components.

Figure 2: The Manage NuGet Packages dialog.

An Update button shows up for each package that allows you to update the files in your project. Clicking Update for jQuery will make the following actions take place in your project: The old version of jQuery will be removed and the other packages that rely on jQuery will be removed. Then jQuery and the other libraries will be updated. The results of these actions show up in the Results dialog.

The real value that NuGet provides (which has not been described to this point) is how it understands how packages can have dependencies on other packages. The package dependencies could be trivial or complex, but NuGet understands how to deal with that and allows the package authors to specify dependency rules so you don't have to. This is where the real power of NuGet shines through. Before NuGet, this dependency management was communicated through release notes, blog posts, or sometimes never at all. It is these dependencies that can make it painful to use third-party libraries. NuGet replaces this complexity with rules that are implemented by the package authors. The result is a simple experience for developers who would rather write code than debug configuration and dependency issues.

While some of what NuGet does seems like magic, it is a pretty simple process to install and update packages. It is important to understand some basics about NuGet. The most important thing to know is that NuGet will create a folder under your solution file called Packages. Inside this folder, NuGet will download packages and extract some of its contents into named folders. These folders then get referenced by your projects when the package is installed. The reason this is important is that when using source control, you need to add all the files in the Packages folder into your source control system. Without those files your solution will not compile when a team member pulls down the source code to a different location or machine. Figure 3 shows a listing of the Packages folder created from the default MVC 3 project template.

Figure 3: The Packages folder.

NuGet brings files into your project in addition to adding them to the Packages folder. NuGet has the ability to add any kind of file to your project.

Now that you have a basic understanding of what NuGet does, we will start using it to add functionality to a project.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video