如何在 Blazorise DataGrid EditTemplate 中使用自定义组件

Question

我有一个 Blazorise DataGrid EditTemplate，这样：

            <EditTemplate>
                <Select TValue="int" SelectedValue="@((int)( context.CellValue ))" SelectedValueChanged="@(( v ) => context.CellValue = v)">
                    <SelectItem TValue="int" Value="0">All</SelectItem>
                    <SelectItem TValue="int" Value="1">Option 1</SelectItem>
                    <SelectItem TValue="int" Value="2">Option 2</SelectItem>
                </Select>
            </EditTemplate>

效果很好。我想把它变成我可以重用的自定义组件，所以创建了以下内容：

SourcesEdit.razor：

<Select TValue="int" SelectedValue="@((int)( sourceId ))" SelectedValueChanged="@(( v ) => sourceId = v)">
    <SelectItem TValue="int" Value="0">All</SelectItem>
    <SelectItem TValue="int" Value="1">Option 1</SelectItem>
    <SelectItem TValue="int" Value="2">Option 2</SelectItem>
</Select>


@code {
    [Parameter]
    public int sourceId { get; set; }

}

我打电话给我

            <EditTemplate>
                <SourcesEdit sourceId="@((int)( context.CellValue ))" />
            </EditTemplate>

Select 组件显示并且行为正确，但单击保存后选择未反映在网格中。

我做错了什么？

Answer 1

这是一个代码示例，说明如何创建自定义组件，该组件显示值（部门）列表，供用户在编辑模式下选择。选择的选项是显示模式中显示的值。如果添加新员工，则选择的值为字符串“Select...”

EditComponent.razor

    @typeparam TValue
    
    <Select SelectedValue="SelectedValue" SelectedValueChanged="SelectedValueChanged">
           <SelectItem TValue="string" Value="null">Select...</SelectItem>
            @foreach (var department in Departments)
             {
                 <SelectItem TValue="string" Value="@department">@department</SelectItem>
    
             }
    </Select>
    
    
    @code {
        public List<string> Departments {get;set;} = new List<string> {"Sales","IT", "Accounting"};
    
        [Parameter]
        public TValue SelectedValue { get; set; }
    
    
        [Parameter]
        public EventCallback<TValue> SelectedValueChanged { get; set; }
    }

这就是您将 EditComponent 嵌入到 DataGrid 的 EditTemplate 模板中的方式。复制并测试...

用法：

@using System.ComponentModel.DataAnnotations

<DataGrid TItem="Employee"
        Data="@employees"
        TotalItems="@totalEmployees"
        Editable="true">
    <DataGridColumns>
    <DataGridCommandColumn TItem="Employee" Width="170px">
         <NewCommandTemplate>
             <Button Color="Color.Success" 
                   Clicked="@context.Clicked">New</Button>
         </NewCommandTemplate>
         <EditCommandTemplate>
             <Button Color="Color.Primary" 
                   Clicked="@context.Clicked">Edit</Button>
         </EditCommandTemplate>
         <SaveCommandTemplate>
            <Button Color="Color.Primary" 
                   Clicked="@context.Clicked">Save</Button>
          </SaveCommandTemplate>
          <DeleteCommandTemplate>
            <Button Color="Color.Danger" 
                   Clicked="@context.Clicked">Delete</Button>
          </DeleteCommandTemplate>
        <CancelCommandTemplate>
            <Button Color="Color.Secondary" 
                   Clicked="@context.Clicked">Cancel</Button>
        </CancelCommandTemplate>
                            
    </DataGridCommandColumn>                    

    <DataGridColumn TItem="Employee" Field="@nameof(Employee.ID)" Caption="#" Sortable="false" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="First Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.LastName)" Caption="Last Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Salary)" Caption="Salary" Editable="true">
        <DisplayTemplate>
            @($"{( context as Employee )?.Salary}")
        </DisplayTemplate>
        <EditTemplate>
            <NumericEdit TValue="decimal" Value="@((decimal)(((CellEditContext)context).CellValue))" ValueChanged="@(v=>((CellEditContext)context).CellValue=v)" />
        </EditTemplate>
    </DataGridColumn>

    <DataGridSelectColumn TItem="Employee" Field="@nameof(Employee.Department)" Caption="Department" Editable="true" >
        <DisplayTemplate>
            @($"{( context as Employee ).Department}")
        </DisplayTemplate>
        <EditTemplate>
            <EditComponent TValue="string" SelectedValue="@((string)(((CellEditContext)context)?.CellValue))" 
                                             SelectedValueChanged="@(( v ) => context.CellValue = v)"/>
        </EditTemplate>
    </DataGridSelectColumn>
</DataGridColumns>

    
</DataGrid>

@code {

   private List<Employee> employees = new List<Employee> {
         new Employee{ ID = 1, FirstName = "Nancy", LastName = "Davolio", Salary = 1000.0M, Department = "Sales" },
         new Employee{ ID = 2, FirstName = "Andrew", LastName = "Cohen", Salary = 2000.0M, Department = "IT" },
         new Employee{ ID = 3, FirstName = "David", LastName = "Copperfield", Salary = 3000.0M, Department =  "Accounting" }
     };
  private int totalEmployees = 3;
 
    public class Employee
    {
        public int ID {get;set;}
        public string FirstName {get;set;}
        public string LastName {get;set;}
        public decimal Salary {get;set;}
        
  #nullable enable  
        [Required]
        public string? Department {get;set;}
    #nullable disable   
    }
 }