Почему мой Jquery Ajax звонок не работает? (Asp. net MVC C#) - PullRequest
Новая
       38

Почему мой Jquery Ajax звонок не работает? (Asp. net MVC C#)

1 голос
/ 29 января 2020

Моя цель состояла в том, чтобы использовать ajax, чтобы извлечь некоторые данные из моего контроллера и добавить их в элемент таблицы в моем представлении. Однако код javascript работает только до "$. ajax (", в этот момент он просто останавливается. Я установил несколько точек останова после вышеупомянутой точки, но код никогда не "ломался" в этих точках.

Это 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);
        }

Я немного искал по inte rnet, и один источник предложил мне разместить Мой jquery CDN в верхней части моего представления в теге head, однако, это не решило мою проблему. Кроме того, я не смог найти никаких других решений после часа поиска.

1 Ответ

1 голос
/ 29 января 2020

У меня есть 2 проблемы, которые я вижу.

Сначала вы делаете POST запрос к действию контроллера, у которого нет аннотации [HttpPost]. Мне кажется, что вы получаете / выбираете данные, и запрос GET был бы более уместным, поэтому я использовал это в приведенном ниже примере.

Во-вторых, вы не можете использовать @URL.Action("Division") в javascript string (или в 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 action: 

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, возвращает данные о действии контроллера и сообщает клиенту об успешном выполнении). С изменением, описанным выше, точки останова в вашем действии контроллера будут достигнуты, когда вы указываете правильный путь и делаете соответствующий тип запроса. Надеюсь, это поможет.

...