为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

C#
慕妹3242003 2022-11-22 16:43:21

我是 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; }

}

数据控制器.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:


查看.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>


查看完整描述

3 回答

?
婷婷同学_

TA贡献1576条经验 获得超8个赞

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


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>


查看完整回答
反对 回复 2022-11-22
?
郎朗坤

TA贡献1639条经验 获得超8个赞

删除行 string 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>


查看完整回答
反对 回复 2022-11-22
?
慕哥6287543

TA贡献1514条经验 获得超10个赞

尝试这个:


数据控制器:


[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);

    }

});


查看完整回答
反对 回复 2022-11-22
  • 3 回答
  • 0 关注
  • 10 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信