ASP.NET Core中DevExtreme LookupFor绑定模型属性提交为null如何解决

问题原因 #

1. 未配置ValueExpr属性：DevExtreme Lookup控件仅配置了DisplayExpr（控制显示文本），未指定ValueExpr（控制提交到后端的字段），控件无法确定需要提交的有效值，导致传值为空。
2. 复杂类型绑定不匹配：你直接将Lookup绑定到Prop复杂类型属性，传统表单默认使用x-www-form-urlencoded格式提交，仅支持传递键值对，ASP.NET Core默认模型绑定无法将单个提交值自动转换为Prop类的实例，最终属性为null。
3. 多余的Value配置：LookupFor强类型绑定会自动读取模型值，手动指定.Value(Model.Prop)属于冗余配置，类型不匹配时反而可能引发绑定异常。

解决方案 #

方案1：使用值类型绑定（推荐，适配传统表单提交） #

该方案无需修改提交逻辑，适配原生表单提交场景：

1. 修改视图模型，将复杂类型属性替换为Prop类的唯一标识字段：

public class PropModule
{
    [Display(Name = "PARAMS")]
    // 替换为你的Prop类主键的实际类型，比如int、Guid、string等
    public int PropId { get; set; }
}

2. 修改Lookup配置，添加ValueExpr指向Prop类的主键字段，同时绑定到新增的值类型属性：

@(Html.DevExtreme().LookupFor(m => m.PropId)
    .DataSource(d => d.RemoteController()
    .LoadUrl("/looks/Getlist"))
    .DisplayExpr("Description")
    // 此处的Id替换为你的Prop类中唯一标识字段的实际名称
    .ValueExpr("Id")
    .Width("100%")
)

3. 后端拿到PropId后，可自行查询数据库获取完整的Prop对象即可。

方案2：完整对象绑定（适配AJAX提交） #

如果确实需要前端直接传递完整Prop对象，可改用JSON格式提交：

1. 修改Lookup配置，设置ValueExpr返回完整对象：

@(Html.DevExtreme().LookupFor(m => m.Prop)
    .DataSource(d => d.RemoteController()
    .LoadUrl("/looks/Getlist"))
    .DisplayExpr("Description")
    .ValueExpr("this")
    .Width("100%")
)

2. 替换原生表单提交为AJAX提交，传递JSON格式数据：

document.querySelector('.formEntity').addEventListener('submit', function(e) {
    e.preventDefault();
    const lookupInstance = DevExpress.ui.dxLookup.getInstance(document.querySelector('[name="Prop"]'));
    const submitData = {
        Prop: lookupInstance.option('value')
    };
    fetch(this.action, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify(submitData)
    }).then(res => res.json()).then(data => {
        // 处理返回逻辑
    });
});

3. 后端Action添加[FromBody]注解启用JSON模型绑定：

public IActionResult Action([FromBody] PropModule Modle)
{
    // 业务逻辑
}

检查项 #

确认/looks/Getlist接口返回的数据源中，所有对象都包含你指定的ValueExpr对应字段，无缺失或大小写不匹配问题。
确认Prop类包含公共无参构造函数，否则模型绑定无法实例化对象会返回null。

内容的提问来源于stack exchange，提问作者hedbisker