Question

我正在尝试找到一种在ASP.NET Core中使用Devextreme RadioGroup js小部件的方法。

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

<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小部件

1 个答案: