代码之家  ›  专栏  ›  技术社区  ›  Giorgos Betsos

在asp.net核心中使用devextreme js小部件

  •  1
  • Giorgos Betsos  · 技术社区  · 7 年前

    我在想办法用devextreme RadioGroup 带有asp.net核心的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 小装置?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Giorgos Betsos    7 年前

    按照@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;
    
        ....