ASP.NET MVC - 当我只想将json结果绑定到div时,Form Post总是重定向

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的

$(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是控制器返回的纯字符串,它不代表.append()函数所需的任何DOM元素.

可能还有其他错误.我的眼睛很累.使用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>