ASP.NET MVC Tip #5 – Submitting an AJAX Form with jQuery

Friday, February 15, 2008

This is one of the neatest, straightforward, and down right coolest way to submit a form with the ASP.NET MVC Framework.  I’ve blogged in the past about jQuery and how useful it is.  Combining MVC with jQuery can produce some really neat Web 2.0 style applications and today we’ll take a look at some first steps.  I’d like to get into some more advanced usage of jQuery.  In particular, how it can integrate with ASP.NET MVC Framework. 

Once you’ve downloaded the latest jQuery library, drop the script into your \Content folder in the MVC project.  I usually create a sub folder in Content to organize my javascript files. 


Anything you’re going to do with jQuery requires this file.  Depending on how often you use jQuery on your site, you might want to put the script on your MasterPage or if you only use it on a single page, you could drop it on that specific page.

We will now create a simple action to handle a basic contact form on our site.  In this case I put the action in my Home controller.  Also notice that by checking the HttpMethod I can handle both the GET and POST of the contact form with the same action.  Note:  The upcoming release of the MVC framework will not require the ControllerAction attribute on the action.


Looking at the view, we have a very simple contact form to capture the sender’s email, the subject, and the body of the message.  There’s also a submit button to submit the form.  We’ve also created the action using the Url helper. 


Next, we are going to create a jQuery handler to wire up the form’s submit event and run some jQuery scripts instead of a full server post.


First thing we do with jQuery is make sure the document is ready and all the DOM element have been loaded.  Then we find our form element and wire up the “onsubmit” event so we can intercept it and do some jQuery magic. It’s really easy to create an AJAX request using the $.post function; we just need some information about the form we’re posting.  I’m also showing off a couple of cool jQuery functions to do some neat UI updates.  We’ll fade out the contact form when the AJAX request starts, then fade it back in and show an alert.  You can imagine how you could fit progress indicators in here as well.

That’s it.  When you hit the submit button, the javascript will take over the post and execute the action you specified.  Hope this helps! 


  1. Hey Mike, I made a screencast using MVC, jQuery and REST URLs along the same line as your example above. I thought you or your readers may also enjoy it if they’re interested in jQuery/MVC.

    The link is here:

    And very nice article! Thanks!

  2. Shawn Oster says:

    I like the neat trick of testing for either GET or POST to determine the action but I’m also assuming you’re getting away from the “Golden Seven” REST actions using this approach.

    Also, while it’s a sexy bit of kit I’d dissuade people from making any critical form posts AJAX-based. I’ve worked and dealt with enough clients behind firewalls where a lot of AJAX calls fail completely and nothing is more frustrating for a client when they can’t do a simple thing like edit a field. Usually it’s because the corporate firewall doesn’t like something in the header and it strips it out, which causes your server AJAX processing code to throw a fit and either return an error or the response gets blocked completely.

  3. I’m doing the exact same thing, and yes, it’s very easy.

    I would be explicit in your actions though. What you have there is a code-smell where you have 1 action performing 2 distinct functions.

    I would have:
    /register render “Register”
    /register/complete would be the post action, which redirects to /register/completed (or something)

  4. http:// says:

    It looks like the controller action is not the point. You can always set the action on the form to whatever you want. The beauty of this for me are are these two functions:
    1. f.serialize
    2. $.Post(..)

    That is pure beauty. I guess this is why jQuery is doing so well, it makes simple things simple to do. Great job!!

  5. First off, great job. This puts it all together in an easily digestible format.

    I’m having a problem, however, getting the callback to ‘callback’. The ajaxStop function works fine, but the ‘we’re back!’ never happens, or rather, it was happening intermittently at one point but now nothing. I’ve tried to trace what’s happening in FireBug, but I’m not sure where the callback is supposed to happen exactly.

  6. http:// says:

    Hi Mike,

    I am anxious to get this working, but I experience the following compiler error:

    Compiler Error Message: CS0103: The name ‘RenderView’ does not exist in the current context

    Line 23: {
    Line 24: // requesting the page
    Line 25: RenderView(“ContactUs”);
    Line 26: }
    Line 27: else


    What could I be missing? I’m running Windows XP SP1, IE7 Pro, and authoring this for an ASP .NET 2.0 project using Visual Web Developer 2008. Currently testing this script locally.

    thanks in advance,
    seattle, washington

  7. http:// says:

    Thanks a LOT for this Mike! I have a quick question for you though: using this code example – if I wanted to print something on the server either through a partial view or a simple system out, how could I catch that response from the server with JQuery?


  8. skiltz says:

    Thanks heaps for posting this. Worked first time no questions asked! jQuery is my new best friend!

  9. http:// says:

    Great work done honey. The articles is very much beneficial for beginner of MVC.

  10. http:// says:

    Neat article thanks!

  11. dashavlasov says:

    Услуги по оформлению разрешение на применение, пожарный сертификат, строительные лицензии, и еще лицензирование ИСО, сертификат соответствия ГОСТ Р, строительные сертификаты

  12. http:// says:

    Thanks for the tip on f.serialize(), I didnt know I can do that. Sure helps a LOT!

  13. http:// says:

    Спасибо, то что нужно.

  14. Thank you … this tutorial has me very helped.

  15. http:// says:

    Great story. Thank u!!!!

  16. Jijo says:

    It shows an error tab function not defined..

    var Tag = { init: function() { $(“#tagTabs > ul”).tabs(defaults = { navClass: “sidebar-tabs-nav”, selectedClass: “sidebar-tabs-selected”, unselectClass: “sidebar-tabs-nav-item”, panelClass: “sidebar-tabs-panel”, hideClass: “sidebar-tabs-hide” }); $(“#tagTabs”).show() }
    , dispose: function() { }

  17. r4 firmware says:

    Thanx for the valuable information. How to use a jQuery? Please provide information over it. Provide links to related topics if possible.

  18. cjorellana says:

    The name ‘RenderView’ does not exist in the current context

  19. http:// says:

    awesome… it was really hard for me to find working example.

Leave a Reply