Click here to Skip to main content
14,733,890 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi, I want to send View Model using form object by ajax in mvc 5.

Here is my Code:
$("#formID").on("submit", function(event) {
                var $this = $(this);
                var OBJ = $this.serialize();
 $.ajax({
                    cache: false,
                    async: true,
                    type: "POST",
                    url: "@Url.Action("Create", "EmpLoyee")",
                    data: OBJ,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    traditional: true,
                    success: function(data) {
                        alert(data);
                    }
                });

this is working fine but when I add another parameter Form Object OBJ is going null.

I want to do this.

$("#formID").on("submit", function(event) {
                var $this = $(this);
                var OBJ = $this.serialize();
                var Details2 = ["Saab", "Volvo", "BMW"];
                var Details = "Asif";
 $.ajax({
                    cache: false,
                    async: true,
                    type: "POST",
                    url: "@Url.Action("Create", "EmpLoyee")",
                    data: OBJ,
                    data: JSON.stringify(Details),
                    data: JSON.stringify(Details2),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    traditional: true,
                    success: function(data) {
                        alert(data);
                    }
                });

Any Suggetion what is wrong in my code

this is controller
public ActionResult Create(EmployeeDAL OBJ, List<string> Details, List<string> Details2)
{

}


What I have tried:

$("#formID").on("submit", function(event) {
                var $this = $(this);
                var OBJ = $this.serialize();
                var Details2 = ["Saab", "Volvo", "BMW"];
                var Details = "Asif";
 $.ajax({
                    cache: false,
                    async: true,
                    type: "POST",
                    url: "@Url.Action("Create", "EmpLoyee")",
                    data: OBJ,
                    data: JSON.stringify(Details),
                    data: JSON.stringify(Details2),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    traditional: true,
                    success: function(data) {
                        alert(data);
                    }
                });
Posted
Updated 30-Sep-20 7:07am

I changed your action signature to this

public ActionResult Create(EmployeeDAL OBJ, string Details, List<string> Details2)


because "Details" is a single string rather than an array.

You need to create a single JSON object with a property that maps to each of your param values so;

{
    "OBJ": {"ID":123, "EmployeeName":"John", ...},
    "Details": "Asif",
    "Details2": ["Saab", "Volvo", "BMW"]
}


The tricky bit is getting the form data as a JSON object but the getFormData function below does that, and the other params can be added simply

function getFormData($form) {
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function (n, i) {
        indexed_array[n['name']] = n['value'];
    });

    return indexed_array;
}

$("#formID").on("submit", function (event) {
    event.preventDefault();
    var $this = $(this);
    var Details2 = ["Saab", "Volvo", "BMW"];
    var Details = "Asif";
    var allData = {
        "OBJ": getFormData($this),
        "Details": Details,
        "Details2": Details2
    };

    var json = JSON.stringify(allData);

    $.ajax({
        cache: false,
        async: true,
        type: "POST",
        url: "@Url.Action("Create", "Employee")",
        data: json,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        traditional: true,
        success: function (data) {
            alert(data);
        }
    });
});
   
Comments
Member 7969814 30-Sep-20 12:22pm
   
THANKS A LOT YOUR CODE IS WORKING FINE FOR ME PLEASE EXPLAIN THIS FUNCTION

function getFormData($form) {
var unindexed_array = $form.serializeArray();
var indexed_array = {};

$.map(unindexed_array, function (n, i) {
indexed_array[n['name']] = n['value'];
});

return indexed_array;
}
F-ES Sitecore 30-Sep-20 12:31pm
   
serialiseArray() returns your form as JSON but not in a format you can pass to an MVC action. It comes out like

[
{name:FormElement1Name, value:FormElement1Value},
{name:FormElement2Name, value:FormElement2Value},
...
]

but to send to your MVC action it has to be in this format

{
FormElement1Name: FormElement1Value,
FormElement2Name: FormElement2Value
}

so getFormData creates an object of the right format by going through each name\value object and adding a property to the output object where the property name if the "name" value and the property value is the "value" value, essentially mapping one format to the other.
You get "one" "data" parameter (name); not as many as you wish.

data: OBJ,
data: JSON.stringify(Details),
data: JSON.stringify(Details2),
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900