Elegant Code » JQuery

File uploads and MVC Controllers

Jason Grundy — Fri, 27 Aug 2010 16:08:12 +0000

Last week I had to implement some functionality to support uploading images to an MVC 2 application and then subsequently display them. Naturally there are a mountain of blog posts on this topic but I was unable to find anything comprehensive that covered everything that I needed on both the client and server side. What follows is my attempt to fill that hole.

My constraints were:

I did not have an HTML form (the application I was working with is very “AJAX heavy”).
I needed to pass parameters in addition to the file (the ID of the entity that I want to associate the file with).

I used the jQuery.upload plugin too assist me with both of these. Obviously that means I am also using jQuery.

Let’s look at the code. Here’s the Content from my View:

Select File to Upload: <input id="file" name="file" type="file" />

<img id="fileView" />

<script type="text/javascript">

    $(document).ready(function () {

        $('#file').change(function () {

            var data = { ID: "b53dd6b4-f24c-4450-bf6a-246e5835a125" };

            $(this).upload(

                "FileUpload/AttachFileToEntity",

                data,

                function () {

                    $("#fileView").attr("src", "FileUpload/GetFileDataFromEntity/" + data.ID);

);

});

});

script>

I am simply attaching an change event handler the the control. The event handler does two things:

Uploads the selected file
Displays it. I am assuming that you are uploading an image (but not verifying this)

Note that the name attribute of the input control must be set and it must match the name of the HttpPostedFileBase parameter in the AttachFileToEntity Controller Action. Speaking of the Controller here it is:

public class FileUploadController : Controller

    private readonly EntityRepository _entityRepository = new EntityRepository();

    public ActionResult Get()

        return View();

    public ActionResult AttachFileToEntity(Guid ID, HttpPostedFileBase file)

        var entity = _entityRepository.Get(ID);

        entity.FileData = GetFileData(file);

        return Content("File saved");

    private byte[] GetFileData(HttpPostedFileBase file)

        var length = file.ContentLength;

        var fileContent = new byte[length];

        file.InputStream.Read(fileContent, 0, length);

        return fileContent;

    public FileResult GetFileDataFromEntity(Guid ID)

        return File(_entityRepository.Get(ID).FileData, "image");

The imaginatively named Entity could not be simpler:

public class Entity

    public Guid ID { get; set; }

    public byte[] FileData { get; set; }

In a production scenario you are using probably using an O/RM such as NHibernate. In this case you will want to deviate from what I have above and store the uploaded file in a different entity. This is to avoid having to load the binary data for the file each time you access the entity. Note that NHibernate 3 supports (to a limited degree) lazy loading properties. However even if you are utilizing this feature you still want to make sure that the binary data is stored in a different table in the underlying RDBMS so that any full table scans (for example if you are performing some type of aggregation) don’t end up reading mountains of irrelevant data.

The one thing that you are missing is the Repository. Rather than introduce the complexity of data access I am simply using a static Dictionary to store the data:

public class EntityRepository

    private static readonly IDictionary _entities = new Dictionary

        { new Guid("b53dd6b4-f24c-4450-bf6a-246e5835a125"), new Entity { ID = new Guid("b53dd6b4-f24c-4450-bf6a-246e5835a125") }}

};

    public Entity Get(Guid ID)

        return _entities[ID];

    public void Save(Entity entity)

        if (entity.ID == Guid.Empty) entity.ID = Guid.NewGuid();

        if (_entities.ContainsKey(entity.ID)) _entities[entity.ID] = entity;

        else _entities.Add(entity.ID, entity);

That’s everything you need. Hope that you find this useful.

The Web is Not Platform Independent

John Sonmez — Sun, 22 Aug 2010 20:16:32 +0000

There was a time when you wrote a web site and you targeted IE6.

That time has long passed.

When you really only had to target IE6, you could pretend the web was platform independent.

The truth is now the web is neither, nor will ever be platform independent. It’s just an illusion based on the simple notion that browsers basically just render HTML.

How many platforms are there then?

This is a surprisingly difficult question to answer.

Back before the web really took off there were basically 3 platforms to develop an app for: Windows; Unix/Linux; and Mac.

When we answer this question for the web, really we have to look at browsers as if they are the operating system. Since the same browser exists on multiple base OS’s but could be different, we have to count each combination of browser and OS as a potentially separate version.

Windows: IE6, IE7, IE8, IE9 (beta), Firefox, Chrome, Safari

OSX: IE, Firefox, Safari (more?)

Linux: Firefox, Chrome

Android: Webkit

iPad, iPhone: Safari

I don’t have nearly every combination listed, but this is what I would consider a good coverage for any kind of public facing website.

Oh, don’t forget to cross this again with localization and globalization, because you might have a localization problem that only happens in a certain language in a certain browser on a certain OS.

Not just rendering level differences

It is also very interesting to consider that a web developer now has to consider how their site will not just render, but be used on a mobile platform.

Consider how Google released an iPad version of Gmail. And although, you may not really care if your site works on an iPhone or an Android phone, you probably should start caring about how it works on tablets like the iPad, because that market is only growing.

If you have a website that doesn’t work on someone’s iPad when they are shopping online, do you think they will get up, go turn on the computer, and go to your site to make the purchase or they will buy from a different site with a few touches?

With a phone size resolution, the considerations are even more important.

Tools help me make the web platform independent

No tool exists right now that can handle the non-technical aspects of platform independence for your web application, but let us imagine for a second that a library like JQuery really made your javascript platform independent.

If we were to hold onto that shaky assumption, we would need to make sure that we never wrote javascript that wasn’t written through the JQuery API. (Which happens to be an extremely leaky abstraction over javascript, CSS, and the DOM.) We would still have to make sure our HTML and CSS tags were platform independent.

So even if we could get parts of our development to be mostly platform independent, we would still need to test on all of the major platforms, because we could not rely on the platform independence.

Now, don’t get me wrong here. I love JQuery. It makes the job of a web developer so much easier. But, there is an important distinction. APIs and libraries like JQuery make it easier to write platform independent web code, but they don’t make our code platform independent.

What does all this mean?

We’ve gotten to the point where the most platform independent technology you can use is either Flash or Silverlight.

I’m not sure if this is the future of development, but it very well might be.

One important point to draw from this realization is that we shouldn’t necessarily choose to make our application a web application, because we need it to be platform independent. It seems like about 5 years ago, the web became the default choice, because it was better to have platform independence than a rich UI.

Hopefully, for the sake of web developers some of these paths die off or converge, or that standards compliance becomes so good that you could really write code for one browser and expect it to work on all the others.

As always, you can subscribe to this RSS feed to follow my posts on elegant code. Feel free to check out my main personal blog at http://simpleprogrammer.com, which has a wider range of posts, updated 2-3 times a week. Also, you can follow me on twitter here.

JQuery Validator Cheat Sheet

Chris Brandsma — Tue, 02 Mar 2010 21:56:18 +0000

I’m getting a session ready for Boise Code Camp 2010 on JQuery Validator. I thought it would be cool to hand out a cheat sheet – but I couldn’t find one. So here is rev. 1 of my Jquery Validator Cheat sheet.

Authenticated web services calls with Asp.Net MVC

Chris Brandsma — Mon, 07 Dec 2009 01:01:49 +0000

I’ve been encountering a problem as of late. I’m creating a lot of “Single Page Pattern” web applications. This means you load the page once, then handle everything else via web service calls.

And if you have ever worked on web applications you should be familiar with the “user went to lunch” issue (session timeout). User leaves for an hour, comes back to your web page, and expects it to continue working. Unfortunately the session timed out, and now you have to refresh a bunch o’ crap. Another version of the problem, the “.ASPXFORMSAUTH” cookies gets deleted. Either way, your web site stop just working and the user blames you.

The fix is to have the user log in again. Normally this is simple, when the user does something, then the page is refreshed and redirected to the login page (as assigned in the web.config). That is the standard web model. Unfortunately it does not work in this case.

Web services complicate things. When inside a web method request, redirects do not work, and even worse if you are using JQuery “load” method (which loads html directly into an element), then you get the login page inside of a div. But more often, your web client code is expecting JSON, and will be getting html (an error page or the login page).

So my current solution it to wrap up the JQuery AJAX methods with my own methods. This way I can check the users authentication (another web method). If I see the user is not logged in, I redirect to the login page. The other web method is killed via the page redirect.

Here is my wrapper:

var ajax = {
    _lastAuthCheck: new Date().getTime(),
    getJSON: function(url, data, callback) {
        ajax.CheckAuthentication();
        return $.getJSON(url, data, callback);
    },
    post: function(url, data, callback, type) {
        ajax.CheckAuthentication();
        return $.post(url, data, callback, type);
    },
    load: function(destination, url, params, callback) {
        ajax.CheckAuthentication();
        destination.load(url, params, callback);
    },
    CheckAuthentication: function() {
        if (!TimeToCheckAuth()) return;
        $.getJSON('<%=Url.Action("IsAuthenticated", "Account")%>', null, function(result) {
            if (!result) {
                window.location = '<%=Url.Action("LogOn", "Account")%>';
            } else {
                ajax._lastAuthCheck = new Date().getTime();
            }
        });
        
        function TimeToCheckAuth(){
            var currentTime = new Date().getTime();
            var diff = currentTime - ajax._lastAuthCheck;
  
            return (diff > 5000);
        }
    }
};

Now with the wrapper in place I switch my $.ajax, $.get, $.post calls to ajax.ajax, ajax.get, ajax.post. All the parameters should stay the same.

Notice one thing, I’m mixing in Url.Action calls in that code. I should add that this code is in a separate file for me, not in my web form page. If you want to get more of an idea of how I do that, check out my post on Asp.Net MVC JavaScriptView.

Now the web method, IsAuthenticated, is about as simple as you can get:

[AcceptGet]
public JsonResult IsAuthenticated()
{
    return Json(User.Identity.IsAuthenticated);
}

But back to the JavaScript, there are a couple of other things going on here. First off, the authentication check will happen at the same time actual web method call. I banking on the theory that the authentication check will return before the other method. Second, I put an extra check in the method, so at most the authentication check will only happen once ever 5 seconds. Adjust as you feel necessary.

JQuery Validator plus Element IDs, and Names

Chris Brandsma — Tue, 24 Nov 2009 05:10:30 +0000

OK, just discovered an interesting implementation detail of JQuery Validator (one that I should have known about already as well).

OK, if you have a form where the inputs of the for have both id and name attributes, the name attributes trump id.

So if you have this:

   1: <input type='type' id='RegisterUserName' name='userName' />

Then you write the validation against ‘user’Name’, not ‘RegisterUserName’.

$("RegisterForm").validate({
    rules: { userName: {required: true} }
});

If you do not you will get all sorts of strange null exception errors (which in JavaScript means something returned as ‘undefined’.

How this happens

People have been talking about the great flexibility of Asp.Net MVC for a while now, but there are a few things to be aware of. One of them is multiple forms.

Say you have a web page that has two forms on it, one to register users, the other to log users in. Both forms have ‘username’ and ‘password’ fields. Asp.Net MVC still cannot get you around the need to keep ids unique – but names can be reused. These names are also read by Asp.Net Action Controllers. So if you have multiple forms all submitting to the same Controller Action, as long as the name attributes are set it will hook up.

Anyway, this is a short post, mostly for myself, so I don’t spend two hours figuring this out again.

Using the jQuery UI Datepicker with ASP.NET MVC 2 Templates

Jason Grundy — Fri, 13 Nov 2009 16:25:10 +0000

Brad Wilson has recently completed a blog series about Templates in MVC 2. I really like this feature as it provides me with the ability to quickly generate screens, even if eventually I might have to go back and rework them. Basically I want to have my cake and eat it – I want the initial productivity of a scaffolding based approach but the flexibility to customize look and feel when required.

By default an text box is generated for DateTime fields. What I wanted to do was hook this up to the excellent Datepicker widget from jQuery UI. Here’s how I achieved this:

Add the following 3 references to the Master Page:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css” type=”text/css” rel=”Stylesheet” class=”ui-theme” />

I am referencing jQUery and jQUery UI from the Google CDN (great for getting started quickly as well as for production scenarios). I am also linking to one of the default themes which goes nicely with the default MVC stylesheet.
Add the following Javascript to the Master Page:

Here I am simply looking for a specific class and attaching a Datepicker widget to it. I am aware that this is not the most efficient approach as the code might run unnecessarily but it’s perfect for a demo.
Ensure that the correct class is rendered by the Template. Apparently you can currently only override the default templates for individual Controllers. Therefore create a Views/{ControllerName}/EditorTemplates folder and within it create a file called DateTime.ascx which should contain:

<%@ Control Language=”C#” Inherits=”System.Web.Mvc.ViewUserControl” %>

<%= Html.TextBox(“”, ViewData.TemplateInfo.FormattedModelValue, new { @class = “date-edit-box” }) %>

You’ll probably want to use the DIsplayFormatAttribute on the DateTime fields in the View Model to ensure that the time is not also output (don’t forget to set the ApplyFormatInEditMode property to true if you do this).

That’s it. You should now see Datepickers for the appropriate fields that were rendered using the Html.EditorForModel() extension method.

Asp.Net MVC JavaScriptView

Chris Brandsma — Sat, 07 Nov 2009 23:08:41 +0000

For a while now I’ve wanted the ability to generate javascript file like I generate html files. Take a little bit of the power of the WebForm view engine (just a little bit) and give that to me for JavaScript.

Why? I have a few reasons. Number one is I want to remove all of my JavaScript from the html, so the JavaScript is loaded via script tags. Once that happens, then I can have the JavaScript cached by the browser and speed up my application a bit. What I need the Asp.Net engine for was to give me accurate links to web site resources (images, web services, call, other javascript files, etc). These are thing that I don’t want to hard wire, mostly because I’ve bitten off the Asp.Net Routing engine bug. So, I want to use the Asp.Net Routing engine to tell me where to find stuff.

Not that I’ve committed to Asp.Net MVC I’ve come to a realization that making dynamic javascript files is well within my reach. Actually, it is almost there already; Asp.Net MVC ships with a JavaScriptResult. The downside of that result action is that the object expects you to hand it the JavaScript as a string, which it pushes to the browser as a file. I want to give a method a JavaScript View for that. The other good news about JavaScriptResult is that it doesn’t do much (just set the response.ContentType to application/x-javascript). So I could grab all of the View methods, turn them into extension methods, rename them, and then use them for my own underhanded affairs.

Luckily we can all grab the Asp.Net MVC source code and go to town. I didn’t modify the original source, but I defined a new class (JavaScriptFileResult) and a bunch of extension methods for the Asp.Net MVC Controller to give you JavaScriptView methods. You can see a usage in the first piece of code.

public ActionResult JsConstants( )
{
    return this.JavaScriptView();
}

Now below is the actually extension methods and class needed. Put this in your project some place and go to down.

public class JavaScriptFileResult: ViewResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        base.ExecuteResult(context);
        HttpResponseBase response = context.HttpContext.Response;
        response.ContentType = "application/x-javascript";
    }
}
  
public static class JavaScriptControllerExtensions
{
    public static ViewResult JavaScriptView(this Controller controller )
    {
        return JavaScriptView(controller, null /* viewName */, null /* masterName */, null /* model */);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, object model)
    {
        return JavaScriptView(controller, null /* viewName */, null /* masterName */, model);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, string viewName)
    {
        return JavaScriptView(controller, viewName, null /* masterName */, null /* model */);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, string viewName, string masterName)
    {
        return JavaScriptView(controller, viewName, masterName, null /* model */);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, string viewName, object model)
    {
        return JavaScriptView(controller, viewName, null /* masterName */, model);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, string viewName, string masterName, object model)
    {
        if( model != null )
        {
            controller.ViewData.Model = model;
        }
  
        return new JavaScriptFileResult
        {
            ViewName = viewName,
            MasterName = masterName,
            ViewData = controller.ViewData,
            TempData = controller.TempData
        };
    }
  
    public static ViewResult JavaScriptView(this Controller controller, IView view)
    {
        return JavaScriptView(controller, view, null /* model */);
    }
  
    public static ViewResult JavaScriptView(this Controller controller, IView view, object model)
    {
        if( model != null )
        {
            controller.ViewData.Model = model;
        }
  
        return new JavaScriptFileResult
        {
            View = view,
            ViewData = controller.ViewData,
            TempData = controller.TempData
        };
    }

Now the view, here is what it looks like:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
var UrlList = {
    SubscriptionList: '<%=Url.Action("SubscriptionList", "Channel") %>',
    MoreSubscriptions: '<%=Url.Action("More", "Channel") %>',
    WaitGif: '<%=Url.Content("~/Content/img/ajaxloader.gif") %>',
};

Like I stated before, I was looking to get uris for the most part. But this could also be a strongly typed view where you have to pass in real data.

Finally, loading this view into my page. You saw the controller action was “JsConstants” above, which was in my HomeController (not shown), so here is how I ask the routing engine for the JavaScript file.

   1: <script type="text/javascript" src="<%=Url.Content("~/Home/JsConstants") %>">script>

So far I am happy with this technique. But if you see something that can be improved, please let me know.

Playing with JQuery Validation library

Chris Brandsma — Mon, 28 Sep 2009 04:21:16 +0000

New job (2 weeks in), new responsibilities, new tools to play with. Amazingly (for me), one of the new tools is the JQuery Validation Library. My diving into this also coincides with ScottGu’s announcement that Microsoft is creating their own CDN for JQuery and JQuery Validation.

Bad news is that this means I’m behind. That sucks. I was using JQuery MONTHS before Microsoft officially started supporting it (at least 6 months – but I’m too lazy to look it up). Anyway, now you can use Microsoft’s bandwidth to get JQuery to your customer’s browser with this line:

And you can add the JQuery Validation library like this:

Note: see those end tags, great annoyance of my life, but you have to have them, you can’t do