在 ASP.NET Core 中使用 Devextreme js Widget

Question

我正在尝试找到一种方法将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小部件中选择的值？

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

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

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