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.

Answer 1

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 :)