getting null value in list when passing by ajax call to mvc controller

Question

I am passing my list to an mvc controller but I am getting null value in the controller.But my list has values when show in alert on client side.

ajax call

$("#addTiles").click(function() {
    userTiles = JSON.stringify({
        'userTiles': userTiles
    });
    alert("Entered function.");
    alert(userTiles[0].TileID);
    var url = '@Url.Action("AddTiles")';
    $.ajax({
        type: "GET",
        url: url,
        data: userTiles,
        success: function(d) {
            if (d.indexOf('"IsSessionExpired":true') != -1) {
                location.reload();
            } else {
                onAddTilesSuccessful(d);
            }
        },
        error: function() {
            errorInOperation();
        },
        contentType: "application/html; charset=utf-8",
        dataType: 'html'
    });
});

function onAddTilesSuccessful(e) {
    $("#tilesSubmissionMsg").append(e);
}

function errorInOperation(d) {
    $("#tilesSubmissionMsg").append("Something went wrong");
}

mvc controller

  public ActionResult AddTiles(List<UserTilesVM> userTiles)
    {
        return View();
    }

List Model

public class UserTilesVM
{
    public int TileID { get; set; }
    public int TopPosition { get; set; }
    public int LeftPosition { get; set; }
}

List in javascript

"{"userTiles":[{"TileID":"3","TopPosition":0,"LeftPosition":0}]}"

I have also tried by sending my list with stringfy but that also doesn't work.

Answer 1

Use : [HttpGet] on the method AddTiles as you have used type: "GET" on the Ajax hit.

[HttpGet]
public ActionResult AddTiles(List<UserTilesVM> userTiles)
{
     return View();
}

If Still doesn't works then try type: "POST" on Ajax hit and on method use [HttpPost]

[HttpPost]
public ActionResult AddTiles(List<UserTilesVM> userTiles)
{
    return View();
}

Answer 2

You have contentType and dataType twice in your AJAX setup, with different values, which will break the AJAX call.

Keep in mind contentType is to tell the server what type of data to expect and dataType is to determine what type of data is returned, from the documentation.

Edit: I see you have edited your code!

In this case, since you are using JSON.Stringify to modify the data you are sending, you would use contentType: "application/json; charset=utf-8", as your contentType, since you are sending JSON data to the backend.

Answer 3

when we are trying to pass object data using ajax, we have to store data in variable and pass data directly using "data :'variable'" in AJAX to Controller Method

$("#addTiles").click(function() {
   var userTiles = ({
        'userTiles': userTiles
    });
    alert("Entered function.");
    alert(userTiles[0].TileID);
    var url = '@Url.Action("AddTiles")';
    $.ajax({
        type: "POST",
        url: url,
        data: userTiles,
        success: function(d) {
            if (d.indexOf('"IsSessionExpired":true') != -1) {
                location.reload();
            } else {
                onAddTilesSuccessful(d);
            }
        },
        error: function() {
            errorInOperation();
        },
        contentType: "application/html; charset=utf-8",
        dataType: 'html'
    });
});

function onAddTilesSuccessful(e) {
    $("#tilesSubmissionMsg").append(e);
}

function errorInOperation(d) {
    $("#tilesSubmissionMsg").append("Something went wrong");
}

//Use [HttpPost] keyword for getting value which was passed by AJAX.

[HttpPost]
public ActionResult AddTiles(List<UserTilesVM> userTiles)
{
    return View();
}