ASP.NET MVC - Form Post always redirect when I just want to bind json result to a div
- by Saxman
Hi all,
I'm having a little problem with json result. I'm submitting a contact form, and after the submission, I just want to return some json data (indicating either a success or failed and displays a message) back to the view, without causing a redirect, but it kept redirecting me to the action, here are the codes:
HTML
<div id="contactForm2" class="grid_6">
<div id="contactFormContainer">
@using (Html.BeginForm(MVC.Home.ActionNames.ContactForm, MVC.Home.Name, FormMethod.Post, new { id = "contactForm" }))
{
<p>
<input type="text" tabindex="1" size="22" value="" id="contactName" class="text_input required"
name="contactName" />
<label for="contactName">
<strong class="leftSpace">Your Name (required)</strong></label></p>
<p>
<input type="text" tabindex="2" size="22" value="" id="contactEmail" class="text_input required"
name="contactEmail" />
<label for="contactEmail">
<strong class="leftSpace">Email (required)</strong></label></p>
<p>
<input type="text" tabindex="2" size="22" value="" id="contactPhone" class="text_input"
name="contactPhone" />
<label for="contactPhone">
<strong class="leftSpace">Phone</strong></label></p>
<p>
<label>
<strong class="leftSpace n">Message (required)</strong></label>
<textarea tabindex="4" rows="4" cols="56" id="contactMessage" class="text_area required"
name="contactMessage"></textarea></p>
<p>
<input type="submit" value="Send" tabindex="5" id="contactSubmit" class="button submit"
name="contactSubmit" /></p>
}
</div>
<div id="contactFormStatus">
</div>
</div>
Controller
[HttpPost]
public virtual JsonResult ContactForm(FormCollection formCollection)
{
var name = formCollection["contactName"];
var email = formCollection["contactEmail"];
var phone = formCollection["contactPhone"];
var message = formCollection["contactMessage"];
if (string.IsNullOrEmpty(name) || string.IsNullOrEmpty(email) || string.IsNullOrEmpty(message))
{
return Json(new { success = false, message = "Please complete all the required fields so that I can get back to you. Thanks." });
}
// Insert contact form data here...
return Json(new { success = true, message = "Your inquery has been sent. Thank you." });
}
javascript
$(document).ready(function () {
$('#contactSubmit').live('click', function () {
var form = $('#contactForm');
var formData = form.serialize();
$.post('/Home/ContactForm',
formData,
function (result) {
var status = $('#contactFormStatus');
if (result.success) {
$('#contactForm')[0].reset;
}
status.append(result.message);
},
'json'
);
return false;
});
});
I've also tried this javascript, but also got a redirect
$(document).ready(function () {
$('#contactSubmit').live('click', function () {
var form = $('#contactForm');
var formData = form.serialize();
$.ajax({
type: 'POST',
url: '/Home/ContactForm',
data: formData,
success: function (result) {
SubmitContactResult(result);
},
cache: false
});
});
function SubmitContactResult(result) {
var status = $('#contactFormStatus');
if (result.success) {
$('#contactForm')[0].reset;
}
status.append(result.message);
}
});
Any idea what's going on with my code?
Thank you very much.
