Использовать jQuery.serializeArray в ASP.NET MVC - PullRequest
Новая
       1

Использовать jQuery.serializeArray в ASP.NET MVC

1 голос
/ 26 января 2011

Я публикую $('#myForm').serializeArray() в действии ASP.NET MVC (2.0). Сериализованный массив выглядит следующим образом: 

filters[0][name]    : gemcolor
filters[0][value]   : Yellow
filters[1][name]    : gemcolor
filters[1][value]   : Green
filters[2][name]    : jcOnly
filters[2][value]   : true
someOtherData       : abc

Я хочу, чтобы это потреблялось в:

public ActionResult GetData(Filter filter)

class Filter {
    string someOtherData;
    bool jcOnly;
    List<string> gemcolor;
}

Я могу просто покопаться в FormCollection, но я ищу более элегантное решение (я подозреваю, что это будет связано с пользовательским механизмом связывания моделей).

Ответы [ 2 ]

1 голос
/ 26 января 2011

Это не сработает, потому что связыватель модели по умолчанию не ожидает, что данные будут отформатированы следующим образом.Просто используйте .serialize() вместо serializeArray().Пример: 

$.ajax({
    url: '/foo',
    type: 'post',
    data: $('#myForm').serialize(),
    success: function(result) {
        alert('ok');
    }
});

или упростите свою жизнь с помощью превосходного плагина jquery , который позволяет элегантно AJAXify существующих HTML-форм: 

$(function() {
    $('#myForm').ajaxForm(function(result) {
        alert('ok');
    });
});

ОБНОВЛЕНИЕ:

После объяснения в вашем комментарии вот как вы можете продолжить:

Вы можете использовать плагин из этого ответа , который преобразует элементы формы вобъект понятен связующему по умолчанию модели и может быть агрегирован с некоторой другой информацией: 

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

, а затем просто: 

data: { filters: $('#myForm').serializeObject(), someOtherData: 'foo bar'  }
0 голосов
/ 22 апреля 2015

Я знаю, что это старо, но как насчет чего-то подобного - это то, что я обычно использую на своих страницах для отправки через ajax: 

$(function () {

    @*-- PostAll--*@

    $(".postAll").click(function () {
        var container = $(this).closest(".postGroup");
        var p = {};

        container.find("input[type='text'], input[type='radio']:checked, input:checkbox:checked, textarea").each(function (i, e) {

            p[$(e).attr("name")] = $(e).val();

        });

        container.find('select').each(function (i, e) {

            p[$(e).attr("name")] = $(e).find('option:checked').val();

        });

        $.post($(this).data("url"), p, function (data, status) {
            //Do Some Notification
        })

    });


});

Я склонен иметь структуру HTML как:

  1. Div, содержащий все элементы формы
  2. Кнопка внутри div
  3. кнопка с атрибутом URL с URL

Примерно так: 

<div class="postGroup">
    <div class="row">
        <div class="col-md-2 col-md-offset-3">
            <input type="text" name="myText" />
        </div>
        <div class="col-md-2">
            <input type="radio" name="myRad" value="A1" />
            <input type="radio" name="myRad" value="A2" />
            <input type="radio" name="myRadTwo" value="A3" />
            <input type="radio" name="myRadTwo" value="A4" />

        </div>
        <div class="col-md-2">
            <input type="checkbox" name="mycheck" value="B1" />
            <input type="checkbox" name="mycheck" value="B2" />
            <input type="checkbox" name="mycheckTwo" value="B3" />
            <input type="checkbox" name="mycheckTwo" value="B4" />
        </div>
        <div class="col-md-2">
            <select name="mySelect">
                <option value="S1">Select 1</option>
                <option value="S2">Select 2</option>
                <option value="S3">Select 3</option>
                <option value="S4">Select 4</option>
            </select>
            <select name="mySelectTwo">
                <option value="R1">Select 1</option>
                <option value="R2">Select 2</option>
                <option value="R3">Select 3</option>
                <option value="R4">Select 4</option>
            </select>
        </div>
    </div>
    <button class="postAll" data-url="/MyEndpoint">click</button>
</div>

Тогда у вас может быть нормальная модель для захвата того, что вам нужно. Не уверен, что это лучший способ или что-то в этом роде, но я использую это несколько раз.

...