Использование виджета Devextreme js в ASP.NET Core

Я пытаюсь найти способ использовать 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?


asp.net-core asp.net-mvc razor devextreme
person Giorgos Betsos    schedule 30.06.2018    source источник
comment
У вас нет элементов управления формой, поэтому отправлять нечего.   -  person    schedule 30.06.2018
comment
@StephenMuecke Могу ли я как-то использовать виджет RadioGroup в качестве элемента управления формой?   -  person Giorgos Betsos    schedule 30.06.2018
comment
Глядя на демо, вариант on может быть для обработки события onValueChanged для установки значения скрытого ввода, который отправляется   -  person    schedule 30.06.2018
comment
На самом деле, глядя на asp.net-core-mvc demos — похоже, они имеют скрытый ввод, сгенерированный @(Html.DevExtreme().RadioGroup()....)   -  person    schedule 30.06.2018
comment
@StephenMuecke Спасибо за ваши замечания, они помогли мне найти решение!   -  person Giorgos Betsos    schedule 30.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

Следуя совету @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);
        }
    })
});

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

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

    ....
person Giorgos Betsos    schedule 30.06.2018