如何在 Asp.net MVC 中使用 Jquery 在 Html 输入框中绑定 JSON 数据

Question

数据：JSON 格式

当单击编辑按钮时，模态弹出窗口打开，但数据未与输入或下拉列表绑定。我正在尝试，但无法找出问题所在。

Json：

[
  {
    "Buildings": {
      "Campuses": {
        "ID": 3,
        "Campus_Name": "Dhaka"
      },
      "ID": 9,
      "Building_Name": "D",
      "CampusID": 3
    },
    "Campuses": {
      "ID": 3,
      "Campus_Name": "Dhaka"
    },
    "ID": 17,
    "Floor_Name": "1st",
    "CampusID": 3,
    "BuildingID": 9
  }
]

或

"[\r\n {\r\n \"Buildings\": {\r\n \"Campuses\": {\r\n \"ID\": 3,\r\n \"Campus_Name\": \"Dhaka\"\r\n },\r\n \"ID\": 9,\r\n \"Building_Name\": \"D\",\r\n \"CampusID\": 3\r\n },\r\n \"Campuses\": {\r\n \"ID\": 3,\r\n \"Campus_Name\": \"Dhaka\"\r\n },\r\n \"ID\": 17,\r\n \"Floor_Name\": \"1st\",\r\n \"CampusID\": 3,\r\n \"BuildingID\": 9\r\n }\r\n]"

查看：

please see the image

Jquery：

$(document).ready(function () { 
            $.getJSON("/SuperAdmin/Floor/GetAllFloorList",
                function (json) {
                    var tr;
                    for (var i = 0; i < json.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + "<a href='#' class='btn btn-success' onclick='EditFloorRecord(" + json[i].ID + ")' ><span class='fas fa-edit'></span></a> " 
                        $('table').append(tr);
                    }

                });
        });



            function EditFloorRecord(Floor_id) {
            var url = "/SuperAdmin/Floor/GetFloorInfoByFloor_Id?floor_id=" + Floor_id;
            $("#ModalTitle").html("Update Building Record");
            $("#SaveRecord").html("Update"); // Change Save message
            document.getElementById('showeditFloorID').innerHTML = '<input class="form-control" id="FloorId" name="ID" readonly ></input>'; //Floor Id Show  kora jay
            $("#AddOrUpDateModal").modal();
            $.ajax({
                type: "POST",
                url: url,
                success: function (data) {
                    response = data;
                    document.getElementById('getbyid').innerHTML = JSON.stringify(response); //Floor ID 
                    var obj = JSON.parse(data); //parse use kora hoya say Text box ar sathay Bind korar jono
                    $("#FloorId").val(obj.ID);
                    $("#Floor_Name").val(obj.Floor_Name);
                    $("#CampusID option:selected").text(obj.Campuses.Campus_Name);
                    $("#CampusID option:selected").val(obj.CampusID);


                }
            })
        }    

Answer 1

根据您的 ajax 响应，您将获得 JSON 数组作为响应。所以数组应该用索引访问。并且关键名称是建筑物。所以你应该说 obj.Buildings 来访问建筑物的属性。例如，如果您想访问建筑物的 ID，那么您应该说 Buildings.ID。因为您的 JSON 正在返回 array ，所以您应该像 response[0].Buildings.ID 一样访问您的第一个建筑物的数据。

不需要将响应转换为 JSON，像这样的 var obj = JSON.parse(data)。因为您的响应已经是 JSON 对象。您可以直接使用数据对象。

您的 JSON 响应：

[
{"Buildings":{"Campuses":{"ID":3,"Campus_Name":"Dhaka"},
"ID":9,"Building_Name":"D","CampusID":3},
"Campuses":{"ID":3,"Campus_Name":"Dhaka"},"ID":17,"Floor_Name":"1st",
"CampusID":3,"BuildingID":9}
]

您是否尝试过如下访问？这里数据是数组。您可以使用索引访问。要获取响应数组中的第一个元素，您可以执行以下操作。

data[0].Buildings.ID
data[0].Buildings.Floor_Name
data[0].Buildings.CampusID