How to pass model from view to controller using ajax

Question

In view I received model of type HistorySearch . Then I want to resend this model to controller using ajax :

$("#exportCsv").click(function () {
    // get model as json
    var searchData = '@Html.Raw(Json.Encode(@Model))';
    searchData = JSON.stringify({ 'search': searchData });

    $.ajax({
        //contentType: 'application/json; charset=utf-8',
        url: '@Url.Action("ExportToCsv", "BankCosts")',
        type: 'POST',  
        data: searchData,
        dataType: 'json',
        error: function (xhr) {
            alert('Error: ' + xhr.statusText);
        },
        async: true,
    });
});

As you can see I had to comment contentType because for some reason with this passed model is set to null in controller.

Also, my controller is coded like this:

[HttpPost]
public void ExportToCsv(HistorySearch search)
{
    // search properties are not filled. They are set to default value
}

The thing is binding is not working correctly. Received search properties are set to default values. Whats wrong there?

Answer 1

The JSON.stringify({ 'search': searchData }) will transform your object to string, so then will pass to your ActionResult a string instead of an object. Remove the JSON.stringify and on ajax call change:

$.ajax({url: '...', ..., data: { searchData }, ...