我无法将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>
答案 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();
});
}
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>