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
– Yiyi You, Commented Aug 31, 2020 at 8:02

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

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

answered Aug 30, 2020 at 2:07

Shai Cohen

6,2594 gold badges34 silver badges55 bronze badges

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

1 Comment

Scottish Smile Over a year ago

Thanks for the help, I'll give it a shot.

Collectives™ on Stack Overflow

Pass a JavaScript value to ASP.NET Core Controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related