如何将 JSON 加载到 ASP.Net MVC 中的 @Html.Helper SelectList()？

Question

长话短说，我的 ASP.Net MVC 网络应用程序的单个页面上有大约 73 个 select 列表元素，全部由 html 助手制作。它们的内容在 json 文件中，所以我用打字稿填充这些 select 列表。但是，如果我这样做，selected 选项永远不会保存为元素的值。

我找到了一个解决方法，就是将模型绑定到一个隐藏元素，将监听器添加到 select 列表元素，并将 selected 选项指定为隐藏元素的值.

结果如下：

 @Html.HiddenFor(x => x.RFIModel.PSC, new { id = "PSC-Dropdown_Value" })

 @Html.DropDownList("PSC", new SelectList(" "), new { @class = "PSC-Dropdown PSC-Dropdown_Value" })
 @Html.ValidationMessageFor(x => x.RFIModel.PSC, "", new { @class = "text-danger" })
 @Html.LabelFor(x => x.RFIModel.PSC)

这是有效的，但同样，这是一种变通方法，当您在一个页面上有 72 个不同的元素时，它会很烦人。我发现我在 SelectList() 中手动定义了 json，select 列表本身获得了 selected 值，这太棒了，但我真的想保留我的 json 和我的 html.

分开了

@Html.DropDownList("PSC", new SelectList("[
        { "ID": "001", "Name": "Eurasian Collared-Dove" },
        { "ID": "002", "Name": "Bald Eagle" },
        { "ID": "003", "Name": "Cooper's Hawk" },
    ]"), new { @class = "PSC-Dropdown PSC-Dropdown_Value" })

考虑到这一点，我不能只将 json 加载到 SelectList() 中吗？

I found a few examples here, 但它们并不是我想要的。

Answer 1

基于对上述问题的评论：

It will be client side.

然后大概在您的 JavaScript 代码中的某处您将引用您的 JSON 数据。这是否以 object/array 文字、AJAX 调用等形式并不重要。在某些时候，您会有一个包含您的数据的变量。

在这种情况下，JSON Data example from the link you provided 就是您要查找的内容。具体看它是如何填充<select>元素的：

$(result).each(function() {  
    $("#FromJson").append($("<option></option>").val(this.ID).html(this.Name));  
});

在这种情况下，result 是包含 JSON 数据（数组）的变量，而 $('#FromJson') 是 jQuery 选择器，用于识别 <select> 元素。（您的可能类似于 $('#PSC') 或 $('#PSC-Dropdown')，具体取决于您的 HTML 以及您如何具体识别该元素。）

基本上您的服务器端代码会呈现一个空列表：

@Html.DropDownList("PSC", new SelectList(), new { @class = "PSC-Dropdown PSC-Dropdown_Value" })

然后在您的客户端代码中，您将从 JSON 数据中填充值。您提供的 link 上的示例使用 jQuery 的 $().each()，尽管一个简单的循环也可以解决问题：

for (let item of result) {
    $('#PSC').append($('<option/>').val(item.ID).html(item.Name));
}

Answer 2

所以，答案是@David 的，但我想出了如何将元素绑定到我的模型。我将视图模型与其他几个模型一起使用，因此，我需要将整个模型包含在名称字段中，如下所示：

 @Html.DropDownList("RFIModel.PSC", new SelectList(" "), new { @class = "PSC-Dropdown PSC-Dropdown_Value" })

对于其他人，他们可能不需要这样做，但无论如何，new SelectList(" ") 将创建一个空的下拉元素，您可以使用@David 的代码用您的 json 填充它。

如何将 JSON 加载到 ASP.Net MVC 中的 @Html.Helper SelectList()？

How to load JSON into @Html.Helper SelectList() in ASP.Net MVC?

asp.net

json

model-view-controller

html-helper