从Controller获取JSON数据到View中的Dropdown答案

【问题标题】：Get JSON data from Controller to Dropdown in View从Controller获取JSON数据到View中的Dropdown
【发布时间】：2019-08-24 23:22:13
【问题描述】：

我是 MVC 新手，不知道如何解决这个问题。

在控制器中，我有一个序列化为 JSON 的列表（填充有 Api 数据），我需要使用此 JSON 数据在视图中填充下拉列表。

我很困惑我应该从控制器返回什么，接下来我应该做什么，我这样做对吗？

现在我有这个：

型号：

public class Tablet {        
    public int Id { get; set; }
    public string ManufactureDate { get; set; }
    public string Description { get; set; }
    public string Country { get; set; }
}

DataController.cs

 Public ActionResult GetData(Tablet tablet)
 {
     List<Tablet> data = new List<Tablet>();

      // ... Code to retrieve the data from API

     string jsonRes = JsonConvert.SerializeObject(data);

     return View(jsonRes);
 }

在视图中，我需要在下拉列表中显示 ID：

View.cshtml

<select class="dropdown" id="dropdownData"></select>

<script>
$(document).ready(function () {
    $.ajax({
        url: "/Data/GetData/",
        type: 'GET',
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id+ '">' + '</option>';
            }
            $("#dropdownData").html(s);
        }
    });
});  
</script>

【问题讨论】：

您是否在序列化之前填充了您的List<Tablet> data？
是的，列表中填充了序列化之前的API数据。它也在控制台中将数据显示为 json 对象。所以，对我来说，问题是将这个 json 传递给 View。
更改s += ''; to s += '';你只是在分配价值。但是没有显示。请根据我提供的代码更改此设置。另外，请确保您在列表中填写了值。
请查看此链接：stackoverflow.com/questions/30084568/… 它非常接近您的问题。
@JyothishBhaskaran 我这样做了，它在下拉列表中返回“未定义”。

标签： c# json model-view-controller dropdown

【解决方案1】：

试试这个，你正在设置值，你没有为选项标签设置文本，你必须得到空白菜单项。已经使用你的数据链接和代码对其进行了测试。

s += '<option value="' + jsonRes[i].Id+ '">'+jsonRes[i].Id + '</option>';

完整的 HTML：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<select class="dropdown" id="dropdownData"></select>

<script>
$(document).ready(function () {
    $.ajax({
        url: "https://api.myjson.com/bins/6jd1s",
        type: 'GET',
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id+ '">'+jsonRes[i].Id + '</option>';
            }
             $("#dropdownData").html(s);
        }
    });
});  
</script>
</body>
</html>

【讨论】：

这很好用，谢谢！但问题是我需要从控制器中的 json 中获取这些数据，而不是从 URL :)
您获取的数据格式是否与您的数据链接相同？尝试从数据链路和控制器记录（在控制台中）数据，它们是否相同？
我没有从控制器得到任何东西，而来自数据链路的数据是应该的。我认为我在控制器中没有做正确的事情..
return Json(data, JsonRequestBehavior.AllowGet);
试试上面马里奥的回答，而不是使用字符串 jsonRes = JsonConvert.SerializeObject(data);你也可以使用 return Json(data, JsonRequestBehavior.AllowGet);

【解决方案2】：

试试这个：

数据控制器：

[HttpGet]
public JsonResult GetData()
{
    List<Tablet> data = new List<Tablet>();

    // ... Code to retrieve the data from your API

    string jsonRes = JsonConvert.SerializeObject(data);

    return new JsonResult(jsonRes);
}

在你的 JavaScript 中：

 $.ajax({
        url: "/Data/GetData/",
        type: "GET",
        dataType: "json",
        cache: false,
        success: function (data) {
            try {
                var parsedData = JSON.parse(data);

                var $select = $('#dropdownData');
                $.each(parsedData, function(i, dataItem) {
                    $('<option>', {
                        value: dataItem.Id
                    }).html(dataItem.Id).appendTo($select);  // or dataItem.Description, or whatever field you want to display to the user
                });
            }
            catch (err) {
                console.log(err);
            }
        }
    },
    error: function (e) {
        console.log(e);
    }
});

【讨论】：

在我的控制器中'return new JsonResult(jsonRes)';它抛出以下错误“'JsonResult' 不包含带 1 个参数的构造函数”

【解决方案3】：

删除行字符串 jsonRes = JsonConvert.SerializeObject(data);

您的方法 GetdData() 也应该返回 JSON。检查以下代码。

public ActionResult GetData(Tablet tablet)
    {
        List<Tablet> data = new List<Tablet>();

        data.Add(new Tablet() { Id = 1, Country = "India", Description = "Test", ManufactureDate = DateTime.UtcNow.ToShortDateString() });
        data.Add(new Tablet() { Id = 1, Country = "Canada", Description = "Test1", ManufactureDate = DateTime.UtcNow.ToShortDateString() });

        //string jsonRes = JsonConvert.SerializeObject(data);

        return Json(data,JsonRequestBehavior.AllowGet);
    }

视图应该是这样的

<select class="dropdown" id="dropdownData"></select>
<script>
$(document).ready(function () {
    $.ajax({
        url: "/Home/GetData/",
        type: 'GET',
        dataType: "json",
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id + '">' + jsonRes[i].Id+ '</option>';
            }
            $("#dropdownData").html(s);
        }
    });
});
</script>

【讨论】：