ASP.NET MVC - Form Post always redirect when I just want to bind json result to a div

Posted by Saxman on Stack Overflow See other posts from Stack Overflow or by Saxman
Published on 2010-12-22T17:20:10Z Indexed on 2010/12/22 17:54 UTC
Read the original article Hit count: 294

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about jQuery