Passing an object and primitives to a Controller via JQuery

Question

Started by looking at a similar thread, but the Solution there didn't work for me.

Passing multiple objects to my controller

Here is my javascript onclick event:

var test = function () {
        var vm = {
            "IsNew": true,
            "SelectedId": 1,
            "SelectedCode": null
        };
        var idk= JSON.stringify(vm);
        $.ajax({
            url: $("base").attr("href") + "Controller/ComplexityTest",
            method: "POST",
            contentType: 'application/json',
            data: idk,
            success: function (msg) {
                alert('success')
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("Error: " + textStatus + ", " + errorThrown);
            }
        });
    };

On my Controller, I have this endpoint:

    [HttpPost]
    public async Task<IActionResult> ComplexityTest([FromBody] MyViewModel vm, long categoryId, long personId, DateTime startDate)
    {
        //...do work
    }

For simplicity, let's say this is my Model:

public class MyViewModel
{
    public bool IsNew {get; set;}
    public int SelectedId {get; set;}
    public string SelectedCode {get; set;}
}

On running this, I'm able to see that vm is populated correctly. The issue is that I'm also trying to populate some additional primitives to be sent along with MyViewModel.

I've tried adding the additional fields inside my vm initializer, and stringifying the whole thing.

I've tried setting data to { "vm": idk, "categoryId": 1, etc... }.

Everything I've tried so far has caused me to not only get the new parameters, but to lose my original vm object as well.

How do I go about passing an object (class) and multiple primitives to a POST method? Do I just need to create a new DTO object containing the additional parameters, and send that instead?

karritos · Accepted Answer · 2019-07-20T00:17:12.967

1

In the url ajax param , use this

url: '@Html.Raw(Url.Action("ComplexityTest", "Home", new { categoryId = 123, personId = 456, startDate = "2019-07-19" }))',

I honestly don't know why Url.Action doesn't work properly in .net core, but I used Html.Raw to make it work. ‍♂️‍♂️‍♂️

...but it works....

edited Jul 20 '19 at 00:17

answered Jul 20 '19 at 00:12

karritos

344
2
9

Ultimately, I did end up creating a new model that encapsulated all the parameters I needed, simply because I didn't want them showing up in the query string. But your advice set me down the right track. Thank you. – MadHenchbot Jul 22 '19 at 15:00

score 0 · Answer 2 · answered Jul 20 '19 at 02:21

This is a way to do it in javascript

var test = function () {
    var vm = {
        "IsNew": true,
        "SelectedId": 1,
        "SelectedCode": null
    };
    var obj = { vm: vm, categoryId: 1, personId:3, startDate:new Date() };

    var idk= JSON.stringify(obj);
    $.ajax({
        url: $("base").attr("href") + "Controller/ComplexityTest",
        method: "POST",
        contentType: 'application/json',
        data: idk,
        success: function (msg) {
            alert('success')
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("Error: " + textStatus + ", " + errorThrown);
        }
    });
};

I don't really know what $("base").attr("href") is getting for you but I tried just /Controller/ComplexityTest

Also I did not use [FromBody] MyViewModel vm I used MyViewModel vm instead

I don't know if it's .Net Core related, or if another gremlin is involved, but I wasn't able to get this approach to post any data back to the controller. The best I could do was to stringify only the vm object, then change my endpoint to accept a string and manually convert it to the class I was expecting. — MadHenchbot, Jul 22 '19 at 15:18

Passing an object and primitives to a Controller via JQuery

2 Answers2