Как получить список чекбоксов и отправить его в Action в объекте List?

Question

Как получить список флажков и отправить его в Action в объекте IList?Я хотел бы использовать jQuery, чтобы получить список объектов со своей страницы, затем создать объект и отправить его в метод действия.В методе действия это должен быть объект List .net.

Answer 1

Предполагая, что у вас есть список флажков в вашей разметке:

<input type="checkbox" name="c1" checked="checked" />
<input type="checkbox" name="c2" />
<input type="checkbox" name="c3" checked="checked" />
<input type="checkbox" name="c4" />

и действие контроллера, которое будет принимать значения:

[HttpPost]
public ActionResult Foo(IEnumerable<bool> values)
{
    ...
}

, вы можете вызвать его следующим образом:

var values = $(':checkbox').map(function () {
    return $(this).is(':checked');
}).toArray();

$.ajax({
    url: '<%= Url.Action("Foo") %>',
    type: 'post',
    traditional: true,
    data: { values: values },
    success: function (result) {
        alert('ok');
    }
});

Теперь давайте предположим, что вы также хотели отправить имя флажка.Чтобы вы могли выполнить следующее действие:

[HttpPost]
public ActionResult Foo(IEnumerable<MyViewModel> values)
{
    ...
}

, где MyViewModel выглядит следующим образом:

public class MyViewModel
{
    public string Name { get; set; }
    public bool IsChecked { get; set; }
}

В этом случае вы можете отправить запрос в виде строки JSON.Это будет работать из коробки в ASP.NET MVC 3, потому что есть встроенная JsonValueProviderFactory возможность анализировать JSON-запросы и привязывать их к строго типизированным моделям, но если вы работаете в более старых версиях, вы все равно можете определитьэтот пользовательский провайдер вручную :

var values = $(':checkbox').map(function () {
    return { name: this.name, isChecked: $(this).is(':checked')};
}).toArray();

$.ajax({
    url: '<%= Url.Action("Foo") %>',
    type: 'post',
    contentType: 'application/json',
    data: JSON.stringify({ values: values }),
    success: function (result) {
        console.log(result);
    }
});