c# - 选择 Tag Helper 获取值和文本

Question

我刚刚读过这篇文章Select Tag Helper ，如何使用标签助手，之前我问过 onchange 用于选择标签助手。

但这一次，我需要获取选择标签助手的文本。 这是我的模型:

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 (Jan - Jun)' 时，我都需要从 View 到操作 Controller 的返回值。 如何做到这一点？

我只是像这样准备我的行动:

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

但 Paid_Period 始终为空。 有什么建议可以解决我的上述问题吗？

Answer 1

您需要另一个绑定(bind)到 string 的标签助手(例如隐藏字段) View 模型的属性，用于将所选值中的文本选项与 <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" />

然后您可以使用绑定(bind)到 onchange 的 JS 函数检索选定的文本选项事件:

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事件。