Datagrid Net 8.0 中的 Blazorise 流畅验证

Question

我正在尝试在 blazorise datagrid 中实现流畅的验证。

步骤：

 services
      .AddBlazorise();
 services
     .AddBootstrapProviders()
     .AddFontAwesomeIcons()
 .AddBlazoriseFluentValidation();`

数据网格标记

<DataGrid TItem="ProductBrandVM" class="table table-responsive-lg table-bordered table-striped table-sm mb-0 Dtable"
     Data="@productbrandsResult.Data"
     @bind-SelectedRow="@selectedProductBrand"
     Editable
     Responsive
     UseValidation
     ShowPager
     CommandMode="DataGridCommandMode.ButtonRow"
     RowUpdated="@OnRowUpdatedAsync"
     RowInserted="@OnRowInsertedAsync"
     Filterable FilterMode="DataGridFilterMode.Menu"
     EditMode="editMode">
    <DataGridColumns>
        <DataGridColumn Field="@nameof(ProductBrandVM.ProductBrandCode)" Caption="Code" Editable />
        <DataGridColumn Field="@nameof(ProductBrandVM.ProductBrandName)" Caption="Name" Editable />
     
        <DataGridCommandColumn NewCommandAllowed="false" EditCommandAllowed="false" DeleteCommandAllowed="false" CancelCommandAllowed>
           <SaveCommandTemplate>
               <Button ElementId="btnSave" Type="ButtonType.Submit" Color="Color.Primary" Clicked="@context.Clicked">@context.LocalizationString</Button>
               </SaveCommandTemplate>
               <CancelCommandTemplate>
                   <Button ElementId="btnCancel" Color="Color.Secondary" Clicked="@context.Clicked">@context.LocalizationString</Button>
               </CancelCommandTemplate>
           </DataGridCommandColumn>
       </DataGridColumns>
       <ButtonRowTemplate>
           <Button Color="Color.Success" Clicked="context.NewCommand.Clicked">New</Button>
           <Button Color="Color.Primary" Disabled="(selectedProductBrand is null)" Clicked="context.EditCommand.Clicked">Edit</Button>
           <Button Color="Color.Danger" Disabled="(selectedProductBrand is null)" Clicked="context.DeleteCommand.Clicked">Delete</Button>
           <Button Color="Color.Link" Clicked="context.ClearFilterCommand.Clicked">Clear Filter</Button>
       </ButtonRowTemplate>
</DataGrid>

代码：

 public void CheckName(ValidatorEventArgs validationArgs)
 {
     ValidationRule.IsNotEmpty(validationArgs);

     if (validationArgs.Status == ValidationStatus.Error)
     {
         validationArgs.ErrorText = "Name can't be empty.";
     }
 }

<DataGridColumn Field="@nameof(ProductBrandVM.ProductBrandName)" 
     Validator="@CheckName" Caption="Name" Editable />

当我尝试创建包含空字段的记录时，弹出窗口会自动关闭。

Answer 1

以下是如何修改代码来实现此目的：

更新CheckName方法来执行验证并设置错误消息：

public void CheckName(ValidatorEventArgs validationArgs)
{
    if (string.IsNullOrWhiteSpace((string)validationArgs.Value))
    {
        validationArgs.Status = ValidationStatus.Error;
        validationArgs.ErrorText = "Name can't be empty.";
    }
    else
    {
        validationArgs.Status = ValidationStatus.Success;
        validationArgs.ErrorText = null;
    }
}

处理“保存”按钮单击事件以手动触发验证并防止弹出窗口在验证错误时关闭：

<DataGrid CommandMode="DataGridCommandMode.Dialog">
        <SaveCommandTemplate>
            <Button ElementId="btnSave" Type="ButtonType.Submit" Color="Color.Primary" Clicked="@(() =>
    OnSaveClickedAsync())">@context.LocalizationString</Button>
        </SaveCommandTemplate>
        </DataGrid>




private async Task OnSaveClickedAsync()
{
    var isValid = await ValidateFormAsync();

    if (!isValid)
    {
        // Validation failed, prevent the popup window from closing
        return;
    }

    // Proceed with saving the data
    // ...
}



private async Task<bool> ValidateFormAsync()
{
    var validationResults = await Validation.ValidateAllAsync();
 // Blazorise method to trigger validation

    return validationResults.IsValid;
}

进行这些更改后，尝试创建具有空字段的记录时，弹出窗口将不会自动关闭，并且将为空字段显示验证错误。