Передача значения input type="checkbox" в контроллер

@holod2014 · Регистрация: 01.03.2014

Студворк — интернет-сервис помощи студентам

Доброго времени суток, форумчане.

Есть представление выводящее таблицу со списком пользователей:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <div class="nl">
        <table class="table table-striped table-bordered ">
            <tbody class="table-responsive ">
                <tr><th>Selected</th><th>Login</th><th>Date of registration</th><th>Date Last Login</th><th>Block disabled</th></tr>
                @foreach (var user in Model)
                {
                    <tr>
                        <td><input type="checkbox" id="@user.UserName" class="styled"></td>
                        <td>@user.UserName</td>
                        <td>@user.DateOfRegistration</td>
                        <td>@user.DateLastLogin</td>
                        <td>@user.LockoutEnabled</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

Как можно передать значения выбранных "checkbox" в контроллер?
Далее в контроллере опишу действия для удаления/изменения выбранных позиций.
Т.е. будет одна кнопка позволяющая удалить несколько позиций.

@azariah · 06.09.2018, 15:20

Не претендую на правильность
В голову приходить сделать дополнительную модель, состоящую из 2 элементов: вашей модели + флаг для чекбокса. И передавать в контроллер уже массив новых моделей, дальше уже пост запрос, который принимает тоже новые модели.

@holod2014 · 06.09.2018, 20:40 **[ТС]**

Можно немного поподробнее?

@azariah · 06.09.2018, 23:52

Только тут еще нужно связывающее св-во вроде Id добавить.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
namespace CheckTest.Models
{
 public class Checker
    {
        public string Name { get; set; }
        
    }
  public class CheckerViewModel
    {
       
        public string  Name{get;set;}
        public bool IsChecked{get;set;}
    }
}

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
namespace CheckTest.Controllers
{
    public class HomeController : Controller
    {
       static IEnumerable<Checker> Checkers;
 
       public HomeController()
 
       {
            
            Checkers = new List<Checker>
            { 
               new Checker{Name="Unchecked"},
               new Checker{Name="Unchecked"},
             new Checker{Name="Unchecked"}
 
            };
       }
        
        public IActionResult Index()
        {     
            List<CheckerViewModel> ch = new List<CheckerViewModel>();
            foreach(var i in Checkers)
                ch.Add(new CheckerViewModel{Name=i.Name,IsChecked=false});
            return View(ch);
        }
 
        [HttpPost]
        public IActionResult Index(List<CheckerViewModel> ch)
        {
          for(int i=0;i<ch.Count;i++)
            if(ch[i].IsChecked==true) ch[i].Name="Checked";
            else ch[i].Name="Unchacked";
          return View(ch);
        }
        
 
 
    }
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@model List<CheckerViewModel>
@{
    ViewData["Title"] = "Home Page";
}
<form method="POST" action="/Home/Index">
 
  @for (int i = 0; i < Model.Count; i++)
  {
      
 
     <div> 
        @Html.DisplayFor(m=>m[i].Name)
         @Html.EditorFor(m=>m[i].IsChecked)
         </div>
  }
 
  
    
  
  
 
<input type="submit" value="Rename"/>
 
   </form>

Добавлено через 1 час 20 минут
В предыдущем примере данные не правильно в контроллер приходят.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@model List<CheckerViewModel>
@{
    ViewData["Title"] = "Home Page";
}
<form method="POST" action="/Home/Index">
 
  @for (int i = 0; i < Model.Count; i++)
  {
      
 
     <div> 
        @Html.EditorFor(m=>m[i].Name)
         @Html.EditorFor(m=>m[i].IsChecked)
         </div>
  }
 
  
    
  
  
 
<input type="submit" value="Rename"/>
 
   </form>

@holod2014 · 07.09.2018, 01:04 **[ТС]**

Пока сделал так:
Представление:

C#
1
2
3
4
5
6
7
8
9
10
11
    <form method="post" asp-action="Delete">
        <button type="submit" onclick="SelectedCheckbox()" class="btn-group col-md-2 col-md-offset-0">Remove</button>
    </form>
...
    function SelectedCheckbox() {
    var selectedItems = new Array();
        $("input[id='check']:checked").each(function () { selectedItems.push($(this).val()); });
        alert(selectedItems);
 
        return (selectedItems);
    }

Контроллер:

C#
1
2
3
4
5
        [HttpPost]
        public async Task<ActionResult> Delete(????)
        {
         ...
        }

JS отрабатывает и в selectedItems помещает верные данные(значения выбранных checkbox).
Как теперь мне эти данные перекинуть в контроллер?

@Xivilai · 07.09.2018, 19:24

Че вы ребята какую то дичь придумываете. Можно же постить в массив:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
 @foreach (var user in Model)
                {
                    <tr>
                        <td><input type="checkbox" name="selectedUsers"
                                   id="@user.Id" value="@user.Id"
                                   class="styled"></td>
                        <td>@user.UserName</td>
                        <td>@user.DateOfRegistration</td>
                        <td>@user.DateOfLastLogin</td>
                        <td>@user.LockoutEnabled</td>
                    </tr>
                }

В контроллере:

C#
1
2
3
4
5
[HttpPost]
        public IActionResult Index(string[] selectedUsers)
        {
            return View(selectedUsers);
        }

@holod2014 · 08.09.2018, 18:37 **[ТС]**

В selectedUsers ничего не приходит...

@Xivilai · 08.09.2018, 20:29

name тэг на input не забыл добавить?. Если есть, то возможно только в .Net Core 2.0 это добавили.

@holod2014 · 08.09.2018, 21:16 **[ТС]**

Вот полностью моё представление:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@model IEnumerable<Task1.Models.User>
@{
    ViewBag.Title = "Список пользователей";
}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 
 
<div class="btn-toolbar nl container col-md-12" role="toolbar" aria-label="Menu">
 
    <form method="post" asp-action="Delete">
        <button type="submit" onclick="SelectedCheckbox()" name="delete" id="delete" class="btn-group col-md-2 col-md-offset-0">Remove</button>
    </form>
 
    <form method="post" asp-controller="Account" asp-action="LogOff">
        <button type="submit" class="col-md-2 col-md-offset-3 " role="group" aria-label="LogOff" />LogOff</button>
    </form>
</div>
 
<form asp-action="Delete">
    <div class="nl">
        <table class="table table-striped table-bordered ">
            <tbody class="table-responsive ">
                <tr><th><input type="checkbox" class="all" data-id="d1" title="Выбрать все"></th><th>Login</th><th>Date of registration</th><th>Date Last Login</th><th>Block disabled</th></tr>
 
                @foreach (var user in Model)
                {
                    <tr>
                        <td>
                            <input type="checkbox" name="selectedUsers"
                                   id="@user.Id" value="@user.Id"
                                   class="styled">
                        </td>
                        <td>@user.UserName</td>
                        <td>@user.DateOfRegistration</td>
                        <td>@user.DateLastLogin</td>
                        <td>@user.LockoutEnabled</td>
                    </tr>
                }
            </tbody>
 
        </table>
    </div>
</form>

Метод Delete контроллера UsersController:

C#
1
2
3
4
5
6
        [HttpPost]
        public async Task<ActionResult> Delete(string[] selectedUsers)
        {
...
            return RedirectToAction("Index");
        }

В selectedUsers ничего не приходит.

@HF · 08.09.2018, 23:09

Так как тут формируется массив

JavaScript
1
$("input[id='check']:checked").

, то я бы первым делом проверить что тут происходит:

JavaScript
1
id="@user.Id" name="selectedUsers"

Если уж вручную создаётся запрос, то и name и не был нужен. Name нужно если бы данные были в form завёрнуты.
Вообщем или поменять jquery выборку (на name='selectedUsers') или запихнуть это в form и тогда всё при postback само придёт, то что будет "зачекано".

@holod2014 · 08.09.2018, 23:54 **[ТС]**

Туплю, а можно поподробнее для тех кто в броне...

@HF · 09.09.2018, 02:20

Сообщение от holod2014

Туплю, а можно поподробнее для тех кто в броне...

Готовый код я не буду писать. И потому что я просто вижу неправильность, но не проверял. Просто объясню первый вариант

1) вы формируете объекты с id="@user.Id"
Что вы запишете в id? скорее всего 1, 2, 3 и т.п.

2) далее вы в jquery формируете массив из значений элементов с атрибутом (далее удивляемся)... check

JavaScript
1
$("input[id='check']:checked").

Уже на этой стадии, ваш alert(selectedItems); должен показать пустой массив. И отладка контроллера - совершенно пустая затея.

Исправление: установить правильный фильтр для поиска.
Или вы делаете поиск по одинаковому атрибуту - в вашем случае это name="selectedUsers".
Или пишете поиск по чему-то что точно поймёт что вам нужны именно эти элементы. Например: $(".nl input[type='checkbox'):checked")
Первое удобнее и понятнее.

Второй вариант: чтобы данные находились в form. Тогда они сами попадут в контроллер и там уже с ними можно работать. См. пример azariah. Но он сложный для вас. Главное чтобы вы поняли - если бы таблица находилась внутри form, то по нажатию submit, в контроллер улетят все элементы с аттрибутом name. А если у чекбоксов будет одно название атрибута, то сформируется он в виде массива. (Грубо говоря).

Сделайте первый вариант и всё будет хорошо.

@Xivilai · 09.09.2018, 09:17

Все работает:

// Index GET

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public IActionResult Index()
        {
            AppUser[] users =
            {
                new AppUser()
                {
                    Id = 4,
                    UserName = "Carl",
                },
                new AppUser()
                {
                    Id = 6,
                    UserName = "Mike",
                },
                new AppUser()
                {
                    Id = 3,
                    UserName = "John",
                }
            };
            return View(users);

Index View:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form method="post">
    <div class="nl">
        <table class="table table-striped table-bordered ">
            <tbody class="table-responsive ">
                <tr><th><input type="checkbox" class="all" data-id="d1" title="Выбрать все"></th><th>Login</th><th>Date of registration</th><th>Date Last Login</th><th>Block disabled</th></tr>
                @foreach (var user in Model)
                {
                    <tr>
                        <td>
                            <input type="checkbox" name="selectedUsers"
                                   id="@user.Id" value="@user.Id"
                                   class="styled">
                        </td>
                        <td>@user.UserName</td>
                        <td>@user.DateOfRegistration</td>
                        <td>@user.DateOfLastLogin/td>
                        <td>@user.LockoutEnabled</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <button type="submit">Send</button>
</form>

Index Post:

@holod2014 · 09.09.2018, 17:11 **[ТС]**

Скрипт точно отрабатывает (см. рис) -данные в контроллер не уходят.

@HF · 09.09.2018, 18:02

Сообщение от holod2014

Скрипт точно отрабатывает (см. рис) -данные в контроллер не уходят.

Покажи весь код, который вы сейчас используете. Подозреваю что у вас сейчас всё равно не правильно написано, а не так как вам все советовали.
Например, если вы всё ещё используете Это:

JavaScript
1
2
3
<form method="post" asp-action="Delete">
        <button type="submit" onclick="SelectedCheckbox()" class="btn-group col-md-2 col-md-offset-0">Remove</button>
    </form>

то разумеется ничего не придёт.

@holod2014 · 09.09.2018, 18:54 **[ТС]**

Сделал как советовал Xivilai. Если одна кнопка

HTML5
1
<button type="submit">Delete</button>

то всё работает, а если добавляю ещё две - то нет. Со способом HF не разобрался.

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
@model IEnumerable<Task1.Models.User>
@{
    ViewBag.Title = "Список пользователей";
}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 
 
<div class="btn-toolbar nl container col-md-12" role="toolbar" aria-label="Menu">
 
    <button class="btn-group col-md-2 col-md-offset" role="group" aria-label="Block">Block</button>
 
    <form method="post" asp-action="Delete">
        <button type="submit" onclick="SelectedCheckbox()" class="btn-group col-md-2 col-md-offset-0">Remove</button>
    </form>
 
    <button class="btn-group col-md-2 col-md-offset-0" role="group" aria-label="Unlock">Unlock</button>
 
    <form method="post" asp-controller="Account" asp-action="LogOff">
        <button type="submit" class="col-md-2 col-md-offset-3 " role="group" aria-label="LogOff" />LogOff</button>
    </form>
</div>
 
<form method="post" @*asp-action="Delete"*@>
    <div class="nl">
        <table class="table table-striped table-bordered ">
            <tbody class="table-responsive ">
                <tr><th><input type="checkbox" class="all" data-id="d1" title="Выбрать все"></th><th>Login</th><th>Date of registration</th><th>Date Last Login</th><th>Block disabled</th></tr>
 
                @foreach (var user in Model)
                {
                    <tr>
                        <td>
                            <input type="checkbox" @*id="@user.Id" id="check" *@ value="@user.UserName" name="selectedUsers" class="one" data-id="d1">
                        </td>
                        <td>
                            @user.UserName
                            <input type="hidden" name="UserName" value="@user.UserName" />
                        </td>
 
                        <td>@user.DateOfRegistration</td>
                        <td>@user.DateLastLogin</td>
                        <td>@user.LockoutEnabled</td>
 
                        <td>
                        </td>
                    </tr>
                }
            </tbody>
 
        </table>
    </div>
    <button type="submit" formaction="Users/Delete" value="v1">Delete</button>
    <button type="submit" formaction="Users/Block" value="v2">Block</button>
    <button type="submit" formaction="Users/UnBlock" value="v3">UnBlock</button>
</form>
 
@*Выбрать всё*@
<script type="text/javascript">
    $(document).ready(function () {
        $(".all").on("change", function () {
            var groupId = $(this).data('id');
            $('.one[data-id="' + groupId + '"]').prop("checked", this.checked);
        });
 
        $(".one").on("change", function () {
            var groupId = $(this).data('id');
            var allChecked = $('.one[data-id="' + groupId + '"]:not(:checked)').length == 0;
            $('.all[data-id="' + groupId + '"]').prop("checked", allChecked);
        });
    });
</script>
@*Только отмеченные*@ 
<script type="text/javascript">
 
    function SelectedCheckbox() {
    var selectedItems = new Array();
        $("input[id='check']:checked").each(function () { selectedItems.push($(this).val()); });
        alert(selectedItems);
 
        return (selectedItems.toString());
    }
 
</script>

Добавлено через 32 минуты
Спасибо. Тему можно закрывать. Благодарность HF и Xivilai за разъяснение.

@HF · 09.09.2018, 19:19

Сообщение от holod2014

Спасибо. Тему можно закрывать. Благодарность HF и Xivilai за разъяснение.

Заработали все варианты? или оставили то что рабочее? Нужно разбираться до конца, чтобы не столкнутся с этим опять.

То что выше - вариант 2: когда элементы находятся в form и автоматически передаются в контроллер значения со всех элементов с аттрибутом name. Работает только Delete потому что у формы может быть только 1 экшен. Другие экшены можно делать через явный ajax запрос.

Вот пример (но не тестировал, просто набросал)
1) поменять кнопку. Вытащить её из form и сделать обычной, а не submit

HTML5
1
2
3
<form method="post" asp-action="Delete">
        <button type="submit" onclick="SelectedCheckbox()" class="btn-group col-md-2 col-md-offset-0">Remove</button>
    </form>

на

HTML5
1
<button type="button" onclick="SelectedCheckbox()" class="btn-group col-md-2 col-md-offset-0">Remove</button>

2) изменить метод. Сейчас он просто формирует список, но не отправляет никуда.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    @*Только отмеченные*@
    <script type="text/javascript">
 
        function SelectedCheckbox() {
            var checkedArray = new Array();
            $("input[name='selectedUsers']:checked")
                .each(function () {
                    checkedArray.push($(this).val());
                });
            alert(checkedArray);
 
            $.ajax({
                type: "POST",
                url: '@Url.Action("Delete", "Users")',
                dataType: "json",
                data: { 'selectedItems': checkedArray },
                success: function (data) {
                    alert('Success');
                },
                error: function (data) {
                    alert('fail');
                }
            });
            return;
        }
    </script>

И совершенно не понимаю как у вас там список в алерте появляется, если выборка ищет по id='check' которых в разметке нет.

@Xivilai · 10.09.2018, 12:21

В HTML5 форма может иметь больше одного action
Для таких случаев полезный аттрибут formaction.
Вот пример:

HTML5
1
2
3
4
5
6
<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit">Submit</button><br>
  <button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>

Нажатие первой кнопки: - запрос в /action_page.php
Нажатие второй кнопки: - запрос в в /action_page2.php

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@azariah 50 / 39 / 17 Регистрация: 15.03.2018 Сообщений: 110
	06.09.2018, 15:20
	Не претендую на правильность В голову приходить сделать дополнительную модель, состоящую из 2 элементов: вашей модели + флаг для чекбокса. И передавать в контроллер уже массив новых моделей, дальше уже пост запрос, который принимает тоже новые модели. 1

@holod2014 30 / 11 / 5 Регистрация: 01.03.2014 Сообщений: 379
	06.09.2018, 20:40 [ТС]
	Можно немного поподробнее? 0

@holod2014 30 / 11 / 5 Регистрация: 01.03.2014 Сообщений: 379
	08.09.2018, 18:37 [ТС]
	В selectedUsers ничего не приходит... 0

@Xivilai 3 / 2 / 1 Регистрация: 17.11.2014 Сообщений: 23
	08.09.2018, 20:29
	name тэг на input не забыл добавить?. Если есть, то возможно только в .Net Core 2.0 это добавили. 0

@holod2014 30 / 11 / 5 Регистрация: 01.03.2014 Сообщений: 379
	08.09.2018, 23:54 [ТС]
	Туплю, а можно поподробнее для тех кто в броне... 1

@holod2014 30 / 11 / 5 Регистрация: 01.03.2014 Сообщений: 379
	09.09.2018, 17:11 [ТС]
	Скрипт точно отрабатывает (см. рис) -данные в контроллер не уходят. Миниатюры 0

Передача значения input type="checkbox" в контроллер

Решение