How to post viewmodel in MVC using jquery [closed]

Answer 1

You would require two things to achieve this:

First: Wrap all the input/data elements of your in form tag view like below:

@using(Html.BeginForm())
{
    //exitsing html stuff
}

Second: In Ajax request use serializeArray() to encode a set of form elements and pass it in data like below:

$.ajax(
{
    url: '@Url.Action("CreateProduct","ProductManagement")',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    type: 'post',
    cache: false,
    data: $('form').serializeArray(),
    success: function (data) { alert('final'); },
    error: function (f1, f2, f3) { alert(f3); }
});

This will fix your concern.

Answer 2

You should collect the data from inputs manually and construct JSON object that correspond to your C# model class. For example if you wait ProductViewModel object in your action method you can follow this example:

var myData = {
    productName: $('#ProductName').val(),
    cost: $('#Cost').val(),
    // .. and so on
};

$.ajax({
    data: JSON.stringify(myData),
    // .. the other ajax options
});

It's even easier if you have form element. Just select the form with jQuery and call serialize method. The data will be encoded as a string for submission. The format will be application/x-www-form-urlencoded; charset=UTF-8 that is the $.ajax default too and you won't need to specified it. Example:

var myData = $('#myFormId').serialize();
$.ajax({
    data: myData,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    //..Other ajax options
});