复杂对象的 Blazorise Datagrid 内联编辑

Question

Blazorise Datagrid 支持内联编辑。在我的代码中，基本编辑工作正常，但是当将对象用作父对象中的属性时，编辑无法按预期工作。

下面，

city

值未按预期更新。为了进行正确的编辑，还缺少什么？

代码

<DataGrid Data="forecasts" TItem="WeatherForecast" EditMode="Blazorise.DataGrid.DataGridEditMode.Inline">
     <DataGridCommandColumn TItem="WeatherForecast" CellsEditableOnEditCommand="true"></DataGridCommandColumn>
     <DataGridDateColumn TItem="WeatherForecast" Field="@nameof(WeatherForecast.Date)" Caption="Date" Editable="true"></DataGridDateColumn>
     <DataGridDateColumn TItem="WeatherForecast" Field="@nameof(WeatherForecast.Temperature)" Caption="Temperature" Editable="true"></DataGridDateColumn>
     <DataGridSelectColumn TItem="WeatherForecast" Field="@nameof(WeatherForecast.City)" Caption="City" Editable="true">
         <DisplayTemplate>
             @{
                var name = (context as WeatherForecast).City?.Name;
                @name
              }
         </DisplayTemplate>
         <EditTemplate>
             @{
                 <Select TValue="City"
                         SelectedValue=
                            "@((City)(((CellEditContext)context).CellValue))" 
                         SelectedValueChanged=
                             "@( v => ((CellEditContext)context).CellValue = v)">
                     @foreach (var item in Cities)
                     {
                         <SelectItem TValue="City" Value="@(item)">
                              @item.Name
                         </SelectItem>
                     }
                 </Select>
             }
         </EditTemplate>
     </DataGridSelectColumn>
 </DataGrid>

代码部分

@code {
private List<WeatherForecast> forecasts;
private List<City> Cities;

protected override async Task OnInitializedAsync()
{
    forecasts = await ForecastService.GetForecastAsync(DateTime.Now); // get list of forecast
    Cities = await ForecastService.GetCityListAsync(); // get list of cities
}}
            

模型类

public class WeatherForecast
{
    public int Id { get; set; }
    public DateTime Date { get; set; }
    public int Temperature { get; set; }
    public City City { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Answer 1

尝试此解决方法，因为 Select 组件不支持复杂对象绑定：

<EditTemplate>
    <Select 
        TValue="int"
        SelectedValue="@((int)((City)(((CellEditContext)context).CellValue)).Id)" 
        SelectedValueChanged=
     "@( v => ((CellEditContext)context).CellValue = Cities.First(x=> x.Id == v))">
        @foreach (var item in Cities)
        {
            <SelectItem TValue="int" Value="@(item.Id)">@item.Name</SelectItem>
        }
    </Select>
</EditTemplate>

Answer 2

就我而言，我有这个 json 结构

department {
   ..props ,
   setting:{
    id: <int>,
    name: <string>
   }
}

所以我所做的就是这个，我花了一些时间来搜索并弄清楚。希望它是清楚的。

<DataGridColumn TItem="Department" Field="setting.name" Caption="Settings" Filterable Editable>
    <EditTemplate>
        @{
            // setting the default value to 0 in case of adding new record other wise it takes the value of the field and set it to the select 
            int defaultValue = 0;
            if (context.Item?.setting?.id != null)
            {
                defaultValue = (int)context.Item.setting.id;
            }
        }
        <Select TValue="int" SelectedValue="@defaultValue" SelectedValueChanged="@((v) => {  var setting = settings.Single(z => z.id == v); context.CellValue = setting.name; context.Item.setting = setting; })">
            @foreach (var setting in settings)
            {
                <SelectItem TValue="int" Value="@setting.id">@setting.name</SelectItem>
            }
        </Select>
    </EditTemplate>
</DataGridColumn>