Syncfusion Blazor中SfMultiSelect选择语言后无法保存模型问题

第一种情况：ValueChange赋值导致编辑模式自动关闭且未保存 #

问题原因 #

直接在ValueChange事件中修改绑定的模型属性，会触发Grid内部状态变更检测，导致Grid误判编辑操作完成，提前关闭编辑模式且未触发保存流程。

解决步骤 #

1. 在ValueChange事件中通过args.Cancel = true阻止默认状态变更行为
2. 手动更新模型属性后，调用Grid的EndEditAsync方法并指定保存，确保Grid识别到需要保存的变更

示例代码：

<EditTemplate Context="context">
    <SfMultiSelect TValue="List<int>" TItem="ProgrammingLanguage" 
                   DataSource="@Languages" 
                   ValueChange="@(args => OnLanguageChanged(args, context))">
        <MultiSelectFieldSettings Text="Name" Value="Id" />
    </SfMultiSelect>
</EditTemplate>

@code {
    private SfGrid<YourModel> sfGrid { get; set; }

    private async Task OnLanguageChanged(MultiSelectChangeEventArgs<List<int>, ProgrammingLanguage> args, YourModel context)
    {
        args.Cancel = true; // 阻止默认行为，避免编辑模式意外关闭
        context.SelectedLanguageIds = args.Value;
        await sfGrid.EndEditAsync(true); // 手动触发保存流程
    }
}

第二种情况：@bind-Value抛出跟踪对象错误 #

问题原因 #

该错误由EF Core实体跟踪冲突导致：Grid编辑时直接绑定了被EF跟踪的原实体，MultiSelect的绑定操作触发了实体状态异常变更；或模型属性类型与MultiSelect的TValue不匹配，引发跟踪对象识别异常。

解决步骤 #

1. 使用编辑副本而非原实体：在Grid的OnActionBegin事件中，当操作类型为BeginEdit时，创建实体深拷贝，避免直接修改被EF跟踪的原数据
2. 严格匹配类型：确保MultiSelect的TValue与模型中存储选中值的属性类型完全一致（如模型用List<int>存储ID，TValue必须为List<int>）
3. 关闭不必要的实体跟踪：获取Grid数据源时使用AsNoTracking()，避免EF跟踪编辑中的临时实体

示例1：创建编辑副本

<SfGrid @ref="sfGrid" DataSource="@Data" AllowEditing="true" EditMode="EditMode.Inline">
    <GridEvents OnActionBegin="OnGridActionBegin" TValue="YourModel"></GridEvents>
    <GridColumns>
        <GridColumn Field="@nameof(YourModel.SelectedLanguageIds)" HeaderText="编程语言">
            <EditTemplate Context="context">
                <SfMultiSelect TValue="List<int>" TItem="ProgrammingLanguage" 
                               DataSource="@Languages" 
                               @bind-Value="@((context as YourModel).SelectedLanguageIds)">
                    <MultiSelectFieldSettings Text="Name" Value="Id" />
                </SfMultiSelect>
            </EditTemplate>
        </GridColumn>
    </GridColumns>
</SfGrid>

@code {
    private List<YourModel> Data { get; set; }

    private void OnGridActionBegin(ActionEventArgs<YourModel> args)
    {
        if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)
        {
            // 深拷贝实体，避免修改原跟踪对象
            var editedItem = JsonSerializer.Deserialize<YourModel>(JsonSerializer.Serialize(args.Data));
            args.Data = editedItem;
        }
    }
}

示例2：数据获取时关闭跟踪

// 从数据库获取数据时禁用EF跟踪
Data = await dbContext.YourModels.AsNoTracking().ToListAsync();

通用注意事项 #

• 确认Grid的EditSettings配置正确，已开启AllowEditing并指定合适的EditMode
• 若使用Dialog编辑模式，需确保对话框关闭前完成模型保存逻辑
• 检查SfMultiSelect的DataSource是否正确加载，无空值或类型不匹配问题

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