选择标记助手获取的值和文本

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和时间：“2020 - 1（一月至 - 6月）”。这个怎么做？

我刚准备像这样我的行动：

[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总是空。

这是因为your're发布一个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) 
{
}

怎么解决

改变你的操作方法接受一个int period，并根据INT时间ID构建Paid_Period的一个实例。