feat(EditorForm): add IsRenderWhenValueChanged parameter (#7138)

* feat: 增加 IEditorFormValueChanged 接口

* feat: 实现通知功能

* doc: 更新联动示例

* feat: 增加 IsRenderWhenValueChanged 参数

* chore: bump version 10.0.1

* refactor: 重新设计逻辑

* refactor: 精简代码

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/DemoTableEditTemplate.razor

@@ -1,4 +1,4 @@
-@page "/table/edit"
+@page "/table/edit"
 @inject IStringLocalizer<NavMenu> NavMenuLocalizer
 @inject IStringLocalizer<TablesEdit> Localizer
 @inject IStringLocalizer<Foo> LocalizerFoo
@@ -57,13 +57,21 @@
            ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true">
         <TableColumns>
             <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center"></TableColumn>
+            <TableColumn @bind-Field="@context.Education">
+                <EditTemplate Context="v">
+                    <div class="col-12 col-sm-6">
+                    </div>
+                    <div class="col-12 col-sm-6">
+                        <Select @bind-Value="@v.Education"></Select>
+                    </div>
+                    <div class="col-12 col-sm-6">
+                        <Display Value="@GetEducationDesc(v.Education)" ShowLabel="true" DisplayText="@Localizer["TablesEditTemplateDisplayLabel"]"></Display>
+                    </div>
+                </EditTemplate>
+            </TableColumn>
             <TableColumn @bind-Field="@context.Count" Align="Alignment.Right"></TableColumn>
             <TableColumn @bind-Field="@context.Hobby"></TableColumn>
         </TableColumns>
-        <EditTemplate>
-            <!--本例中使用了联动功能，必须封装成组件-->
-            <DemoTableEditTemplate Model="context" />
-        </EditTemplate>
         <EditFooterTemplate>
             <Button Text="Popup" Color="Color.Danger" Icon="fa-regular fa-comment-dots" OnClick="() => OnClick(context)"></Button>
             <DialogCloseButton></DialogCloseButton>

src/BootstrapBlazor.Server/Components/Components/DemoTableEditTemplate.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -40,6 +40,13 @@ public partial class TablesEdit
 
     private bool _useGroup = false;
 
+    private string? GetEducationDesc(EnumEducation? item) => item switch
+    {
+        EnumEducation.Primary => Localizer["TablesEditTemplateDisplayDetail1"],
+        EnumEducation.Middle => Localizer["TablesEditTemplateDisplayDetail2"],
+        _ => ""
+    };
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

src/BootstrapBlazor.Server/Components/Samples/Table/TablesEdit.razor

@@ -5184,8 +5184,8 @@
     "TablesEditItemsIntro": "设置 <code>Items</code> 作为数据源，无需设置 <code>OnSaveAsync</code> <code>OnDeleteAsync</code> 回调委托使用内置处理逻辑进行更新与删除功能",
     "TablesEditItemsDescription": "设置 <code>Items</code> 作为数据源，必须使用双向绑定 <code>@bind-Items</code>, 同时 <code>TItem</code> 泛型约束的类实例，如本例中的 <code>Foo</code> ，需要正确配置 <code>[Key]</code> 标签，否则内置编辑功能无法正常工作；通过设置 <code>IsGroupExtendButtons</code> 参数控制行内功能按钮是否组合显示 默认 <code>true</code>",
     "TablesEditTemplateTitle": "具有单表维护功能的表格",
-    "TablesEditTemplateIntro": "通过设置 <code>EditTemplate</code> 自定义编辑弹窗，如果属性需要联动时必须像本例这样封装成一个独立的组件再放置到模板中",
-    "TablesEditTemplateDescription": "本例中设置 <code>Count</code> 右侧对齐，<code>Complete</code> 列设置为居中对齐，布尔类型列自动渲染成 <code>Switch</code> 组件，点击 <code>学历</code> 下拉框时右侧只读组件描述信息联动更新，<b>此功能必须封装成独立组件</b>",
+    "TablesEditTemplateIntro": "通过设置 <code>EditTemplate</code> 自定义编辑弹窗，<code>10.0.1</code> 版本后支持联动功能",
+    "TablesEditTemplateDescription": "本例中设置 <code>Count</code> 右侧对齐，<code>Complete</code> 列设置为居中对齐，布尔类型列自动渲染成 <code>Switch</code> 组件，点击 <code>学历</code> 下拉框时右侧只读组件描述信息联动更新",
     "TablesEditTemplateDisplayLabel": "详细信息",
     "TablesEditTemplateDisplayDetail1": "小学六年",
     "TablesEditTemplateDisplayDetail2": "初中三年",

src/BootstrapBlazor.Server/Components/Samples/Table/TablesEdit.razor.cs

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.0</Version>
+    <Version>10.0.1</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @typeparam TModel
 @inherits DialogBase<TModel>
 @attribute [BootstrapModuleAutoLoader("Dialog/EditDialog.razor.js", AutoInvokeInit = false, AutoInvokeDispose = false)]
@@ -16,7 +16,9 @@
         }
         else
         {
-            <EditorForm TModel="TModel" Items="Items" ItemChangedType="ItemChangedType" ItemsPerRow="ItemsPerRow" RowType="RowType" LabelAlign="LabelAlign" ShowLabel="ShowLabel" ShowUnsetGroupItemsOnTop="ShowUnsetGroupItemsOnTop">
+            <EditorForm TModel="TModel" Items="Items" ItemChangedType="ItemChangedType" ItemsPerRow="ItemsPerRow" RowType="RowType"
+                        LabelAlign="LabelAlign" ShowLabel="ShowLabel" ShowUnsetGroupItemsOnTop="ShowUnsetGroupItemsOnTop"
+                        IsRenderWhenValueChanged="true">
                 <Buttons>
                     @RenderFooter
                 </Buttons>

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -12,7 +12,7 @@ namespace BootstrapBlazor.Components;
 /// 编辑表单基类
 /// </summary>
 [CascadingTypeParameter(nameof(TModel))]
-public partial class EditorForm<TModel> : IShowLabel
+public partial class EditorForm<TModel> : IShowLabel, IDisposable
 {
     private string? ClassString => CssBuilder.Default("bb-editor")
         .AddClassFromAttributes(AdditionalAttributes)
@@ -159,6 +159,12 @@ public partial class EditorForm<TModel> : IShowLabel
     [NotNull]
     public string? PlaceHolderText { get; set; }
 
+    /// <summary>
+    /// 获得/设置 当值变化时是否重新渲染组件 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsRenderWhenValueChanged { get; set; }
+
     /// <summary>
     /// 获得/设置 级联上下文 EditContext 实例 内置于 EditForm 或者 ValidateForm 时有值
     /// </summary>
@@ -209,6 +215,11 @@ protected override void OnInitialized()
     {
         base.OnInitialized();
 
+        if (CascadedEditContext != null)
+        {
+            CascadedEditContext.OnFieldChanged += NotifyValueChanged;
+        }
+
         if (CascadedEditContext != null && IsSearch is not true)
         {
             var message = Localizer["ModelInvalidOperationExceptionMessage", nameof(EditorForm<TModel>)];
@@ -298,4 +309,25 @@ private RenderFragment AutoGenerateTemplate(IEditorItem item) => builder =>
     private RenderFragment<object>? GetRenderTemplate(IEditorItem item) => IsSearch.Value && item is ITableColumn col
         ? col.SearchTemplate
         : item.EditTemplate;
+
+    private void NotifyValueChanged(object? sender, FieldChangedEventArgs args)
+    {
+        // perf: 判断是否在编辑状态避免不必要的重绘
+        if (IsRenderWhenValueChanged)
+        {
+            StateHasChanged();
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        if (CascadedEditContext != null)
+        {
+            CascadedEditContext.OnFieldChanged -= NotifyValueChanged;
+        }
+        GC.SuppressFinalize(this);
+    }
 }

src/BootstrapBlazor/Components/Dialog/EditDialog.razor

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone