选择 Tag Helper 获取值和文本

Posted 2023-03-30

【中文标题】选择 Tag Helper 获取值和文本

【英文标题】：Select Tag Helper get value and text

【发布时间】：2019-02-07 02:24:56

【问题描述】：

我刚读到这个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 始终为空。 有什么建议可以解决我上面的问题吗？

【问题讨论】：

but Paid_Period is always null. -告诉我你已经尝试过的javascript代码。

为什么在更改选定值后将onchange="this.form.submit()" 提交表单？您需要将选定的文本值存储在隐藏字段中，并改用select asp-for="ID_Period"。

@TanvirArjel，我不使用任何 javascript。

@Daleman Paid_Tuition (Paid_Period period) 是您表单的发布方法吗？

select asp-for="Period" 从一开始似乎就错了。您应该使用 ID 属性来保存整数值，例如select asp-for="ID_Period" 并从选定的值中获取选定的选项文本，然后提交表单。

【参考方案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事件来触发表单提交。

【讨论】：

我明白你的意思。通过为 textvalue 添加隐藏元素并触发“更改”以使用 javascript 处理，然后提交表单。

【参考方案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的实例。

【讨论】：

怎么做？我的意思是我需要文本 (2020 -1 (Jan - Jun)) 而不是索引。

@Daleman 由于您已经通过asp-items="@(new SelectList (@ViewBag.Period, "ID_Period", "Period"))" 构建了一个选择列表，因此必须有一个周期列表。我们称之为Periods。要将 ID_Period 的 int 转换为 Paid__Period，只需调用 Periods.Where(p => p.ID_Period).FirstOrDefault()。

@Daleman 或者如果您想接受 Paid_Period 类型的参数，您可以创建自定义模型绑定器以将 int 强制转换为该类型的实例。