Используйте Devextreme JS Widget в ASP.NET Core - PullRequest
Новая
       14

Используйте Devextreme JS Widget в ASP.NET Core

0 голосов
/ 30 июня 2018

Я пытаюсь найти способ использовать виджет Devextreme RadioGroup js с ASP.NET Core.

Я создал этот простой вид: 

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

1 Ответ

0 голосов
/ 30 июня 2018

Следуя совету Стивена, я добавил скрытое поле ввода: 

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

Метод действия теперь корректно получает значение, представленное формой: 

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

    ....
...