从 Json 中选择值以添加到下拉列表

Question

我需要从基于 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());
        }

Answer 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);
},

Answer 2

值[i] 不存在。试试：

ddlSubDepartments.append($('<option></option>').val(data.value[i]).html(data.name[i]));

Answer 3

您需要像这样将其反序列化为普通对象：

let obj = JSON.parse(data); // now it looks like this : {value: 5, ...}
ddlSubDepartments.append($('<option
</option>').val(obj['value']).html(obj['name']));

Answer 4

执行以下步骤

1. 添加类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--")

6. 添加脚本

$(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.');
        }
      });
    }
  });
});