在 ASP Razor 视图中未调用 Jquery 函数

Question

我是 MVC 世界的新手，我正在尝试通过调用控制器操作方法进行 ajax 调用以从数据库中获取 json 数据，每次我运行应用程序时，数据都会在视图上显示为原始 JSON 数据，而不是根据我的 jquery 代码渲染。你能帮我指导一下我在这里做错了什么吗？

My Controller:

[HttpGet]
[ActionName("Question")]
public ActionResult GetQuestionPost()
{
    QuestionDefViewModel quesDef = new QuestionDefViewModel();
    OnlineExamEntities db = new OnlineExamEntities();
    quesDef.questionText = db.Questions.Where(z => z.questionId == 1000).Select(z => z.questionText).SingleOrDefault();

    var query = (from p in db.Choices
                 where p.questionId == 1000
                 select new
                 {
                     choiceId = p.choiceId,
                     choiceText = p.choiceText,
                     isCorrect = p.isCorrect
                 }).ToList();

    quesDef.Choices = query.Select(x => new Choice
    {
        choiceId = x.choiceId,
        choiceText = x.choiceText,
        isCorrect = x.isCorrect
    }).ToList();
    return Json(quesDef, JsonRequestBehavior.AllowGet);
}

我的观点：

@model ExamPortal.ViewModels.QuestionDefViewModel
....
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        debugger;
        alert("hi");
        function question() {
            $.ajax({
                url: '/Home/Question',
                type: 'Post',
                cache: false,
                dataType: 'json',
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                success: function (json) {
                    question = json;
                    renderQuestion(json);
                }
            });
        }

        function renderQuestion(q) {
            $('.questionText').html(q.questionText);
            for (var i = 0; i < q.Choices.length; i++) {
                $('.alternatives').append('<input id="alt' + q.Choices[i].Id + '" name="alternatives" type= radio"' + ' />' + q.Choices[i].Id + '. ' + q.Choices[i].Text + '<br />');
            }
        }
    })
</script>

<div>
    <h4>QuestionDefViewModel</h4>
    <hr />
    <div class="questionText"></div>
    <div class="alternatives"></div>
</div>




</body>
</html>

我正在显示如下输出，而没有按照 jquery 函数中的描述进行渲染。

{"questionId":0,"questionText":"This is the first question","Choices":[{"choiceId":6000,"questionId":0,"choiceText":"Option A","isCorrect":"Yes       ","Exams":[],"Question":null},{"choiceId":6001,"questionId":0,"choiceText":"Option B","isCorrect":"No        ","Exams":[],"Question":null},{"choiceId":6002,"questionId":0,"choiceText":"Option C","isCorrect":"No        ","Exams":[],"Question":null},{"choiceId":6003,"questionId":0,"choiceText":"Option D","isCorrect":"No        ","Exams":[],"Question":null}]}

Answer 1

根据 Action Method 的动词，Ajax 请求类型应该是 GET 而不是 POST。

另外，q.Choices[i] 应该是 choiceId 和 choiceText，因为它们是 Choice实体的属性名称。

为了调试，让我们先从服务器返回静态数据，然后再从数据库查询。否则，你将不知道错误在哪里。

查看

<script type="text/javascript">
    $(function() {
        debugger;
        alert("hi");

        function question() {
            $.ajax({
                url: '/Home/Question',
                type: 'GET',
                cache: false,
                dataType: 'json',
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                success: function(json) {
                    question = json;
                    renderQuestion(json);
                }
            });
        }

        function renderQuestion(q) {
            $('.questionText').html(q.questionText);
            for (var i = 0; i < q.Choices.length; i++) {
                $('.alternatives').append('<input id="alt' + q.Choices[i].choiceId +
                    '" name="alternatives" type= radio" />' +
                    q.Choices[i].choiceId + '. ' + q.Choices[i].choiceText + '<br />');
            }
        }

        question();
    });
</script>

<div>
    <h4>QuestionDefViewModel</h4>
    <hr />
    <div class="questionText"></div>
    <div class="alternatives"></div>
</div>

控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.Title = "Home Page";

        return View();
    }

    [HttpGet]
    [ActionName("Question")]
    public ActionResult GetQuestionPost()
    {
        QuestionDefViewModel quesDef = new QuestionDefViewModel();
        quesDef.questionText = "Sample Question";
        quesDef.Choices = new List<Choice>
        {
            new Choice { choiceId = 1, choiceText = "One", isCorrect = true},
            new Choice { choiceId = 2, choiceText = "Two", isCorrect = false},
            new Choice { choiceId = 3, choiceText = "Three", isCorrect = true},
        };
        return Json(quesDef, JsonRequestBehavior.AllowGet);
    }
}

其他类

public class Question
{
    public int questionId { get; set; }   
    public string questionText { get; set; }   
}

public class Choice
{
    public int choiceId { get; set; }
    public string choiceText { get; set; }
    public bool isCorrect { get; set; }
    public int questionId { get; set; }
}