Question

我希望能够使用ajax帖子发布此表单数据，但我无法弄清楚如何在发布表单时覆盖默认行为。我仍然希望从ASP NET MVC3进行客户端验证。例如，当我单击此表单中的“提交”时，当我有一个jquery函数时，它直接进入控制器操作，该函数应该直接处理来自此表单的任何提交。

 @model BlogApp.Models.PostUser

 @using (Html.BeginForm("LoginForm", "Home", FormMethod.Post, new { id = "testform" }))
{
@Html.ValidationSummary(true)
<fieldset>
    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name, new { id = "Name" })
        @Html.ValidationMessageFor(model => model.Name)
    </div>
        <input type="submit" value="submit" />
</fieldset>
}

这是jquery函数：

 $('#testform').live('submit', function () {
    $('#testform').validate();

    var name = $('#Name').val();
    var logout = '<a href="#" onClick="logOut()">logout</a>';
    var login_success = '<p>Logged in as: ' + name + '</p>' + logout;

    if ($(this).valid()) {
        $.ajax({
            url: '/home/loginform',
            type: 'POST',
            data: { name: name },
            success: function (data) {
                if (data === true) {
                    $('#loginform').empty();
                    $('#loginform').append(login_success);
                }
                else {
                    alert('Failed to save the user');
                }
            }
        });
    }


});

所以我的问题是：而不是表单自动转到控制器操作（/ Home / LoginForm /）并返回该结果，如何提交表单触发我的jquery函数（这样页面不会自动-refresh），但仍然保持客户端验证？

Answer 1

<input type="submit" value="submit" />可能是罪魁祸首。由于输入类型提交，正在进行默认表单提交。您可以将提交按钮更改为不同的html标记（如跨度），然后使用JQuery分配click事件来处理您的提交，或者您可以取消现在提交处理程序中的默认操作（请参阅{{ 3}}关于如何做到这一点）。

...我们可以通过在事件对象上调用.preventDefault（）或从我们的处理程序返回false来取消提交操作

如何在保持客户端验证的同时覆盖默认行为，同时通过ajax提交ASP NET MVC3表单

1 个答案: