Use Devextreme js Widget in ASP.NET Core

Question

I'm trying to find a way to use Devextreme RadioGroup js widget with ASP.NET Core.

I've created this simple View:

<form asp-action="SelectSourceData" asp-controller="Home" method="post">
    <div class="form-group">
        <label for="rg-mode">Please Choose Migration Mode</label>
        <div id="rg-mode"></div>
    </div>
    <button type="submit" class="btn btn-primary">Proceed</button>
</form>

@section Scripts {
<script>

    $(function () {
        $("#rg-mode").dxRadioGroup({
            dataSource: modes,
            displayExpr: "text",
            valueExpr: "val",
            value: "by-org"
        })
    });

    var modes = [
        { text: "By Organisation", val: "by-org" },
        { text: "By Contract Type", val: "by-contr" },
        { text: "By Employee", val: "by-emp" },
        { text: "Mixed Mode", val: "mm" }
    ];

</script>
}

When user presses Proceed button SelectSourceData action method is invoked:

[HttpPost]
public ViewResult SelectSourceData(string val)
{
    // get selected value here ... ?

    return View();
}

My question is: is it possible to somehow obtain the value selected in dxRadioGroup widget?

Answer 1

Following @Stephen's advice I added a hidden input field:

<div class="form-group">
    <input id="hdnMode" name="mode" type="hidden" value="by-org" class="form-control" />
    <label for="rg-mode">Please Choose Migration Mode</label>
    <div id="rg-mode"></div>
</div>

and registered a handling function for value changed event:

$(function () {
    $("#rg-mode").dxRadioGroup({
        dataSource: modes,
        displayExpr: "text",
        valueExpr: "val",
        value: "by-org",

        onValueChanged: function (e) {
            var previousValue = e.previousValue;
            var newValue = e.value;

            // Event handling commands go here
            $("#hdnMode").val(newValue);
        }
    })
});

The action method now correctly obtains the value submitted by the form:

[HttpPost]
public ViewResult SelectSourceData(string mode)
{
    // mode argument successfully set to submitted value
    var t = mode;

    ....