Select 标签助手获取值和文本

Question

我刚读了 , how to use tag helper and previously I asked about 的 select 标签助手。

但是这次，我需要获取 select 标签助手的 text。这是我的模型：

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>

到目前为止，一切正常。但是每次 selected 是 ID_Period 和 Period: '2020 - 1 (Jan - Jun) 时，我都需要从视图到动作控制器的 return 值'. 如何做到这一点？

我就是这样准备动作的：

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

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

Answer 1

您需要绑定到视图模型的 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" />

然后您可以使用绑定到 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 事件。

Answer 2

but Paid_Period is always null.

那是因为您正在发布一个 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>

当您 select“2020 -1（1 月 - 6 月）”时，发送到服务器的负载是（假设您使用的是 application/x-www-form-urlencoded 的 content-type）：

...&Period=7&...

但是您的操作方法将 period 视为 Paid_Period 的实例而不是 int :

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

如何解决

更改您的操作方法以接受一个 int period，并根据 int period Id 构造一个 Paid_Period 的实例。

Select 标签助手获取值和文本

Select Tag Helper get value and text

c#

asp.net-core

asp.net-core-mvc

tag-helpers