Data is not passing to action method from view using ajax call - Javascript

nado1122
April 17, 2023
227 views
3 votes
3 Answers

I am trying to send two values from view to controller using ajax call one is the array of string like [‘1′,’2′,’3’] and the other is string value. Here is my ajax call code

$('#multiEditBtn').click(function () {
    var selectedPointCategory = '@ViewBag.pointCategory';
    var selectedIds = ['1','2','3'];
    $.ajax({
        url: "@Url.Action("UpdateMultiPointInfo", "URL")",
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        traditional: true,
        data: JSON.stringify({ 'pointIds': selectedIds, 'pointCategory': selectedPointCategory }),
    });
});

The action method code is given below

[HttpPost]
public ActionResult UpdateMultiPointInfo(List<string> pointIds, string pointCategory)
{
}

The action method is hitting successfully but getting the null values in both parameters.

Tags: ajax asp.net-mvc c#javascript

Answers

Okay so regarding your case, you need to change your AJAX call to:

$('#multiEditBtn').click(function () {
    var selectedPointCategory = '@ViewBag.pointCategory';
    var selectedIds = ['1','2','3'];
    
    var json = {
        selectedPointCategory: selectedPointCategory,
        selectedIds: selectedIds
    };
    
    $.ajax({
        url: "@Url.Action("UpdateMultiPointInfo", "URL")",
        type: 'POST',
        dataType: "json",
        traditional: true,
        data: { "json": JSON.stringify(json)},
    });
});

Since you are sending an array of int in your case, you need to handle them in your Controller action method like this:

using System.Web.Script.Serialization;

[HttpPost]
public ActionResult UpdateMultiPointInfo(string json)
{
    var serializer = new JavaScriptSerializer();
    dynamic jsondata = serializer.Deserialize(json, typeof(object));
    object[] selectedIdsOption = jsondata["selectedIds"];

    //Get your array data here
    List<int> selectedIdsOptionListInt = selectedIdsOption
                .Select(s => Int32.TryParse(s, out int n) ? n : (int?)null)
                .Where(n => n.HasValue)
                .Select(n => n.Value)
                .ToList();
                
    //Get your string value here
    string selectedPointCategory= Convert.ToString(jsondata["selectedPointCategory"]);

    //Do your stuff
}

One of the possible solutions using the JsonConvert.DeserializeObject<T>() convertor (requires to install the Newtonsoft.Json NuGet package).

$('#multiEditBtn').click(function () {
    var selectedPointCategory = '@ViewBag.pointCategory';
    var selectedIds = ['1','2','3'];
 
     $.ajax({
          url: '@Url.Action("UpdateMultiPointInfo", "URL")',
          type: 'POST',
          traditional: true,
          data: {
              pointIds: JSON.stringify(selectedIds),                      
              pointCategory: selectedPointCategory
          },
          dataType: "json"
      })
  });

And on the server side:

using Newtonsoft.Json;

[HttpPost]
public ActionResult UpdateMultiPointInfo(string pointIds, string pointCategory)
{
    var data = JsonConvert.DeserializeObject<string[]>(pointIds);
    return Json("Success");
}

Have you tried not using JSON.stringify?

Maybe try this:

$('#multiEditBtn').click(function () {
    var selectedPointCategory = '@ViewBag.pointCategory';
    var selectedIds = ['1','2','3'];
    $.ajax({
        url: "@Url.Action("UpdateMultiPointInfo", "URL")",
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        traditional: true,
        data: { 'pointIds': selectedIds, 'pointCategory': selectedPointCategory },
    });
});

Please signup or login to give your own answer.

Click here to cancel reply.

Data is not passing to action method from view using ajax call – Javascript

Answers