C# MVC Post Model and additional data to controller from js

Question

I am working with a custom workflow solution that I am creating. I would like to create a postback that has the model, and two integer values that represent the action and step that I have completed. I don't want to add them to the model because they are only used in this one place. The signature for this postback would be something like this.

[HttpPost]
public void ProcessWorkflowAction(EditScreenModelValidation model, int stepActionId, int stepNumber)
{
    //Some work on model and actions
}

I would really like to do this through JS because that is currently how I am getting StepActionId and StepId. Is there a way to package up the model to send through JS?

 var modelObj = CreateModelData();
 var postObj = JSON.stringify(modelObj);
 $.ajax({
        type: "POST",
        traditional: true,
        dataType: "json",
        url: "url",
        data: { model: modelObj, stepActionId: stepId, stepNumber: 3 }
        cache: false,
        complete: function (data) {
        }});

CreateModelData = function () {
    var modelObj = {};
    var modelArray = $('#frm').serializeArray()
    $.each(modelArray, function (index, value) {
        assign(modelObj, value.name, value.value);
    })

    return modelObj;
};

function assign(obj, prop, value) {
    if (prop != undefined) {
        if (typeof prop === "string")
            prop = prop.split(".");

        if (prop.length > 1) {
            var e = prop.shift();
            assign(obj[e] =
                     Object.prototype.toString.call(obj[e]) === "[object Object]"
                     ? obj[e]
                     : {},
                   prop,
                   value);
        } else
            obj[prop[0]] = value;
    }
}

The model comes back as null in the controller. I have also tried the following code with the same result.

$.ajax({
        type: "POST",
        traditional: true,
        dataType: "json",
        url: "url",
        data: { model: $('#frm').serializeArray(), stepActionId: stepId, stepNumber: 3 }
        cache: false,
        complete: function (data) {
        }});

Yes, but how do I package up the model into a json object with any data changes that have been made? — Nate
– Nate, Commented Dec 18, 2015 at 19:30
Are you simply asking how to create an object in js and send that as model to your controller? — ragerory
– ragerory, Commented Dec 18, 2015 at 19:33
Yes, I updated the question to hopefully be a bit more specific in what I am trying to accomplish. — Nate
– Nate, Commented Dec 18, 2015 at 19:35
var model = { your data }var data = { 'model': model, 'stepActionId': 1, 'stepNumber': 1 } and pass data into ajax call — DanielVorph
– DanielVorph, Commented Dec 18, 2015 at 19:35

ragerory · Accepted Answer · 2015-12-18 19:37:52Z

4

You need to build up the object, assign the properties (make sure it matches any model validation and the field names are the same as your model) and use JSON.stringify to make the conversion:

 var modelObj = {};
 modelObj.prop1 = $('#txtField1').val();
 modelObj.prop2 = $('#txtField2').val();
 // etc... make sure the properties of this model match EditScreenModelValidation

 var postObj = JSON.stringify(modelObj); // convert object to json

 $.ajax({
    type: "POST",
    traditional: true,
    dataType: "json",
    url: "/Workflow/Home/ProcessWorkflowAction",
    data: { model: postObj, stepActionId: stepId, stepNumber: 3 }
    cache: false,
    complete: function (data) {
        if (data.responseText.length > 0) {
            var values = $.parseJSON(data.responseText)
            $('#ActionErrors').html(values.message)
        }
        else {
            location.reload();
        }
    }});

answered Dec 18, 2015 at 19:37

ragerory

1,3761 gold badge10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nate Over a year ago

I will give this a try and get back to you on how it works. My model is fairly large as this is system is collecting a lot of data points. So I will write a piece of js to create the model from the inputs name attribute so that it will automatically handle the deletion or addition of new fields.

Nate Over a year ago

So when I do this, I get null for my model. I used $('frm').serializeArray() to get all the values in the model. It has them all, but I still get null. Any further ideas?

ragerory Over a year ago

Does your model have a default/empty constructor? Also, what does your json look like that gets sent?

Nate Over a year ago

My model only has the default constructor. I verified that the json had all the parameters that I expected and nothing else.

ragerory Over a year ago

@Nate - yes, but depending on how the json is formatted... for example, does it start with model: [ or not, that will affect how your WebAPI method interprets that.

Trent Sartain · Accepted Answer · 2015-12-18 19:39:33Z

0

It's possible and pretty easy to do. MVC is nice about packaging up what you send it.

So if your model looks like:

public class TestModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

And your post method looks like:

[HttpPost]
public void TestMethod(TestModel model, int num1, int num2)
{
    // Stuff
}

Your javascript POST would look like:

function doPost(){
    $.post("/Home/TestMethod",
    {
        model: {
            Name: "Joe",
            Age: 29
        },
        num1 : 5,
        num2 : 10
     },
     function (data, status) {
         //Handle status if you decide to return something
     });
}

Hope that helps!

answered Dec 18, 2015 at 19:39

Trent Sartain

4462 silver badges10 bronze badges

Comments

Nate · Accepted Answer · 2015-12-18 21:42:26Z

So here is how I got it to work. The CreateModelData uses the (frm).serializeArray() method, but I found that if the item was disabled or not on the page, then it didn't create that property.

    var modelObj = CreateModelData();

    var postObj = JSON.stringify(modelObj);

    $.ajax({
        type: "POST",
        traditional: true,
        dataType: "json",
        url: "url",
        data: { modelString: postObj, stepActionId: stepId, stepNumber: 3 },
        cache: false,
        complete: function (data) {
        }});
});

CreateModelData = function () {
    var modelObj = {};
    var modelArray = $('#frm').serializeArray();
    $.each(modelArray, function (index, value) {
        assign(modelObj, value.name, value.value);
    })

    return modelObj;
};

function assign(obj, prop, value) {
    if (prop != undefined) {
        if (typeof prop === "string")
            prop = prop.split(".");

        if (prop.length > 1) {
            var e = prop.shift();
            assign(obj[e] =
                     Object.prototype.toString.call(obj[e]) === "[object Object]"
                     ? obj[e]
                     : {},
                   prop,
                   value);
        } else
            obj[prop[0]] = value;
    }
}

On the controller side, I changed the signature to be all string values like so.

[HttpPost]
public void ProcessWorkflow(string modelString, int stepActionId, int stepNumber)
{
}

To make the modelString value the actual model object, I did this.

using (Stream s = GenerateStreamFromString(json))
{
    DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(modelObj));
    return (modelObj)serializer.ReadObject(s);
}

In the end, this worked for me. All the fields were there and I got no errors. When i tried to have the first variable in the controller method to be the model object, it always came back as null for me no matter what I did.

check my answer. With my solution you won't need to change the typed Model to string.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

The fastest and easiest way to get all the fields in the Model is to serialize the Form which is bound with Model.

Update

The problem that you were receiving null in properties is because serializeArray() create key value format json. you just need to get re-build the json from key value to Property value that can be mapped to the model.

var modelObj = $('#formId').serializeArray()
                           .reduce(function (a, x) { a[x.name] = x.value; return a; }, {});

A little tweak in you ajax call instead of datatype use contentType. This is another reason you were getting null in controller's model object parameter.

         $.ajax({
            type: "post",
            url: "/Account/RegisterSome",
            data: { model: modelobj, id: 3 },
            contentType: 'application/json',
            cache: false,
            complete: function (data) {
            }
        });

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 18, 2015 at 19:54

vendettamit

14.7k2 gold badges36 silver badges56 bronze badges

4 Comments

Nate Over a year ago

Ok, so I did this, and I get null for my model on the controller. When I debug the js, it looks like all the fields are there correctly. I also tried adding Json.Stringify(modelObj) to see if that would populate the model, and it didn't. Any ideas?

vendettamit Over a year ago

Can you post sample of your view?

Nate Over a year ago

Was in the middle of doing that. The code is currently what I am working with.

vendettamit Over a year ago

@Nate I have updated the answer try this now. This will work and no other change required. I have verified it by doing a quick POC.

Joao Ricardo · Accepted Answer · 2020-05-28 12:21:09Z

0

I resolved the issue by removing the JSON.stringify() and just posting my javascript object.

answered May 28, 2020 at 12:21

Joao Ricardo

4315 silver badges8 bronze badges

Collectives™ on Stack Overflow

C# MVC Post Model and additional data to controller from js

5 Answers 5

5 Comments

Comments

1 Comment

Update

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

1 Comment

Update

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related