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.

You have specified contentType: 'application/json; charset=utf-8', and contentType: "application/html; charset=utf-8", - it cant be both (ditto for dataType) — user3559349
– user3559349, Commented Jul 2, 2015 at 5:53
yeah I have mentioned it only once by mistake paste here twice — rupinder18
– rupinder18, Commented Jul 2, 2015 at 6:06
Now you have removed the json one (its the html one you need to remove since your sending json to the controller) — user3559349
– user3559349, Commented Jul 2, 2015 at 6:07

Hemant Bhagat · Accepted Answer · 2015-07-02 06:04:48Z

5

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();
}

answered Jul 2, 2015 at 6:04

Hemant Bhagat

17311 bronze badges

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

3 Comments

rupinder18 Over a year ago

My controller method is hit but in my list I am getting null value how to solve this problem

Hemant Bhagat Over a year ago

You are having a list of " UserTilesVM " in userTiles. ??

rupinder18 Over a year ago

thanks now its workinh have used post as type and [HttpPost] on controller's action,its working now

Daniel Hoffmann-Mitscherling · Accepted Answer · 2015-07-02 06:06:16Z

5

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.

edited Jul 2, 2015 at 6:06

answered Jul 2, 2015 at 6:00

Daniel Hoffmann-Mitscherling

2,3691 gold badge18 silver badges23 bronze badges

7 Comments

rupinder18 Over a year ago

yeah I have mentioned it only once by mistake paste here twice

Daniel Hoffmann-Mitscherling Over a year ago

You deleted the wrong one. Consider the type of content you are sending!

rupinder18 Over a year ago

I have tried changing the contentype to json but still getting null value in list have used [HttpGet] on my controller's action too

Daniel Hoffmann-Mitscherling Over a year ago

You are POSTing with your AJAX call. Use [HttpPost]

rupinder18 Over a year ago

thanks yes I have used type as post,yeah I have mentioned it only once by mistake paste here twice and [HttpPost] now,its working now

|

Rahul Dubey · Accepted Answer · 2015-08-10 10:07:27Z

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();
}

less · Accepted Answer · 2015-07-02 06:17:12Z

1

I think your list definition is not ok:

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

should be:

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

answered Jul 2, 2015 at 6:17

less

7117 silver badges26 bronze badges

Comments

Dinesh Kumar Sharma · Accepted Answer · 2018-06-13 17:45:04Z

1

i have using this sequence that work fine

you have check the contentType: "application/json", dataType: "json", sequence in ajax method

answered Jun 13, 2018 at 17:45

Dinesh Kumar Sharma

113 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

3 Comments

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related