在 ASP.NET Core 中使用 Devextreme js Widget

Question

我正在尝试找到一种将 Devextreme RadioGroup js 小部件与 ASP.NET 核心一起使用的方法。

我创建了这个简单的视图：

<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>
}

当用户按下继续按钮时 SelectSourceData 操作方法被调用：

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

    return View();
}

我的问题是：是否有可能以某种方式获得在 dxRadioGroup 小部件中选择的值？

Answer 1

根据@Stephen 的建议，我添加了一个隐藏的输入字段：

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

并为值更改事件注册了一个处理函数：

$(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);
        }
    })
});

action 方法现在可以正确获取表单提交的值：

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

    ....

在 ASP.NET Core 中使用 Devextreme js Widget

Use Devextreme js Widget in ASP.NET Core

asp.net-mvc

razor

devextreme

asp.net-core