从视图到 controller 的 Ajax 请求正文在 ASP NET Core MVC 3 中为空

Question

I have a scenario where I want to make an ajax call from view to controller in ASP NET Core MVC 3. The controller should then return partial view as a response. The main problem is that when data gets passed to controller via ajax post request, controller finds data null. I've searched through a lot of online content on this topic, but no solution works for me.

Here is my controller method:

[HttpPost]
public PartialViewResult AddUserForm(string firstName, string lastName) 
{
    // some stuff happens then
    return PartialView();
}

My Ajax post method in view:

<script>
    function replaceContentsOfDiv() {
        var f = $('#fName').val();
        var l = $('#lName').val();

        $.ajax({
            url: '@Url.Action("AddUserForm", "Reservation")',
            contentType: 'application/json',
            data: JSON.stringify({ firstName: this.f, lastName: this.l }),
            type: "POST",
            success: function(data) {
                $('#placeHolderDiv').html(data);
            },
            error: function() {
                alert("something is wrong");
            }
        });
    }
</script>

The data from this js script ( var f and var l have valid values. However, if I want to log out string firstName and string lastName in controller method, they are both null. This can be tested with I. e. logger.LogInformation((firstName == null).ToString()) .

Anyone knows what I'm doing wrong so that the data that gets passed into controller is null? I even tried adding [FromBody] annotations to AddUserForm parameters, but no success either.

EDIT: fixed some typo in my JS script.

Answer 1

You just need to change your ajax like following:

$.ajax({
        url: '@Url.Action("AddUserForm", "Reservation")',
        data: {
                 firstname: f,
                 lastname: l
                },
        type: "POST",
        success: function(data) {
            $('#placeHolderDiv').html(data);
        },
        error: function() {
            alert("something is wrong");
        }
    });

Answer 2

I then found the solution. The problem was how the request was called. I then just used regular jQuery post method like this:

<script>
    function replaceContentsOfDiv() {
        let data = {
            firstName: document.getElementById("fName").value,
            lastName: document.getElementById("lName").value
        }
        console.log(data);
        $.post('@Url.Action("AddUserForm", "Reservation")', data, function (data) {
            $('#placeHolderDiv').html(data);
        });
    };
</script>