Pass Data by AJAX to Controller in MVC

Question

I'm trying to pass data to controller for further processing but I get null in controller, however debug of js (ajax) shows the number anyway. What might be the problem?

Ajax:

 $('.toggler_btn').on('click', function (event)
            {
                var id = $(this).attr('data-id');
                    if ($(this).text() === '+') {
                        $.ajax({
                            url: "/List/GetSubItems",
                            type: "POST",
                            contentType: "html",
                            dataType: "text",
                            data: '{"id":"' + id + '"}', // here it show the data, like 5 or some other number
                            success: function (data)
                            {
                                $('.element_wrapper [data-id="' + id + '"]').html(data);
                            }
                            })
                        $(this).html('-');
                    }
                    else $(this).html('+');
            });

Controller:

  [HttpPost]
    public ActionResult GetSubItems(string id) // here I get null
    {
        int pID = 0;
        int.TryParse(id, out pID);
        List<H_Table> list = new List<H_Table>();

        foreach (var item in db_connection.H_Table.Where(i => i.PARENT_ID == pID))
        {
            list.Add(item);
        }
        return PartialView(list);
    }

Delete `contentType: "html",` and use just `data: { id: id }` — , May 03 '17 at 04:39
contentType : datatype to send to server where as dataType return datatype of data from sever — Asif Raza, May 03 '17 at 05:59

Zulqarnain Jalil · Accepted Answer · 2017-05-04T07:37:14.527

2

$('.toggler_btn').on('click', function (event) {
    var id = $(this).attr('data-id');
    if ($(this).text() === '+') {
        $.ajax({
            url: '/List/GetSubItems',
            type: 'POST',
            dataType: 'json',
            data: '{"id":"' + id + '"}',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $('.element_wrapper [data-id="' + id + '"]').html(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("responseText=" + XMLHttpRequest.responseText + "\n textStatus=" + textStatus + "\n errorThrown=" + errorThrown);
            }
        });
        $(this).html('-');
    }
    else $(this).html('+');
});

Use this one just copy and paste

edited May 04 '17 at 07:37

answered May 03 '17 at 04:50

Zulqarnain Jalil

1,679
16
26

This will throw a `500 Internal Server Error` - the method returns html, not json. – May 04 '17 at 04:16
@StephenMuecke are you getting the value of 'id' in controller ? can you please tell me what you want to do excatly – Zulqarnain Jalil May 04 '17 at 07:36
It needs to be `dataType: "html",` because the method returns html (and it can simply be `data: { id: id }` and delete the `contentType` option) – May 04 '17 at 07:42

Tharsan Sivakumar · Answer 2 · 2017-05-03T04:17:56.240

0

Change your content type to "text" and change the data as well.

edited May 03 '17 at 04:17

answered May 03 '17 at 04:11

Tharsan Sivakumar

6,351
3
19
28

I don't need a json, I just need to pass the data to form list and pass it to partial view. Json is not necessary – JDoeBloke May 03 '17 at 04:15
Then change your content type to "text". Updated the answer according to your comment – Tharsan Sivakumar May 03 '17 at 04:17

score 0 · Answer 3 · edited May 23 '17 at 12:10

Your AJAX request has set contentType: "html" but you are actually sending JSON (with data: '{"id":"' + id + '"}'). And your controller is receiving a string.

So either change your AJAX call to send a raw string:

contentType: "text",
data: { id: id }

...or update your controller to receive JSON. This latter can be achieved by creating something like this:

public ActionResult GetSubItems(ViewModel model)

public class ViewModel {
    public string Id { get; set; }
}

EDIT: also, for reference, you might want to see the difference between contentType and dataType.

score 0 · Answer 4 · answered May 03 '17 at 04:20

0

Change data type to "application/json" and data to this :

   data :{
          id : id
   }

answered May 03 '17 at 04:20

Saeed Ahmadian

1,112
1
10
21

Pass Data by AJAX to Controller in MVC

4 Answers4