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

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函数（以便页面不会自动刷新） ，但仍保持客户端验证？

Answer 1

<input type="submit" value="submit" />可能是罪魁祸首。 由于输入类型为Submit，因此发生了默认表单提交。 您可以将Submit按钮更改为其他html标签（例如span），然后使用JQuery分配click事件来处理提交，或者您可以取消现有的Submit处理程序中的默认操作（请参阅.submit （）有关如何执行此操作的JQuery文档 ）。

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