Question

我需要知道下面的代码中是什么导致我的onClick AJAX事件在页面加载时命中服务器而不是等待在客户端点击按钮。如果有更好的方法来做我想做的事情，我也愿意接受。我正在使用ASP.NET MVC和KendoUI控件。

这是我的视图文件，包含代码细分

@using Kendo.Mvc.UI
@model GravanaWebUI.Models.Lessons.LessonPracticeViewModel

<script>
    $(document).ready(function() {
        $("#nextQuestion").hide();
        $("#nextQuestion").removeClass("hidden");


    });


    $(document).on("click","#nextQuestion", function(e) {

        var id = @Model.ActiveLessonId;
        var url = '@Html.Action("GetNextPracticeQuestion", "Lesson")';
        $.ajax({
            type: "POST",
            url: url,
            data: {activeLessonId : id },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });
        e.preventDefault();
        function successFunc(data) {     
            alert(data);
        }

        function errorFunc() {
            alert('error');
        }
    });



</script>

<style>
    .k-grid .k-header {
        display: none;
    }

    div.hidden {
        display: none;
    }
</style>


<hr />

<div class="row">
    <div class="col-md-4 col-md-offset-5">
        <p><strong>@Model.QuestionText</strong></p>
    </div>
</div>
<hr />

<div class="demo-section">

    @(Html.Kendo().Grid(Model.Answers)
        .Name("answers")

        .Columns(columns =>
        {
            columns.Bound(o => o.AnswerChoiceChar).Width(10);
            columns.Bound(o => o.AnswerText).Width(200);
        })
        // .Pageable(pageable => pageable.ButtonCount(5))
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple))
        .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
            // .PageSize(5)
            .Read(read => read.Action("Orders_Read", "Grid"))
         )
    )
</div>
<hr />
<div class="row">
    <div class="col-md-4">
        <button class="k-button" onclick="submit()">Submit</button>
    </div>
    <div class="col-md-3">
        <div id="Result"></div>
    </div>
    <div class="col-md-3">
        <button id="nextQuestion" class="k-button hidden" >Next Question</button>
    </div>

</div>

<hr />
<script>
            function submit() {
                var grid = $('#answers').data('kendoGrid');
                var selectedItem = grid.dataItem(grid.select());

                if (@Model.CorrectAnswerId !== selectedItem.Id) {
                    $("#nextQuestion").hide();
                    var WrongString = "<p style='color: red'><strong>The Answer of " + selectedItem.AnswerText + " is incorrect. Please try again!</strong><p>";

                    $("#Result").html(WrongString);

                } else {
                    var rightString = "<p style='color: green'><strong>The Answer of " + selectedItem.AnswerText + " is correct. Nice Work!</strong><p>";

                    $("#Result").html(rightString);

                    $("#nextQuestion").show();
                }


            }


</script>

这是服务器端方法不断加载

public ActionResult GetNextPracticeQuestion(int activeLessonId)
{
    var viewModel = new LessonPracticeViewModel();

    return PartialView("LessonPracticeQuestionPartial", viewModel);
}

任何帮助都会非常棒，谢谢！

修改

根据下面的评论，这里是包含上述观点的视图。

@model GravanaWebUI.Models.Lessons.LessonPracticeViewModel 
@{ ViewBag.Title = "Lesson - Practice"; } 
<h2>Practice</h2> 
<div id="QuestionDisplay"> @Html.Partial("LessonPracticeQuestionPartial", Model) </div> 
<div class="row"> <div class="col-md-4"> @Html.ActionLink("Next", "LessonPracticeComplete", "Lesson", new {activeLessonId = Model.ActiveLessonId}, htmlAttributes: new {@class = "k-button"} ) 
</div> </div>

Answer 1

在对问题发表评论的帮助下，我通过评论代码发现了问题，并发现了HTML帮助程序的使用缺陷。

我有

@Html.Action("GetNextPracticeQuestion", "Lesson");

作为获取Ajax调用的URL的方式，但我本来应该使用

@Url.Action("GetNextPracticeQuestion", "Lesson");

动作调用是调用而不是AJAX调用。令人惊讶的是服务器端方法有一个paramiter并且上面有Action调用。我想你必须指定它或者它无论如何都找不到方法，但必须是ASP.NET管道中的东西并且是丰满的。

非常感谢@Sushil获得帮助。

JQuery onClick AJAX事件是在页面加载而不是onClick上进行的

1 个答案: