检索数据aspnetcore中的未定义对象

时间:2018-08-13 12:57:13

标签: asp.net-core asp.net-ajax

我无法将json中的记录绑定到我的     脚本在我看来,但我从console.log获取数据。你是否可以     请帮助我,我想念什么?这是我的代码...

public JsonResult GetListOfQuestions()
        {
            List<Question> QuesList = _context.Question.ToList();
            return Json(QuesList);
        }


<div id="SetQuestionsList">
        <div id="LoadingStatus">

        </div>
</div>

<script>
    $("#LoadingStatus").html("Loading....");
    $.get("/Questions/GetListOfQuestions", null, DataBind);
    function DataBind(QuesList) {
        var SetData = $("#SetQuestionsList");
        console.log(QuesList);
        for (var i = 0; i < QuesList.length; i++) {
            var aa = i + 1
            var Data =
                "<div class='row_{" + QuesList.QuestionId + "}'>" +
                    "<div class='panel panel-primary'>" +
                        "<div class='panel-heading'>" +
                            "<div class='row'>" +
                                "<div class='col-lg-10'>" +
                                    "<p>Question " + aa + "</p>" +
                                "</div>" +
                                "<div class='col-lg-1'>" +
                                    "<a href='#' class='btn btn-warning' onclick='EditQuestion({" + QuesList.QuestionId + "})'>" +
                                        "<span class='glyphicon glyphicon-edit'></span>Update" +
                                    "</a>" +
                                "</div>" +
                                "<div class='col-lg-1'>" +
                                    "<a href='#' class='btn btn-danger' onclick='DeleteQuestionRecord({" + QuesList.QuestionId + "})'>" +
                                        "<span class='glyphicon glyphicon-trash'></span>Delete" +
                                    "</a>" +
                                "</div>" +
                            "</div>" +
                        "</div>" +

                        "<div class='panel-body'>" +
                            "<div class='row'>" +
                                "<div class='col-lg-12'>" +
                                    "<div class='form-group'>" +
                                        "<b>Description</b><br />" +
                                        "<p>" + QuesList.QuestionText + "</p>" +
                                    "</div>" +
                                "</div>" +
                            "</div>" +
                        "</div>" +
                    "</div>" +
                "</div>";
            SetData.append(Data);
            $("#LoadingStatus").html(" ");
        }
    }
</script>

2 个答案:

答案 0 :(得分:0)

假设您使用的是jQuery> = 1.5版本,以下内容应有助于您确定发生了什么。当前使用ajax速记版本编写脚本的方式,如果调用中有错误,jquery将静默失败。这样,您可以选择在执行呼叫期间处理错误,并在浏览器开发控制台中查看错误,以帮助您调试问题。

更新我添加了一个jsfiddle以便您更好地理解,以免解释不充分(以后您应该提供jsfiddle)

此外,请参见以下json,我假设您的数据类似于https://api.myjson.com/bins/1fryq4。您必须考虑从后端转换为json的数据结构。

  function getQuestions(){
     $("#LoadingStatus").show();

     $.get("https://api.myjson.com/bins/1fryq4")
       .done(function( data ) {
        //call you binding function
        DataBind(data);
        })
       .fail( function(err){
         //handle the error in the UI, alert the user something went wrong, recover form the error
         alert("GetListOfQuestions error!");
         //chrome: display object in js console
         console.dir(err);
        })
       .always(function() {
         //hide loading spinner
         $("#LoadingStatus").hide();
       });
  }

Databind js函数(已缩短,请参见jsfiddle)

  function DataBind(QuesList) {
     var aa = 0;
     var QuestionList = $("#SetQuestionsList");

     //if you need to convert json to a js object use the builtin parser
     //Example: var data = JSON.parse(QuesList);

     //TODO good practice to check if valid list before trying to iterate the array

    //pay attention to your incoming object
    QuesList.questions.forEach(function(item){
         aa++;
         var question =
            "<div class='row_{" + item.questionId + "}'>" +
            "<div class='panel panel-primary'>" +
            "<div class='panel-heading'>" +
           "<div class='row'>" +
            "<div class='col-lg-10'>" +
           "<p>Question " + aa + "</p>" +
           "</div>" +
           "<div class='col-lg-1'>" +
           "<a href='#' class='btn btn-warning' onclick='EditQuestion({" + item.questionId + "})'>" +
           "<span class='glyphicon glyphicon-edit'></span>Update" +
           "</a>" +
           "</div>" +
          "<div class='col-lg-1'>" +
          "<a href='#' class='btn btn-danger' onclick='DeleteQuestionRecord({" + item.questionId + "})'>" +
          "<span class='glyphicon glyphicon-trash'></span>Delete" +
          "</a>" +
         "</div>" +
        "</div>" +
         "</div>" +
        ...
        "<b>Description</b><br />" +
         "<p>" + item.questionDescription + "</p>" +
         "</div>" +
         ...
         "</div>";

         QuestionList.append(question);
      });
  }

答案 1 :(得分:0)

<script type="text/javascript">
        function getQuestions() {
            $("#LoadingStatus").show();

            $.get("/Questions/GetListOfQuestions")
                .done(function (data) {
                    //call you binding function
                    console.log(data)
                    DataBind(data);
                })
                .fail(function (err) {
                    //handle the error in the UI, alert the user something went wrong, recover form the error
                    alert("GetListOfQuestions error!");
                    //chrome: display object in js console
                    console.dir(err);
                })
                .always(function () {
                    //hide loading spinner
                    $("#LoadingStatus").hide();
                });
        }

        function DataBind(QuesList) {
            var aa = 0;
            var QuestionList = $("#SetQuestionsList");
            console.log(QuesList);
            //if you need to convert json to a js object use the builtin parser
            //Example: var data = JSON.parse(QuesList);

            //TODO good practice to check if valid list before trying to iterate the array

            //pay attention to your incoming object
            QuesList.questions.forEach(function (item) {
                aa++;
                var question =
                    "<div class='row_{" + item.QuestionId + "}'>" +
                    "<div class='panel panel-primary'>" +
                    "<div class='panel-heading'>" +
                    "<div class='row'>" +
                    "<div class='col-lg-10'>" +
                    "<p>Question " + aa + "</p>" +
                    "</div>" +
                    "<div class='col-lg-1'>" +
                    "<a href='#' class='btn btn-warning' onclick='EditQuestion({" + item.QuestionId + "})'>" +
                    "<span class='glyphicon glyphicon-edit'></span>Update" +
                    "</a>" +
                    "</div>" +
                    "<div class='col-lg-1'>" +
                    "<a href='#' class='btn btn-danger' onclick='DeleteQuestionRecord({" + item.QuestionId + "})'>" +
                    "<span class='glyphicon glyphicon-trash'></span>Delete" +
                    "</a>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "<div class='panel-body'>" +
                    "<div class='row'>" +
                    "<div class='col-md-6'>" +
                    "<div class='form-group'>" +
                    "<b>Question Type</b><br />" +
                    "<text>" + item.QuestionTypeName + "</text>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "<div class='row'>" +
                    "<div class='col-lg-12'>" +
                    "<div class='form-group'>" +
                    "<b>Description</b><br />" +
                    "<p>" + item.QuestionDescription + "</p>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>";

                QuestionList.append(question);
            });
        }
</script>