如何通過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來取消提交操作