Blog

Using NetAdvantage JQuery Upload Control in ASP.NET MVC

Damyan Petev / Saturday, September 3, 2011

The NetAdvantage for JQuery includes the neat igUpload that you can use to let your users transfer files from the client to the server. And of course you can use the Html helper in APS.NET MVC to get it running in no time. In this blog you will see how easy it is to set up using Razor syntax and some minor configuration.

Initial Setup

First you will need an ASP.NET MVC project. Microsoft Visual Studio/Visual Web Developer Express will usually create your new project complete with Content and Scripts folders. The Content folder is the place where the CSS and the accompanying image files are stored, and the Scripts folder is where the JavaScript files go. Now for the control to be able to render you will need to add the Infragistics CSS and script files that you will find in the NetAdvantage for JQuery installation folder to the respective locations in the project.

Then you need to reference them in either the current page (View) that will use the Infragistics controls or in the _Layout.cshtml. The layout works much like a Master Page and if you are using NetAdvantage for JQuery controls in more than one View it makes perfect sense to add the required references only once and forget about it. It’s a personal preference and if the case is one out of many Views need this there’s nothing to stop you from saving some load and loading those only in that particular View. Since the JQuery scripts are already included by default in the MVC project all you have to do is make sure you add the Infragistics script after them as it is built on top of those:

  1. <link href="@Url.Content("~/Content/themes/ig/jquery.ui.custom.min.css")" rel="stylesheet" type="text/css" />
  2. <link href="@Url.Content("~/Content/themes/base/ig.ui.min.css")" rel="stylesheet" type="text/css" />
  3. <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
  4. <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
  5. <script src="@Url.Content("~/Scripts/ig.ui.min.js")" type="text/javascript"></script>

After those are in place, you should add a reference to the Infragistics.Web.Mvc assembly to your project as it contains the Html Helper you can use to add controls using Razor syntax.

 

When performance matters

Unless you are building an intranet application (where dependency on outside recourses is not really good idea ) you can take advantage of Content Delivery Networks (CDN). There are many benefits of doing so – reduced load on the hosting server; greater availability and performance due to files coming from a location closer to the client in compressed form and being cached. Infragistics also offers CDN for the NetAdvantage for JQuery (you can check out more info here) and JQuery itself is offering a CDN hosted version as well as copies offered by Google and Microsoft. So you can add the above references like so:

  1. <link href="http://cdn-na.infragistics.com/jquery/20111/2010/themes/min/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" />
  2. <link href="http://cdn-na.infragistics.com/jquery/20111/2010/themes/min/base/ig.ui.min.css" rel="stylesheet" type="text/css" />
  3. <script src="http://code.jquery.com/jquery-1.6.2.js" type="text/javascript"></script>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
  5. <script src="http://cdn-na.infragistics.com/jquery/20111/2010/js/combined/min/ig.ui.min.js" type="text/javascript"></script>

 

The View

At this point you are ready to add the igUpload to your View using Razor, just add this line at the top of the View you want to have users upload files with:

  1. @using Infragistics.Web.Mvc

Now you can use the helper with Intellisense to effortlessly integrate the control(s). In this example we’ll configure a few of the more common scenario options, or should we say more of the uncommon ones as the control already comes with a lot of default settings in place. For complete listing of the API and defaults you can read http://help.infragistics.com/jQuery/2011.1/).

As you would expect from this type of controls they would use an html element as target – usually a Div. Creating such however is optional when using the helper in ASP.NET MVC as it will create one for you should there be none found.

  1.   @(Html.Infragistics().Upload()
  2.     .ID("igUpload")
  3.     .AllowedExtensions(new List<string> { "jpg", "bmp", "png" })
  4.     .AutoStartUpload(false)
  5.     .Mode(UploadMode.Multiple)
  6.     .FileSizeMetric(UploadSizeMetric.MBytes)
  7.     .Width("500")
  8.     .LabelSummaryTemplate("Status: {0} out of {1} uploaded. ")
  9.     .ProgressUrl("/IGUploadStatusHandler.ashx")
  10.     .Render()
  11. )

You can dive in the API guide and add as many options as you like, the only really required one for the client browser to render a functional NetAdvantage JQuery Upload is – you guessed it - .Render()

As far as the ProgressUrl option goes - the one above is included with the default value just to highlight there is a handler behind the scenes, but the handler itself is already implemented for you so all left to do is to register it along with an Http Module in the root level web.config like so:

  1. <httpHandlers>
  2.   <add verb="GET" type="Infragistics.Web.Mvc.UploadStatusHandler" path="IGUploadStatusHandler.ashx" />
  3. </httpHandlers>
  4. <httpModules>
  5.   <add name="IGUploadModule" type="Infragistics.Web.Mvc.UploadModule" />
  6. </httpModules>

These go under <system.web> for development environment. The settings for IIS7 are slightly different and you can find them in the documentation. In the same web.config in <appSettings> add the destination folder (it must exist) for uploaded files(and the server should have write permissions) and you could define your own maximum file size here aswell:

  1. <add key="fileUploadPath" value="~/Uploads" />
  2. <add key="maxFileSizeLimit" value="50000000" />

Note: Keep in mind browsers also have limits in terms of size and simultaneous uploads.

In order to prevent the ASP runtime from treating the handler call as MVC action/controller you have to tell it to ignore it in the Global.asax file:

  1. public static void RegisterRoutes(RouteCollection routes)
  2. {
  3.     routes.IgnoreRoute("IGUploadStatusHandler.ashx");
  4.     //...
  5. }

And there you have it 

You can see the finished files immediately appear in the Upload folder.

The Events

One very useful last thing – the NetAdvantage JQuery Upload fires a few events you can hook to and implement some logic required at different stages of the upload process itself and a general onError one. The onError defines the type of error and also carries a message you can use:

  1. <script type="text/javascript">
  2.     $(window).load(function () {
  3.         $("#igUpload").bind({ iguploadonerror: function (e, args) {
  4.             alert(args.errorMessage);
  5.         }});
  6.     });
  7. </script>

This will warn the user when an uploading file was not allowed or when it was above the maximum size limit(or there is some other error).

 

Summary

This article demonstrated the basics of using the Infragistics ASP.NET MVC Html Helper for the jQuery Upload control with Razor syntax for the MVC view and setting up some options and attaching to Client-Side events with JQuery.

You can download the sample code from here.

You can browse online samples here: http://samples.infragistics.com/jquery/file-upload