Мой Ajax-вызов передает нулевой строковый объект моему действию JSonResult. Почему? - PullRequest
0 голосов
/ 05 октября 2019

Мой метод Ajax вызывает метод действия в контроллере и успешно возвращает вызов. Однако объект, который я передаю, всегда нулевой.

Я прочитал много, может быть, не все, так как довольно много похожих вопросов. Я пробовал разные вещи, такие как разные варианты удаления dataType и contentType из функции ajax. Я установил точки останова в действии и установил предупреждения в сценариях, чтобы убедиться, что объект не является нулевым, перед отправкой в ​​действие JsonResult. Я проверил, что данные из метода Action достигают успешного раздела функции ajax.

Итак, вот сценарий: у меня есть страница индекса MVC Core 2.2. Я добавил текстовое поле поиска. все работает правильно, если я блокирую JS в браузере, поэтому я знаю, что HTML-код правильный. Но я хотел дать Ajax опцию для «более приятного» пользовательского опыта. Я действительно заставил Ajax работать с простыми жестко закодированными строками. Но теперь по какой-то причине переданный объект имеет значение null.

Давайте начнем со сценария представления:

    //This is the Object I want passed through Ajax
    //class pageValues {
    //   constructor(){
    //       this.sortColumn = $("#inpSortColumn").val();
    //       this.sortOrder = $("#inpSortOrder").val();
    //       this.filter = $("#Filter").val();
    //       this.message = "";
    //       this.currentPage = $("#inpCurrentPage").val();
    //       this.recordsPerPage = $("#inpPageSize").val();
    //       this.recordCount = 0;
    //   }
    //}
    // I also tried as a simple variable without a constructor and added
    //    default values incase undefined values were causing issues
    var pageValues = {
        sortColumn:     ($("#inpSortColumn").val() == undefined ) ? "LastName" : $("#inpSortColumn").val(),
        sortOrder:      ($("#inpSortOrder").val() == undefined ) ? "ASC" : $("#inpSortOrder").val(),
        filter:         ($("#Filter").val() == undefined ) ? "" : $("#Filter").val(), 
        message:        ($("#inpMessage").val() == undefined ) ? "" : $("#inpMessage").val(), 
        currentPage:    ($("#inpCurrentPage").val() == undefined) ? 1: $("#inpCurrentPage").val(), 
        recordsPerPage: ($("#inpPageSize").val() == undefined) ? 5 : $("#inpPageSize").val(),
        totalRecords:   ($("#inpTotalRecords").val() == undefined ) ? 0 : $("#inpTotalRecords").val()
    };

    $(document).ready(function () {
        // If we are here, the browser allows JS
        // So, replace the submit buttons with Ajax functions
        ReplaceHtml();
    });

    function ReplaceHtml() {
        // Search Button
        var divSearch = $("#divSearchBtn");
        divSearch.hide();
        divSearch.empty();
        divSearch.append('<button id="btnAjaxSearch" type="button" ' +
            'class="" onclick="RequestRecords();">Search</button>');
        divSearch.show();
    }

    // Here we call the Ajax function passing the data object and the callback function
    function RequestRecords() {
        alert($("#Filter").val());    // This is just to Verify value is present
        AjaxCallForRecords(pageValues, ReturnedData);
    }

    // This is the callback function
    function ReturnedData(data) {
        // This verifies we hit the callback
        alert("inside ajax callback"); 
        // The Verification that the Object returned is valid.
        // The problem appeared here, 
        // The firstname was always the same no matter the Search Filter.
        // Telling me the object on the server side receiving the 'pageValues' 
        // had been recreated due to being null.
        alert(data.users[0].firstName);
    }

    // Of course, here is the ajax function
    // I have played around with data and content settings
    // When I changed those I got 'Response Errors' but could never get the ResponseText
    function AjaxCallForRecords(dataToSend, callback) {
        console.log(dataToSend); // This prove Data is here
        $.ajax({
            type: "GET",
            url: '@Url.Action("Index_Ajax","ApplicationUsers")',
            data: JSON.stringify(dataToSend),
            dataType: "json",
            contentType: "application/json",
            success: function (data) { callback(data); },
            error: function (data) { alert("Error. ResponseText: " + data.responseText); }
        });
    }
</script>

Хорошо, теперь для контроллера:

    public JsonResult Index_Ajax([FromBody] UsersCodeAndClasses.PageValues pageValues)
    {
        // A break point here reveals 'pageValues' is always null - this is the problem.....
        // In the GetFilteredData function I do create a new 'pageValues' object if null
        // So my Search 'Filter' will always be empty, and I will always get all the records.

        // Get Records
        List<InputUser> users = _usersCode.GetFilteredData(pageValues);

        // The next block of code assembles the data to return to the view
        // Again the 'pageValues' is null because that is what gets passed in, or rather, never assigned

        //Build Return Data
        UsersCodeAndClasses.AjaxReturnData data = new UsersCodeAndClasses.AjaxReturnData()
        {
            pageValues = pageValues,
            users = users
        };

        return Json(data);
    }

И наконец, декларация pageValues ​​на стороне сервера:

    public class PageValues
    {
        // Class used to pass page and sorting information to Ajax Call
        public string sortColumn { get; set; } = "LastName";
        public string sortOrder { get; set; } = "ASC";
        public string filter { get; set; } = "";
        public string message { get; set; } = "";
        public int currentPage { get; set; } = 1;
        public int recordsPerPage { get; set; } = 5;
        public int recordCount { get; set; }
    }
    public class AjaxReturnData
    {
        // Class is used to pass multiple data to the Ajax Call
        public PageValues pageValues { get; set; }
        public List<InputUser> users { get; set; }
    }

Итак, я ожидаю, что данные будут переданы, я просто не знаю, почему сервер не назначает данные. Я новичок в этом и могу использовать опытный глаз.

Спасибо

Ответы [ 2 ]

0 голосов
/ 05 октября 2019

Просто измените свой тип с GET на POST в вызове Ajax.

0 голосов
/ 05 октября 2019

Я потратил еще немного времени на изучение всего, что касается возвращаемых значений и классов ajax. В конечном счете, мой класс был уродливым, как только я изменил, что он начал работать. Я также изменил тип на POST, я не хотел использовать POST только для чтения записей. Но я отправляю много данных, не отставая от поиска, разбивки на страницы и сортировки.

Приведенный ниже код работает, хотя я чувствую, что он очень многословный, а некоторые части могут быть ненужными. Надеюсь, что это кому-то поможет, и, пожалуйста, не стесняйтесь комментировать и помогать мне в вещах, которые могут помочь другим.

<script>
    // Class to use for ajax data
    class pageValues {
        constructor(){
            this.sortColumn = ($("#inpSortColumn").val() == undefined) ? "LastName" : $("#inpSortColumn").val();
            this.sortOrder  = ($("#inpSortOrder").val() == undefined) ? "ASC" : $("#inpSortOrder").val();
            this.filter = ($("#Filter").val() == undefined) ? "" : $("#Filter").val();
            this.message = ($("#inpMessage").val() == undefined) ? "" : $("#inpMessage").val();
            this.currentPage = ($("#inpCurrentPage").val() == undefined) ? 1 : $("#inpCurrentPage").val();
            this.recordsPerPage = ($("#inpPageSize").val() == undefined) ? 5 : $("#inpPageSize").val();
            this.totalRecords= ($("#inpTotalRecords").val() == undefined) ? 0 : $("#inpTotalRecords").val();
        }
        get SortColumn()          { return this.sortColumn; }
        set SortColumn(value)     { this.sortColumn = value; }
        get SortOrder()           { return this.sortOrder; }
        set SortOrder(value)      { this.sortOrder = value;}
        get Filter()              { return this.filter; }
        set Filter(value)         { this.filter = value; }
        get Message()             { return this.message; }
        set Message(value)        { this.message = value; }
        get CurrentPage()         { return this.currentPage; }
        set CurrentPage(value)    { this.currentPage = value; }
        get RecordsPerPage()      { return this.recordsPerPage; }
        set RecordsPerPage(value) { this.recordsPerPage = value; }
        get TotalRecords()        { return this.totalRecords; }
        set TotalRecords(value)   { this.totalRecords = value; }
    }

    $(document).ready(function () {
        // If we are here, the browser allows JS
        // So, replace the submit buttons with Ajax functions
        ReplaceHtml();
    });

    function ReplaceHtml() {
        // Search Button
        var divSearch = $("#divSearchBtn");
        divSearch.hide();
        divSearch.empty();
        divSearch.append('<button id="btnAjaxSearch" type="button" ' +
            'class="" onclick="RequestRecords();">Search</button>');
        divSearch.show();
    }

    // Here we call the Ajax function passing the data object and the callback function
    function RequestRecords() {
        alert($("#Filter").val());    // This is just to Verify value is present
        AjaxCallForRecords(new pageValues(), ReturnedData);
    }

    // This is the callback funtion
    function ReturnedData(data) {
        // The verification we hit the callback
        alert("inside ajax callback"); 
        alert(data.users[0].firstName);
    }

    // Ajax function
    function AjaxCallForRecords(dataToSend, callback) {
        console.log(dataToSend);
        $.ajax({
            type: "POST",
            url: '@Url.Action("Index_Ajax","ApplicationUsers")',
            data: JSON.stringify(dataToSend),
            dataType: "json",
            contentType: "application/json",
            success: function (data) { callback(data); },
            error: function (data) { alert("Error. ResponseText: " + data.responseText); }
        });
    }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...