从 Json 中选择值以添加到下拉列表
Posted
技术标签:
【中文标题】从 Json 中选择值以添加到下拉列表【英文标题】：Select values from Json to add to dropdown list 【发布时间】：2021-10-05 03:27:26 【问题描述】：我需要从基于 SQL Server 数据库创建的 JSON 中选择值，并将它们作为值选择添加到下拉列表中。我正在使用 asp.net MVC。一切似乎都在工作，除了我不知道如何从我的 Json 中选择“值”和“名称”并使用它们。我需要帮助的只是选择这些变量并在代码中使用它们。
这是我的javascript函数
$(function ()
$("#ddlDepartments").change(function ()
var selectedid = $('option:selected').val();
var ddlSubDepartments = $("#ddlSubDepartments"); //get the dropdownlist
if (selectedid > 0)
$.ajax(
url: "/RecordEntries/PopulateddlSubDepartments",
data:
id: selectedid
,
type: "Post",
dataType: "Json",
success: function (data)
alert(data);
ddlSubDepartments.html("");
ddlSubDepartments.append($('<option></option>').val("").html("Please select a Sub Department"));
for (var i = 0; i < data.length; i++)
ddlSubDepartments.append($('<option></option>').val(value[i]).html(name[i]));
,
error: function ()
alert('Failed to retrieve Sub Departments.');
);
);
);
而我的JSON是这样的，可以编辑成任何格式。
"value":5,"name":"Sub Department 1","value":8,"name":"Sub Department 2"
编辑：我将添加 jscript 在开始时调用的控制器操作。
public ActionResult PopulateddlSubDepartments(int id)
var query = from d in _context.SubDepartments
where d.DepartmentId == id
select "\"value\":" + d.SubDepartmentId + "," + "\"name\":\"" + d.SubDepartmentName + "\"";
if (query == null)
ViewBag.SubDepartments = false;
else
ViewBag.SubDepartments = true;
return Json(query.ToList());
【问题讨论】：
【参考方案1】：尝试修复操作
public ActionResult PopulateddlSubDepartments(int id)
var query = _context.SubDepartments
.Where(d=> d.DepartmentId == id)
.Select ( i=> new
Value= i.SubDepartmentId,
Name= i.SubDepartmentName
).ToList();
if (query == null)
ViewBag.SubDepartments = false;
else
ViewBag.SubDepartments = true;
return Json(query);
ajax也可以简化
ddlSubDepartments.html("");
.....
success: function (result)
var s = '<option value="-1">Please Select </option>';
for (var i = 0; i < result.length; i++)
s += '<option value="' + result[i].value + '">' + result[i].name + '</option>';
$('#ddlSubDepartments').html(s);
,
【讨论】：
"名称 d 在当前上下文中不存在。" @Three33Steele 抱歉，打错了，请使用 i.SubDepartmentId 和 i.SubDepartmentName 现在我的警报返回 [object Object],[object Object],[object Object]。这是应该的吗？它仍然没有填充 ddl。 @mohamed BEN KHOUYA 的答案效果很好，但仅适用于只有一个值的记录。 你必须使用 alert(JSON.stringify(result));我更新了我的答案，请再次检查。 工作就像一个绝对的魅力！太感谢了！这不是我的问题，因为我现在不在那个时候，但我需要制作一个读取两个下拉列表值并根据这些值选择选项的选项。我应该为此发布另一个问题吗？【参考方案2】：值[i] 不存在。试试：
ddlSubDepartments.append($('<option></option>').val(data.value[i]).html(data.name[i]));
【讨论】：
那行不通。我的下拉列表没有相应的值或文本。这一直是我的问题。我的 Json 格式是否正确？我需要使用解析吗？甚至可能分裂？ 在 PopulateddlSubDepartments 内部，var 查询的选择...只需选择 d 并将其返回为 json 如果我只是在控制器中选择 d，它会在我的警报“[object Object]”中返回。我相信我需要该 select 语句来选择这两列。【参考方案3】：您需要像这样将其反序列化为普通对象：
let obj = JSON.parse(data); // now it looks like this : value: 5, ...
ddlSubDepartments.append($('<option
</option>').val(obj['value']).html(obj['name']));
【讨论】：
这行得通！谢谢！如果你有时间，我需要我的职能再做两件事。每次运行该函数时，我都需要清除 ddlSubDepartments 选项，而且它仅适用于具有一组值的 Json。像 "value":5,"name":"SubDepartment1","value":8,"name":"SubDepartment1" 不起作用，因为有两组。 另外，从一开始就将控制器更改为 value: 5, ... 对我来说会更好吗？那么我什至不必解析它？ 你知道为什么它只适用于一个数据点的选择吗？【参考方案4】：执行以下步骤
-
添加类JsonData
public class JsonData
public string HtmlMsg get; set;
public string HtmlBody get; set;
public bool Success get; set;
2.添加ViewHelper类
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
public static class ViewHelper
public static string RenderPartialToString(this ControllerBase controller, string partialViewName, object model)
IView view = ViewEngines.Engines.FindPartialView(controller.ControllerContext, partialViewName).View;
return RenderViewToString(controller, view, model);
public static string RenderViewToString(this ControllerBase controller, IView view, object model)
using (var writer = new StringWriter())
controller.ViewData.Model = model;
var viewContext = new ViewContext(controller.ControllerContext, view, controller.ViewData, controller.TempData, writer);
view.Render(viewContext, writer);
return writer.GetStringBuilder().ToString();
3.将 PopulateddlSubDepartments 更改为：
public ActionResult PopulateddlSubDepartments(int id)
List<SubDepartment> model = (from d in _context.SubDepartments
where d.DepartmentId == id
select d).ToList();
if (query == null)
ViewBag.SubDepartments = false;
else
ViewBag.SubDepartments = true;
return Json(new JsonData()
HtmlMsg = "",
HtmlBody = this.RenderPartialToString("_DropDownList", model),
Success = true,
);
4.在您的视图中更改为
//...........................
<div class="row" id="tmpDropDownList">
@Html.Partial("_DropDownList", Model)
</div>
//...........................
5.添加部分视图_DropDownList
@model List<namescpace.SubDepartment>
@Html.DropDownList("ddlDepartments", new SelectList(Model, "SubDepartmentId", "SubDepartmentName"), "--please select--")
-
添加脚本
$(function()
$("#ddlDepartments").change(function()
var selectedid = $('option:selected').val();
if (selectedid > 0)
$.ajax(
url: "/RecordEntries/PopulateddlSubDepartments",
data:
id: selectedid
,
type: "Post",
dataType: "Json",
success: function(result)
$("#tmpDropDownList").html(result.HtmlBody);
,
error: function()
alert('Failed to retrieve Sub Departments.');
);
);
);
【讨论】：
这是一个很好的答案，也是一个很好的方法。但是，由于简单，我接受了另一个。不过非常感谢！以上是关于从 Json 中选择值以添加到下拉列表的主要内容，如果未能解决你的问题，请参考以下文章