Pass a JavaScript value to ASP.NET Core Controller

Question

I have created a JavaScript calculator, it saves the sum and answer the user has typed as an array.

I want to send that array to my ASP.NET Core Controller so I can save it in a database.

I'm running into a lot of cross-talk from the ASP.NET Framework, Hidden Fields, JQuery AJAX, WebAPI etc.

A lot of what I'm reading is how to get data FROM the server, not TO the server.

Any advice is appreciated.

What would the standard way of sending data to the ASP.NET Core controller FROM a JavaScript interface be?

I've done this easily using a form and asp-for="variableName" tags.

<form asp-action="Index" asp-controller="Answers">
<fieldset>
    <select asp-for="var1">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
</fieldset>
<fieldset>
    <select asp-for="sumOperator">
        <option value="+">PLUS</option>
        <option value="-">MINUS</option>
        <option value="/">DIVIDE</option>
        <option value="*">TIMES</option>
    </select>
</fieldset>
<fieldset>
    <select asp-for="var2">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
</fieldset>
<input type="submit" value="Calculate" />
</form>
<p> @ViewBag.var1 @ViewBag.sumOperator @ViewBag.var2 = @ViewBag.answer</p>

But of course, I'd rather have a flashy JavaScript calculator than a drop down form calculator.

You can use Json.stringfy(array) in ajax data and [FromBody] in cotroller to pass array from ajax to controller. — Yiyi You

Shai Cohen Shai Cohen · Accepted Answer · 2020-08-30T02:07:22

I'm assuming you want to do this asynchronously:

$.ajax(
    {
        type: "POST",
        async: true,
        url: '[CONTROLLER_PATH]',
        data: "[PARAM]=" + $.toJSON([YOUR_ARRAY]),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            console.log("SUCCESS:" + msg);
        },
        error: function (msg) {
            console.log("error:" + msg);
        }
    });

This javascript posts data to the server asynchronously.

You will need adapt the following to your needs:

[CONTROLLER_PATH]
data param - this is the Controller's name for the array parameter
success - what, if anything, you want to happen after the data has been posted successfully
failure - I'll this one up to you to figure out :)

Pass a JavaScript value to ASP.NET Core Controller

1 Answers