为什么我的 Jquery Ajax 调用不起作用？(Asp.net MVC C#)

Question

我的目标是使用 ajax 从我的控制器中检索一些数据并将其附加到我视图中的 table 元素。然而，javascript 代码仅在“$.ajax(”之前有效，此时它才停止。我在上述点之后放置了一些断点，但代码从未在这些点处 "broke" .

这是javascript代码

$(document).ready(function ()
{
    $("#DivisionId").change(function () {
        var OptionId = $('#DivisionId').val();
        var position = 0;
        $.ajax(
            {
                type: 'POST',
                url: '@URL.Action("Division")',
                dataType: 'json',
                data: { DivisionId: OptionId },
                success: function (data) {
                    var LogStandings = '';
                    $.each(data, function (i, log) {
                        position++;
                        var Logs = "<tr>" +
                            "<td>" + position + "</td>" +
                            "<td>" + log.Logs1.Team.TeamName + "</td>" +
                            "<td>" + log.Logs1.Played + "</td>" +
                            "<td>" + log.Logs1.Win + "</td>" +
                            "<td>" + log.Logs1.Draw + "</td>" +
                            "<td>" + log.Logs1.Lost + "</td>" +
                            "<td>" + log.Logs1.GoalsFor + "</td>" +
                            "<td>" + log.Logs1.GoalsAgainst + "</td>" +
                            "<td>" + log.Logs1.GoalDifference + "</td>" +
                            "<td>" + log.Logs1.Points + "</td>" +
                            "</tr>";
                        $('#TheLog').append(Logs);
                    });

                },
                error: function (ex) {
                    var r = jQuery.parseJSON(response.responseText);
                    alert("Message: " + r.Message);
                    alert("StackTrace: " + r.StackTrace);
                    alert("ExceptionType: " + r.ExceptionType);
                }
            });
        return false;

    }); // end of Division on change function

})//End of document.ready function

这是我控制器中的代码

        public JsonResult Division(int DivisionId)
        {
            int UnderId = db.Under.FirstOrDefault().UnderID;
            MainDivisionId = id;


            List<FixtureModel> Fixtures = db.Fixtures.Where(f => f.TeamModel.DivisionId == id && f.TeamModel.UnderId == UnderId).ToList();
            List<ResultModel> Results = db.Results.Where(r => r.Fixtures.TeamModel.DivisionId == id && r.Fixtures.TeamModel.UnderId == UnderId).ToList();
            List<LogModel> Logs = db.Logs.Where(l => l.Team.DivisionId == id && l.Team.UnderId == UnderId).ToList();

            IndexViewModel IndexPage = new IndexViewModel(Fixtures, Results, Logs);

            return Json(IndexPage , JsonRequestBehavior.AllowGet);
        }

我在互联网上搜索了一下，一位消息人士建议我将我的 jquery CDN 放在我视图顶部的 head 标签内，但这并没有解决我的问题。除此之外，经过一个小时的搜索，我还没有找到任何其他解决方案。

Answer 1

我可以看到您有 2 个问题。

首先，您要向没有 [HttpPost] 注释的控制器操作发出 POST 请求。在我看来，你是 getting/selecting 数据，GET 请求会更合适，所以我在下面的示例中使用了它。

其次，你不能在 javascript 字符串中使用 @URL.Action("Division")（或者通常在 javascript 中。如果你真的需要，那么你可以将一些数据存储在隐藏的 div 并使用 javascript/jquery) 获取值，就像您尝试做的那样。在脚本本身上，这将在您直接向 localhost:12345/@URL.Action("Division") 发出请求时呈现，这不是有效路径。请参阅以下示例：

脚本：

$(document).ready(function () {
    $("#testButton").on("click", function () {
        var OptionId = 1;

        $.ajax(
            {
                type: 'GET',
                //this url assumes your controller action is in HomeController.cs
                url: '/Home/Division/' + OptionId,
                dataType: 'json',
                data: { DivisionId: OptionId },
                success: function (data) {
                    alert("success");

                },
                error: function (ex) {
                    var r = jQuery.parseJSON(response.responseText);
                    alert("Message: " + r.Message);
                    alert("StackTrace: " + r.StackTrace);
                    alert("ExceptionType: " + r.ExceptionType);
                }
            });
    });
});

HomeController.cs 动作：

public JsonResult Division(int DivisionId)
{
    return Json(1, JsonRequestBehavior.AllowGet);
}

在我看来要进行测试：

<button type="button" id="testButton" class="btn btn-primary btn-lg">TEST BUTTON</button>

以上测试按预期工作（从控制器操作接收 DivisionID 参数、returns 数据并向客户端发出成功警报）。通过上面概述的更改，当您指定有效路径并发出适当的请求类型时，您的控制器操作中的断点将被命中。希望这会有所帮助。

为什么我的 Jquery Ajax 调用不起作用？(Asp.net MVC C#)

Why is my Jquery Ajax call not working?(Asp.net MVC C#)

javascript

c#

asp.net-mvc

jquery

asp.net-ajax