Ajax returning null value / asp.net

Question

I am trying to get multiple entries from my controller using Ajax. However, both id and qty return null (I gave them default values). Please review my code below.

<script type="text/javascript">
$(document).ready(function () {
    $("#submit").on("click", function () {
        var elem = {};
        elem.qty = "10";
        elem.id = 1;
   
        $.ajax({
            url: '/Home/Form1/',
            type: 'POST',
            dataType: 'json',
            data: JSON.stringify(elem),
            
            success: function (data) {
                alert(data);
                console.log(data);
        
                $("#output").html(data[0]);
            }
        });
    });
});

public class Data
{
    public string qty { get; set; }
    public int? id { get; set; }
}

public ActionResult Form1(Data elem)
{

    List<Data> Elements = new List<Data>
    {
        new Data {qty=elem.qty, id=elem.id},
    };

    return Json(Elements);
}

Could you please share your HTML elements as well to that it can be reproduced easily. — Md Farid Uddin Kiron
– Md Farid Uddin Kiron, Commented Mar 30, 2022 at 6:07
My Html is like below. But I am not storing the "Id" there for now. @model WebApplication3.Models.Data <table> <tr> <td><input type="text" id="Id" /></td> </tr> <tr> <td colspan="2"><button class="btn btn-primary" id="submit" value="submit">Submit</button></td> </tr> </table> <br /> <br /> <h5 style="color:purple" id="output"></h5> — Selin
– Selin, Commented Mar 30, 2022 at 6:20
probably declaration of your variable var elem = {}; isn't type of Data class. Thats why you get null in backend. — Bartosz
– Bartosz, Commented Mar 30, 2022 at 6:31

Md Farid Uddin Kiron · Accepted Answer · 2022-03-30 06:43:20Z

0

"Lets focus on below code first"

        var elem = {};
        elem.qty = "10";
        elem.id = 1

Note: As you can see it already on Json fashion so you do not need to parse into json again. Therefore no need to use JSON.stringify in this case. So you could try below way:

Javascript Code:

<script>
        $(document).ready(function () {
            $("#btnSubmit").on("click", function () {
                var elem = {};
                elem.qty = "10";
                elem.id = 1;

                console.log(elem);
                $.ajax({
                    url: 'https://localhost:44361/userLog/FormPost',
                    type: 'POST',
                    dataType: 'json',
                    data: elem,
                    success: function (data) {
                        alert(data),
                            console.log(data),

                            $("#output").html(data[0]);
                    }
                });
            });

        });
    </script>

C# Controller Code:

        [HttpPost]
        public async Task<IActionResult> FormPost(Data elem)
        {
            List<Data> Elements = new List<Data>
        {
            new Data {qty=elem.qty, id=elem.id},
            };


            return Json(Elements);

        }

Output:

Hope it would resolved your problem as expected.

edited Mar 30, 2022 at 6:43

answered Mar 30, 2022 at 6:38

Md Farid Uddin Kiron

22.9k3 gold badges29 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roe Over a year ago

Although your result is an answer to the question your reasoning is completely false. 1) dataType in a Jquery request is only for returned data. Use contentType for sending Json objects to a backend. 2) You do not use JSON.Stringify() because you do not specify that you send a Json object as mentioned in 1). If you look in the request you will see your request uses routeValues rather than a Json object. This is also why you do not need to specify [fromBody] in the controllers endpoint

Collectives™ on Stack Overflow

Ajax returning null value / asp.net

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related