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

Question

资料来源: JSON Formate

当点击编辑按钮，然后Modal弹出弹出，但数据不是绑定输入或下拉。我正在努力，但找不出问题出在哪里。

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]"

视图：

请看图片

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作为响应。因此，应该使用索引访问数组。还有一个关键的名字是Buildings。所以你应该说obj.Buildings来访问建筑物的属性。例如，如果您想访问建筑物的ID，那么您应该说Buildings.ID，因为您的JSON正在返回数组，所以您应该像response.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