ASP.NET MVC Tip: Ajax and Validations using jQuery

jQuery is now part of the ASP.net development platform and it is going to ship with Visual Studio in the future and will also be the part of ASP.NET MVC installation. ASP.NET MVC will be the first product to include jQuery. Guru Gu’s blog entry has the full details regarding this. This is a great decision from Microsoft and I hope that the community would be happy about the great decision taken by Microsoft. And this is another good step for web development after the ASP.NET MVC technology. jQuery is an excellent java script library and very popular among the web developers regardless of technology.

In this post, I demonstrate how to integrate jQuery with ASP.NET MVC and will be explain how to send Ajax requests and also show client side validation using jQuery. I am using a blog application for this demo and it will show how to post a comment of a blog entry using Ajax request and will also show partial rendering with the help of a user control.

The below is the class diagram of the example I have used for this demo.

Controller

The below is the code of BlogController. It has two action methods and first one is for getting the single blog post including all comments and another action is for post a comment for the particular blog post. I am going to call the AddComment method ( ActionName Post) using Ajax request using jQuery.

The above code iterating through Comments collection of our ViewData and also calling the PostComment user control with comment object as ViewData for displaying a single comment.This user control is also using for partial rendering when we send Ajax request.

PostComment.ascx

<u><% =ViewData.Model.Author%>
commented on

<% =ViewData.Model.DatePosted%>:</u><p>

<% =ViewData.Model.Text%></p>

Client Side Validation

For client
side validation, I am using jQuery Validation plugin. For more details about
the jQuery plugin, visit http://bassistance.de/jquery-plugins/jquery-plugin-validation/
. This validation framework is very easy to use. You just put class="text required"for
a required field validator. For an email validation, you need to put class="text email".

jQuery method $(document).ready()
will executes when the DOM has been loaded and in this function we handles the
onsubmit event of the form. In the onsubmit event, we calling the addComment
function and then the returnfalsestatement
prevent the form submit and we submit the form post using Ajax.

The above code sends the
form data to the controller action Post using Ajax . The dataType: "html" represent that we want
partial HTML result for our Ajax
request. In the success function of our Ajax request, we append the result HTML to
the <div> element named post_comment. This will dynamically add the new
comment to the end of the comment list.

success: function(result)

{

vardomObj
= $(result);// create element from result
html $("#post_comment").append(domObj); // append to end of comment list

Our Ajax request will call the
AddComment method and this will create a new comment for the given Post. After
the data persist, we calling the returnView("PostComment", comment). PostComment is our user control with new added
comment object as the model of our View. So that the user control will
generates markup for the new comment and our Ajax request will get the output
as the HTML that rendered by the user control. So we can dynamically add the
new markup to the HTML element of our post comment list. User control is very
powerful technique for partial rendering. You can download the jQuery from
http://docs.jquery.com/Downloading_jQuery
and jQuery validation pugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation. You
can read Rick Strahl’s excellent article about jQuery from here.