选择 Tag Helper 获取值和文本

Question

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

但这一次，我需要获取选择标签助手的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>

到这里为止，一切正常。但是每次选择 ID_Period 和 Period: '2020 - 1 (Jan - Jun)' 时，我都需要从视图到操作控制器的返回值。 如何做到这一点？

我只是这样准备我的行动：

[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

但 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 (Jan - Jun)”时，发送到服务器的有效负载为（假设您使用的是 content-type 或 application/x-www-form-urlencoded ）：

...&Period=7&...

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

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

如何解决

改变你的action方法接受一个int period，并根据int period Id构造一个Paid_Period的实例。