ASP.NET MVC - Form Post всегда перенаправляют, когда я просто хочу привязать результат json к div

Question

У меня небольшая проблема с результатом json. Я отправляю контактную форму, и после отправки я просто хочу вернуть некоторые данные json (указывающие на успех или неудачу и отображающие сообщение) обратно в представление, не вызывая перенаправления, но оно продолжало перенаправлять меня действие, вот коды:

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>

Контроллер

[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 1014 *

$(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;
    });
});

Я также пробовал этот javascript, но также получил перенаправление

$(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);
    }
});

Есть идеи, что происходит с моим кодом?

Большое спасибо.

Answer 1

В вашем коде происходит много вещей, и я постараюсь охватить большинство из них.

Тот факт, что вы получаете перенаправление, означает, что у вас есть ошибка где-то в вашем JavaScript. Я бы начал со следующего упрощения вашего кода. Лично я предпочитаю подписаться на событие submit формы вместо события click кнопки отправки:

$(function() {
    $('#contactForm').submit(function() {
        $.ajax({
            type: this.method,
            url: this.action,
            data: $(this).serialize(),
            success: function (result) {
                if (result.success) {
                    $('#contactForm')[0].reset();
                }
                $('#contactFormStatus').text(result.message);
            }
        });
        return false;
    });
});

Также обратите внимание, что вы, вероятно, хотите:

$('#contactForm')[0].reset();

вместо:

$('#contactForm')[0].reset;

Еще одна вещь, которую я заметил, это то, что вы, вероятно, хотите:

$('#contactFormStatus').text(result.message);

вместо:

$('#contactFormStatus').append(result.message);

, поскольку result.message - это простая строка, возвращаемая вашим контроллером, она не представляет никакого элемента DOM, чего ожидает функция .append().

Могут быть и другие ошибки. Мои глаза устали. Используйте FireBug , он сообщит вам обо всех ошибках, которые у вас есть в ваших скриптах, и как только вы исправите их, все заработает.

---

ОБНОВЛЕНИЕ:

Я забыл упомянуть, что, поскольку у вас есть общий сценарий (AJAXifying формы), люди написали для него плагин jquery , чтобы вам не пришлось проходить через всю боль и снова и так, чтобы вы могли просто иметь:

$(function() {
    $('#contactForm').ajaxForm(function(result) {
        if (result.success) {
            $('#contactForm')[0].reset();
        }
        $('#contactFormStatus').text(result.message);
    });
});

Теперь это намного лучше, не так ли?

Также действие вашего контроллера выглядит запутанным со всеми этими волшебными строками. Как насчет использования модели представления:

public class ContactViewModel
{
    [Required]
    public string ContactName { get; set; }

    [Required]
    public string ContactEmail { get; set; }

    public string ContactPhone { get; set; }

    [Required]
    public string ContactMessage { get; set; }
}

, а затем просто:

[HttpPost]
public ActionResult ContactForm(ContactViewModel contact)
{
    if (!ModelState.IsValid)
    {
        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." 
    });
}

Теперь у нас есть кое-что намного чище.

И все, что осталось, это очистить ваш взгляд, воспользовавшись моделью представления и строго типизированными помощниками:

<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>
                @Html.TextBoxFor(x => x.ContactName, new { tabindex = "1", size = "22", @class = "text_input required" })
                @Html.LabelFor(x => x.ContactName, "Your Name (required)")
            </p>
            <p>
                @Html.TextBoxFor(x => x.ContactEmail, new { tabindex = "2", size = "22", @class = "text_input required" })
                @Html.LabelFor(x => x.ContactEmail, "Email (required)")
            </p>
            <p>
                @Html.TextBoxFor(x => x.ContactPhone, new { tabindex = "3", size = "22", @class = "text_input" })
                @Html.LabelFor(x => x.ContactPhone, "Phone")
            </p>
            <p>
                @Html.LabelFor(x => x.ContactMessage, "Message (required)")
                @Html.TextAreaFor(x => x.ContactMessage, 4, 56, new { tabindex = "4", @class = "text_input required" })
            </p>
            <p>
                <input type="submit" value="Send" tabindex="5" id="contactSubmit" class="button submit" name="contactSubmit" />
            </p>
        }
    </div>
    <div id="contactFormStatus">
    </div>
</div>

Answer 2

Я сделал это следующим образом с $ .post ()

$('#contactForm').live('submit', function () {
//rest of code
});