Выберите Tag Helper, получите значение и текст - PullRequest
Новая
       39

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

0 голосов
/ 07 февраля 2019

Я только что прочитал это Выберите Tag Helper , как использовать помощник по тегам, и ранее я спрашивал о 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 всегда равен нулю.Любое предложение, чтобы решить мою проблему выше?

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

но 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 в соответствии с Id периода int.

0 голосов
/ 07 февраля 2019

Вам нужен еще один помощник тега (например, скрытое поле), связанный со свойством string вашей модели представления, чтобы передать текстовую опцию из выбранного значения вместе с самим элементом <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();
});

Примечание:

Рекомендуется инициировать отправку формы с помощью кнопки, а не change элемента *1020*.

...