如何将 JSON 加载到 ASP.Net MVC 中的 @Html.Helper SelectList()?
How to load JSON into @Html.Helper SelectList() in ASP.Net MVC?
长话短说,我的 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, 但它们并不是我想要的。
基于对上述问题的评论:
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));
}
所以,答案是@David 的,但我想出了如何将元素绑定到我的模型。我将视图模型与其他几个模型一起使用,因此,我需要将整个模型包含在名称字段中,如下所示:
@Html.DropDownList("RFIModel.PSC", new SelectList(" "), new { @class = "PSC-Dropdown PSC-Dropdown_Value" })
对于其他人,他们可能不需要这样做,但无论如何,new SelectList(" ")
将创建一个空的下拉元素,您可以使用@David 的代码用您的 json 填充它。
长话短说,我的 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, 但它们并不是我想要的。
基于对上述问题的评论:
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));
}
所以,答案是@David 的,但我想出了如何将元素绑定到我的模型。我将视图模型与其他几个模型一起使用,因此,我需要将整个模型包含在名称字段中,如下所示:
@Html.DropDownList("RFIModel.PSC", new SelectList(" "), new { @class = "PSC-Dropdown PSC-Dropdown_Value" })
对于其他人,他们可能不需要这样做,但无论如何,new SelectList(" ")
将创建一个空的下拉元素,您可以使用@David 的代码用您的 json 填充它。