'Send a dictionary object from asp.net mvc response to another mvc action

I have an app that receives a dictionary object response from a MVC action in ajax call and I have another ajax call that pass dictionary to other MVC action

I have:

[HttpPost]
public IActionResult Index(MyModel model)
{
   ...
   var data = new Dictionary<string, List<object>>();
   ...
   return Json(data);  
}

[HttpPost]
public IActionResult OtherCall(Dictionary<string, List<object>> data)
{
   // data is null or empty here, do not know why
   return PartialView("_Test", data);
}

and ajax's:

$.ajax({
   url: 'Index',
   type: "POST",
   data: $form.serialize(),
   dataType: "json",
   success: function(response) {
      $.ajax({
         url: 'OtherCall',
         type: "POST",
         dataType: "html",
         data: response,
         success: function(html) { $div.append($(html)); }
      });
   }
});

But somehow seems that data from OtherCall is null. Do not know why. In console log, it looks like:

Solution 1:^[1]

Please try this. I can help with the dictionary serialization if you want.

Controller:

[HttpPost]
public IActionResult OtherCall(aViewModel data)
{
    //turn into dictionary<string, list<objects>
    var dictionary = new Dictionary<string, List<object>>();
    List<object> list = new List<object>();
    list.Add(data.textField);

    dictionary.Add("textField", list);

    return Json(dictionary);
}

[HttpPost] 
public IActionResult Index3(aViewModel form)
{
    var data = new Dictionary<string, List<object>>();
    List<object> list = new List<object>();
    list.Add(form.textField);

    data.Add("textField", list);

    return Json(data);
}

public IActionResult Index2()
{
    return View();
}

View:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>$(document).ready(function () {

            $("button").click(function () {
                var formDataSerialized = $("form").serialize();
                $.ajax({
                    url: '/Home/Index3',
                    type: "POST",
                    data: formDataSerialized,
                    dataType: "json",
                    success: function (response) {
                        var field = "textfield=" + response.textField[0];
                        $.ajax({
                            url: '/Home/OtherCall',
                            type: "POST",
                            datatype: "json",
                            data: field,
                            success: function (html) {
                                alert(html.textField[0]);
                            }
                        });
                    }
                });
            });
        });</script>
</head>
<body>
    <form action="">
        <input type="text" value="firstAjax" name="textField" />
    </form>
    <button>Run the ajaxes...</button>
    <div></div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	kblau

'Send a dictionary object from asp.net mvc response to another mvc action

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]