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）'，我都需要从视图到操作控制器的返回值。该怎么做？

我只是准备这样的动作：

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

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

Answer 1

您需要绑定到viewmodel的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始终为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>

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

...&Period=7&...

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

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

如何解决

将操作方法更改为接受一个整数period，并根据整数周期ID构造一个Paid_Period的实例。

选择Tag Helper获取值和文本

2 个答案: