Как отправить форму ASP NET MVC3 через ajax, переопределяя поведение по умолчанию при сохранении проверки на стороне клиента

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. Вы можете изменить кнопку отправки на другой html-тег (например, span), а затем использовать JQuery, чтобы назначить событие click для обработки вашей отправки, или вы можете отменить действие по умолчанию в обработчике отправки, который у вас есть сейчас (см. .submit () документация для JQuery о том, как это сделать).

... мы можем отменить действие отправки, вызвав .preventDefault () для объекта события или вернув false из нашего обработчика