Passing a list to a controller action using jquery

Question

I currently store the model, which is a list of a model which contains different data such as id, name etc, in a JSON object. I pass this model back to a controller action. The problem is the List contains the correct amount but all the data with the model are null. Below is my code:

Model:

#region Client Employees
public class EmployeesModel
{
    public string Id { get; set; }
    public string Division { get; set; }
    public string Location { get; set; }
    public string Level { get; set; }
    public string Firm { get; set; }
    public double? Bonus { get; set; }
    public double? Salary { get; set; }
    public double? Compensation { get; set; }
}

public class ViewEmployeesModel
{
    public List<EmployeesModel> employees { get; set; }
}
#endregion

Controller:

    public ActionResult Index()
    {
        var clients = DeepfieldClient.GetAllClientEmployees();
        ViewEmployeesModel employees = new ViewEmployeesModel
        {
            employees = clients
        };
        return View(employees);
    }

    public JsonResult GetClients(List<EmployeesModel> model)
    {
        //Do something with the clients in the model
        return Json(false);
    }

Js:

   GetClientData: function () 
   {       
    $("#GetDataBtn").on("click", function () {
        var searchCriteria = $(".dataSelectOptions").val();
        $.ajax({
            type: "POST",
            url: "Home/GetClients",
            data: { model: model },
            success: function (response) {
                GetData.FillTable(response);
            }
        });
    });
},

model is stored in the view as:

var model = @Html.Raw(Json.Encode(Model.employees))

Any ideas as why i will be retrieving the correct amount but null values?

Can you edit the post to include a sample of what model looks like when written into page, that could give a clue. — Stephen Byrne
– Stephen Byrne, Commented Sep 3, 2015 at 20:47

brroshan · Accepted Answer · 2015-09-03 20:47:21Z

You need to JSON.stringify() your data before you send it. And also decorate your controller action method with [HttpPost]. contentType: "application/json" the type of data you're sending to the server and dataType: "json" the data type you're expecting to get back.

Try this:

@section scripts{

<script type="text/javascript">

    $(function () {

        $("button").click(function(){
            var model = @Html.Raw(Json.Encode(Model.employees));

            $.ajax({
                url: "@Url.Action("GetClients","Customers")",
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(model)
            })
            .done(function(data){
                console.log(data);
            });
        });


    });


</script>

}

Action:

[HttpPost]
public JsonResult GetClients(List<EmployeesModel> model)
{
    //Do something with the clients in the model
    return Json(false);
}

I was receiving a post error and saw that the JSON was too big to serialize. So this helped:<add key="aspnet:MaxJsonDeserializerMembers" value="150000" /> within the appsettings in the config file. Thank you very much it's working now

Collectives™ on Stack Overflow

Passing a list to a controller action using jquery

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related