Как правильно разместить форму с помощью jquery ajax и MVC3?

Question

Я видел несколько способов, как это сделать. Мой собственный метод, который мне нравится, кроме одной части, следующий:

1. Hijack submit-событие формы

2. Соберите данные и создайте json объект

   var objToSend = { Property : $('#propertyField').val(), Property2 : ... };
   

   Эта часть мне не нравится, так как собирать 25 таких значений утомительно

3. Позвоните $.ajax({}) и укажите URL-адрес, указывающий на включенное действие [HttpPost] где-нибудь

4. в случае успеха: часть ajax-запроса, сбор возвращаемых данных (которые я возвращаю в виде строки) и их запись в соответствующих случаях. Здесь я также обрабатываю ошибки, проверяя, является ли первое слово «Ошибка:», а затем предпринимаю соответствующие действия.

Мне нравится этот метод, кроме этапа сбора. Я уверен, что есть лучший способ сделать это, но я с головой окунулся в jquery, исходящий из ASP.NET фона WebForms, так что вся часть "охвата сети" мне совершенно чужда.

Answer 1

Вы можете использовать метод serialize(), чтобы не пропускать все поля одно за другим.Он отправит все данные формы на сервер, используя тип контента application/x-www-form-urlencoded, как если бы это была стандартная отправка формы:

$('#myform').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            // TODO: handle the success case
        }     
    });
    return false;
});

Другой возможностью является плагин формы jQuery :

$('#myform').ajaxForm(function(result) { 
    // TODO: handle the success case
});

Некоторые люди считают также полезным использовать помощники Ajax.BeginForm для визуализации формы:

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "success" }))
{
    ... some input fields
}

В ASP.NET MVC 3 вам необходимо включитьjquery.unobtrusive-ajax.js скрипт, который ненавязчиво AJAX увеличивает атрибуты HTML 5 data-*, испускаемые помощником Ajax.

Answer 2

Разрешите jQuery создать JSON для вас.Вы можете сериализовать форму, которая создаст набор данных для отправки.

$.post("myUrl", 
       $("form").serialize(), 
       function(callback) { ... } 
     );

Answer 3

Я склонен использовать «плагин формы jQuery». Это позволяет без особых усилий преобразовывать стандартную стандартную форму в форму AJAX:

http://jquery.malsup.com/form/

Он также позволяет вам легко отлавливать различные события, условия сбоев, проверки и т. Д. И может преобразовывать вашу форму в запрос JSON или XML, если вы хотите. Обрабатывает загрузку файлов тоже.

Answer 4

Вот как бы я это сделал!

У вас также есть возможность использовать помощников MVC, чтобы создать для вас код обработки почтового кода, если вы имеете дело с формой, например,

<% using (html.BeginForm()) {%>

    // html for the form


    <input type='submit' value='post' />

<% } %>

Переход от WebForms к MVC может быть сложным для людей, если вы действительно имеете дело с необработанными аспектами веб-программирования, такими как http, html и javascript ... Кстати, я считаю, что это хорошо, так как я не фанат псевдо-модели событий одного процесса WebForms.

Да здравствует MVC! :)