Выберите Tag Helper получить значение и текст

Question

Я только что прочитал этот Помощник по тегам, как использовать помощник по тегам, и ранее я спрашивал об onchange для помощника по тегам.

Но на этот раз мне нужно получить текст помощника по тегу select. Это моя модель:

public class Paid__Period {
    [Key]
    public Int16 ID_Period { get; set; }
    public string Period { get; set; }
}

Это мой взгляд:

<select asp-for="Period" class="form-control input-sm"                        
    asp-items="@(new SelectList (@ViewBag.Period, "ID_Period", "Period"))" onchange="this.form.submit()">
</select>

Когда он отображается в HTML, он становится

<select class="form-control input-sm" onchange="this.form.submit()" id="Period" name="Period">
   <option value="0">- Choose Period -</option>
   <option value="1">2016 - 1 (Jan - Jun)</option>
   <option value="2">2017 - 1 (Jan - Jun)</option>
   <option value="3">2017 - 2 (Jul - Dec)</option>
   <option value="4">2018 - 1 (Jan - Jun)</option>
   <option value="5">2018 - 2 (Jul - Dec)</option>
   <option value="6">2019 - 1 (Jan - Jun)</option>
   <option value="7">2019 - 2 (Jul - Dec)</option>
   <option value="8">2020 - 1 (Jan - Jun)</option>
</select>

До сих пор все работает хорошо. Но мне нужно возвращать значение из представления в контроллер действия каждый раз, когда выбраны ID_Period и Period: '2020 - 1 (январь - июнь)'. Как это сделать?

Я просто готовлю свое действие так:

[HttpPost]
public IActionResult Paid_Tuition (Paid_Period period) {
}

но Paid_Period всегда равен нулю. Любое предложение, чтобы решить мою проблему выше?

Answer 1

Вам нужен еще один помощник по тегам (например, скрытое поле), связанный с string свойство вашей viewmodel для передачи опции текста из выбранного значения вместе с <select> сам элемент:

<select asp-for="ID_Period" class="form-control input-sm"                        
    asp-items="@(new SelectList (@ViewBag.Period, "ID_Period", "Period"))" onchange="onSelectedIndexChanged(this)">
</select>
<input asp-for="Period" type="hidden" />

Затем вы можете получить выбранную текстовую опцию, используя функцию JS, привязанную к onchange событие:

function onSelectedIndexChanged(value)
{
    var textValue = value.options[value.selectedIndex].text;
    document.getElementById('Period').value = textValue;

    // if you want to submit the form, uncomment this line below
    // document.getElementById('yourformId').submit();
}

Или, если вы используете JQuery, то вы можете удалить onchange атрибут события и дескриптор change Событие вместо присвоения значения скрытому полю:

$('#ID_Period').change(function () {
    var textValue = $('#ID_Period option:selected').text();
    $('#Period').val(textValue);

    // if you want to submit the form, uncomment this line below
    // $('form').submit();
});

Замечания:

Рекомендуется активировать отправку формы, используя кнопку, а не <select> элемента change событие.

Answer 2

но Paid_Period всегда равен нулю.

Это потому, что вы публикуете int и пытаетесь привязать это значение int к экземпляру Paid__Period,

Давайте проверим ваш визуализированный HTML:

<form ... >
    ...

    <select class="form-control input-sm" onchange="this.form.submit()" id="Period" name="Period">
       <option value="0">- Choose Period -</option>
       <option value="1">2016 - 1 (Jan - Jun)</option>
       <option value="2">2017 - 1 (Jan - Jun)</option>
       <option value="3">2017 - 2 (Jul - Dec)</option>
       <option value="4">2018 - 1 (Jan - Jun)</option>
       <option value="5">2018 - 2 (Jul - Dec)</option>
       <option value="6">2019 - 1 (Jan - Jun)</option>
       <option value="7">2019 - 2 (Jul - Dec)</option>
       <option value="8">2020 - 1 (Jan - Jun)</option>
    </select>

</form>

Когда вы выбираете "2020 -1 (январь - июнь)", полезная нагрузка отправляется на сервер (при условии, что вы используете content-type из application/x-www-form-urlencoded):

...&Period=7&...

Но ваш метод действия лечит period как пример Paid_Period вместо int:

[HttpPost]
public IActionResult Paid_Tuition (Paid_Period period) 
{
}

Как решить

измените свой метод действия, чтобы принять int periodи построить экземпляр Paid_Period в соответствии с Int период Id.