如何将选项列表传递给后端

格里高里·扎科(Grigory Zhadko)

我在剃须刀页面上有项目列表,用户可以在前端使用javascript更新这些页面:

<select asp-for="Answers" asp-items="Model.Answers" multiple="multiple"></select>

我也有此列表的bind属性:

[BindProperty]
public List<SelectListItem> Answers { get; set; } = new List<SelectListItem> { new SelectListItem("Test1", "Test1") };

当我在页面加载时传递数据时,绑定工作正常,但提交表单时列表为空。

这是按下“提交”按钮之前的HTML代码:

<select id="answersList" multiple="multiple" data-val="true" name="Answers">
   <option value="Test1">Test1</option>
   <option value="Test2">Test2</option>
   <option value="Test3">Test3</option>
</select>

和IDE的屏幕截图: 在此处输入图片说明

如您所见,代码中的列表为空。如何传递用户添加到后端的项目?

其他绑定属性具有正确的数据。因此,问题仅在此列表上。

Fei Han

如果捕获请求并检查您在浏览器F12开发人员工具“网络”选项卡中发布的实际数据,您将发现它如下所示。

在此处输入图片说明

不能绑定到List<SelectListItem>type属性Answers

如何传递用户添加到后端的项目?

为了满足您的要求,您可以尝试修改如下代码。

在PageModel类中定义List<string>类型属性SelectedAnswers

public List<SelectListItem> Answers { get; set; } = new List<SelectListItem> { new SelectListItem("Test1", "Test1") };
[BindProperty]
public List<string> SelectedAnswers { get; set; }

使用更新更新标签助手 asp-for="SelectedAnswers"

<form method="post">
    <select asp-for="SelectedAnswers" asp-items="Model.Answers" multiple="multiple"></select>
    <input type="submit" value="Submit" />
</form>

测试结果

在此处输入图片说明

更新:

我没有从选择列表中选择任何选项,因此没有任何项目。但是,我不想让用户选择选项。我想发布所有这些。有没有一种简单的方法,还是应该在提交之前使用JavaScript代码选择所有项目?

您可以在将新的SelectListItem添加到时尝试将所有SelectListItem设置为默认选中List<SelectListItem> Answers,如下所示。

//...
Answers.Add(new SelectListItem("Test2", "Test2", true));
Answers.Add(new SelectListItem("Test3", "Test3", true));
//...

此外,正如您提到的,在提交表单之前,还可以实现使用JavaScript将所有项目/选项设置为选中状态。

$("form").first().submit(function () {
    $('#myList option').prop('selected', true);
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章