|
Using jQuery To Hijack ASP.NET MVC Form Posts
|
|
Rating: 17 user(s) have rated this article
Posted by: Malcolm Sheridan,
on 12/22/2009,
in category "ASP.NET MVC"
Views: this article has been read 21986 times
Abstract: The following article demonstrates how to hijack ASP.NET MVC form posts using jQuery.
Using jQuery To Hijack ASP.NET MVC Form Posts
I’ve been working with jQuery and ASP.NET MVC for a while now, and it always amazes me the things you can do, but you never think of doing them! Recently I had to post data from a form asynchronously so as not to move the user from the current page. Sounds hard but in reality it’s quite simple. When you use jQuery it’s possible to intercept and change behaviours through hijacking. Some refer as hijaxing since the goal is to add Ajax functionality.
Shown below is a screencast that demonstrates how to use jQuery to Hijack MVC Forms Posts. If for some reason, you are unable to view the screencast shown below, you can view the screencast directly over here
To demonstrate this I’ve created a simple form in my view:
<% using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post))
{ %>
<%= Html.AntiForgeryToken("Sample") %>
<table>
<tr>
<td>
<label for="title">
Title</label>
</td>
<td>
<select id="title" name="title">
<option>Mr</option>
<option>Dr</option>
<option>Ms</option>
<option>Mrs</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="givenName">
Given Name</label>
</td>
<td>
<input id="name" name="givenName" type="text" />
</td>
</tr>
<tr>
<td>
<label for="surname">
Surname</label>
</td>
<td>
<input id="surname" name="surname" type="text" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
<% } %>
<div id="result"></div>
I think you’ll agree that’s a pretty standard form. I’ve told the form to post to the Home controllers SubmitForm action, and a post will occur. If you filled in the form and clicked submit now, the data will be posted to the controller’s action, but a full page refresh will also occur. To get around this you can use jQuery to hijack the form. Here’s the following code to be able to post data using ajax.
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("form").submit(function(e) {
$.post($(this).attr("action"),
$(this).serialize(),
function(data) {
$("#result").html(data);
});
e.preventDefault();
});
});
</script>
I’m catching the forms post event by this line:
$("form").submit(function(e) {
From there I’m using jQuery $.post operation to send the post request to the server. $.post in its simplest form expects a URL, data and a call-back function. I am retrieving the forms action with this line:
$(this).attr("action")
This maps back to Home/SubmitForm. I defined this when creating the form:
using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post))
The data is serialized with the following code:
$(this).serialize()
Finally I’ve created a call back function to render the result in a <div> element. All of that is good, but the real trick to hijack the form post is the following line:
e.preventDefault();
preventDefault() does what it says. It prevents the default behaviour of the object. Because the event is from the form, the default behaviour of the form is to submit data. This line stops the page refresh. This is a nice and simple way to post data using Ajax without having to do a page refresh. The entire source code of this article can be downloaded over here
If you liked the article, 
Subscribe to the RSS Feed or Subscribe Via Email
Malcolm Sheridan is an independent contractor who has been working with Microsoft technologies since VB4. Malcolm has worked with .NET since its inception and thoroughly enjoys ASP.NET.