Как получить между текстовое значение тега кнопки в IFormCollection?

Question

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

В действии контроллера IFormCollection предоставляет различное значение ключа, но не ту кнопку, теги которой содержат результаты, он всегда возвращает ноль

<button type="button" data-toggle="dropdown" name="State" data-placeholder="---" class="dropdown-toggle js-select-checkboxes-btn">---</button>
                                        <div class="dropdown-menu js-dropdown-menu js-select-checkboxes">
                                            <ul>
                                                <li>
                                                    <input id="checkbox_type_1" type="checkbox" name="checkbox_type_1" class="in-checkbox">
                                                    <label for="checkbox_type_1" data-toggle="tooltip" data-placement="left" title="Tooltip on top" class="in-label">Punjab</label>
                                                </li>
                                                <li>
                                                    <input id="checkbox_type_2" type="checkbox" name="checkbox_type_2" class="in-checkbox">
                                                    <label for="checkbox_type_2" data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="in-label">Sindh</label>
                                                </li>
                                                <li>
                                                    <input id="checkbox_type_3" type="checkbox" name="checkbox_type_3" class="in-checkbox">
                                                    <label for="checkbox_type_3" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top" class="in-label">Balochistan</label>
                                                </li>
                                                <li>
                                                    <input id="checkbox_type_4" type="checkbox" name="checkbox_type_4" class="in-checkbox">
                                                    <label for="checkbox_type_4" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top" class="in-label">Khaybar Pakhtonkhwa</label>
                                                </li>
                                                <li>
                                                    <input id="checkbox_type_5" type="checkbox" name="checkbox_type_5" class="in-checkbox">
                                                    <label for="checkbox_type_5" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top" class="in-label">Azad Kashmir</label>
                                                </li>
                                                <li>
                                                    <input id="checkbox_type_6" type="checkbox" name="checkbox_type_6" class="in-checkbox">
                                                    <label for="checkbox_type_6" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top" class="in-label">Gilgit Baltistan</label>
                                                </li>
                                            </ul>
                                            <!-- end of block .dropdown-menu-->
                                        </div>

На странице Источник:

<button type="button" data-toggle="dropdown" data-placeholder="---" class="dropdown-toggle js-select-checkboxes-btn" aria-expanded="true">Punjab, Sindh, Balochistan</button>

В результате действия контроллера:

public IActionResult SearchPerson(IFormCollection formCollection)
    {
        string txtState = formCollection["State"]; << Null}

Ожидаю вывод в виде строки, т. Е. Между тегами

Answer 1

Не удалось получить текстовое значение <button> в IFormCollection.

В качестве обходного пути вы можете добавить скрытый ввод в форму и передать ему выбранные значения при нажатии. После этого вы можете получить значение ввода в IFormCollection при отправке.

<input type="hidden" id="States" name="States" />
<button type="button" data-toggle="dropdown" data-placeholder="---" class="dropdown-toggle js-select-checkboxes-btn" aria-expanded="true">---</button>

JS код:

@section Scripts{
<script>
    $(document).ready(function () {
        $(".dropdown-menu input[type=checkbox]").each(function () {
            $(this).change(function () {
                var line = "";
                $(".dropdown-menu input[type=checkbox]").each(function () {
                    if ($(this).is(":checked")) {
                        line += $("+ label", this).text() + ",";
                    }
                });
                $("#States").val(line);
                $("button.dropdown-toggle").text(line);
            });
        });
    });
</script>

Контроллер:

[HttpPost]
public IActionResult SearchPerson(IFormCollection formCollection)
{
   string txtState = formCollection["States"];

Answer 2

Решение найдено с помощью небольшого трюка, т.е.

Шаг 1. Создан ввод скрытого типа

<input type="hidden" id="State" name="State" placeholder=""   class="form-control">

Шаг 2. Создайте функцию javascript / jquery для установки скрытого входного значения, равного тегам кнопки внутри HTML

function onsubmitclick() {
    var x = document.getElementById('btnState').innerHTML;    
    alert(x);
    $('#State').val(x);
};

Шаг 3. Вызвать функцию на кнопке подтверждения, т. Е. Сработает перед переходом к действию контроллера.

<button type="submit" onclick="onsubmitclick()" asp-controller="Home" asp-action="SearchPerson" class="form__submit" >Search</button>

Шаг 4. Доступ к скрытому входному значению на контроллере из IFormCollection.

public IActionResult SearchPerson(IFormCollection formCollection){string txtState = formCollection["State"];}

Готово!