How to pass a list of objects in Razor to an ASP.Net Core Controller via ajax?

Question

I have an Ajax call which has a list of parameters. One of them is a list of objects from the Model. I am having trouble trying to prepare the data to send to the Controller. Currently, it's like this:

const result = await $.ajax({
            type: "POST",
            url: "/PayrollAudit/SaveFundFindings",
            data: {
                'fundFindingsGridRows': DATA,
                'revisionDateExists': @Model.revisionDateExists.ToString().ToLower(),
                'rev': @Model.rev.ToString().ToLower(),
                'deficiency': @Model.deficiency,
                'principalAndInterest': @Model.principalAndInterest,
                'newAudit': @Model.newAudit.ToString().ToLower(),
                'auditStartDate': moment('@Model.auditStartDate').format('MM/DD/YYYY'),
                'billingEntityFindingsTitle': '@Model.billingEntityFindingsTitle',
                'delinquency20': @Model.delinquency20,
                'billingEntityNo': '@Model.billingEntityNo',
                'revisionSentToFundsDate': moment('@Model.revisionSentToFundsDate').format('MM/DD/YYYY'),
                'V3FundOptions': @Model.V3FundOptions
                }
        });

When this is run, I get the following error in the browser debug console:

Uncaught SyntaxError: Unexpected number (at PayrollAudit:2617:66)

Here is what the code looks like in the console:

Controller:

 public IActionResult SaveFundFindings(
        List<FundFindingsGridRow> fundFindingsGridRows,
        bool revisionDateExists,
        bool rev,
        bool settlement,
        decimal deficiency,
        decimal principalAndInterest,
        bool newAudit,
        DateTime auditStartDate,
        string billingEntityFindingsTitle,
        decimal delinquency20,
        string billingEntityNo,
        DateTime revisionSentToFundsDate,
        List<FundOption> V3FundOptions
        )
    {
        // Do things...
    }

FundOption Class:

public partial class FundOption
{
    public string ClientCode { get; set; }
    public string LvwColTitle { get; set; }
    public int ColOrder { get; set; }
    public string DbFieldName { get; set; }
}

I understand that using @Model is going to return the name of the collection and not the objects in the collection. So, what do I need to do here to properly send this data to the controller?

Convert the list to JSON. – Heretic Monkey Sep 28 '22 at 15:03 — Heretic Monkey, Sep 28 '22 at 15:03
@HereticMonkey yes, it was the right track, thanks! – RoastBeast Sep 28 '22 at 15:50 — RoastBeast, Sep 28 '22 at 15:50

Dimitris Maragkos · Accepted Answer · 2022-10-01T07:23:47.663

0

Like @Heretic Monkey suggested in the comments, you need to serialize the list to JSON. Add @using System.Text.Json in your view and then use @Html.Raw(Json.Serialize(Model.V3FundOptions)):

const result = await $.ajax({
    type: "POST",
    url: "/PayrollAudit/SaveFundFindings",
    data: {
        'fundFindingsGridRows': DATA,
        'revisionDateExists': @Model.revisionDateExists.ToString().ToLower(),
        'rev': @Model.rev.ToString().ToLower(),
        'deficiency': @Model.deficiency,
        'principalAndInterest': @Model.principalAndInterest,
        'newAudit': @Model.newAudit.ToString().ToLower(),
        'auditStartDate': moment('@Model.auditStartDate').format('MM/DD/YYYY'),
        'billingEntityFindingsTitle': '@Model.billingEntityFindingsTitle',
        'delinquency20': @Model.delinquency20,
        'billingEntityNo': '@Model.billingEntityNo',
        'revisionSentToFundsDate': moment('@Model.revisionSentToFundsDate').format('MM/DD/YYYY'),
        'V3FundOptions': @Html.Raw(JsonSerializer.Serialize(Model.V3FundOptions))
    }
});

edited Oct 01 '22 at 07:23

answered Sep 28 '22 at 15:14

Dimitris Maragkos

8,932
2
8
26

This is exactly what the duplicate says. – Heretic Monkey Sep 28 '22 at 15:41
That answer is for MVC 3 and uses `Json.Encode`. That doesn't work in `ASP.NET Core`. – Dimitris Maragkos Sep 28 '22 at 15:44
@HereticMonkey provided a good place to look for the method. – RoastBeast Sep 28 '22 at 15:52
@DimitrisMaragkos provided the exact code I needed. Thank you both. – RoastBeast Sep 28 '22 at 15:52

How to pass a list of objects in Razor to an ASP.Net Core Controller via ajax?

1 Answers1