Posts Tagged ‘AJAX’

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! 

The Validation Guidance Bundle is a new set of extensions to the Ajax Control Toolkit introducing AJAX enabled validators.  This is great for situations where a user is entering data unto a web form that needs to be validated against the server.  I have a current situation where I need to make sure that a posting’s chosen Url is unique.  With this bundle, I can simply point it to the CustomValidator control which is already tied to a server-side validation method and AJAX will take care of the rest.  When the user tabs off of the txtUrl control, it will go back the server and validate the input in your custom method.  This is also valid for when users are choosing a login name or when you need to do any validation that you don’t want to put on the client.

It also works directly with the EntLib Validation Block through a set of property proxies.

One minor gotcha that I ran into is that the assembly references a specific version of the AjaxControlToolkit assembly.  If you are using the latest build of the AjaxControlToolkit, you’ll get some ugly errors about not being able to load the correct assembly.  I finally noticed that in the prerequisites for the validation bundle, it is stated that you need release version 10618 of the toolkit (as oppose to the latest 10920 version).  Some more uses are described below:

  • Improving UI responsiveness while reusing entity business validation logic across screens when performing validations such as:

    •  Length of Employee name.

    •  Employee’s email.

    •  Order number is unique.

    •  Order is complete.

  • Improving UI responsiveness for applications utilizing Server-Side ASP.NET validators.

  • Determining what type of validation to use for improving responsiveness and security.