!3737 doc(#I69EL0): update editdialog demos

* update editdialog demos
2024-12-04 21:20:16 +08:00 · 2023-01-08 06:52:21 +00:00 · 2023-01-08 06:52:21 +00:00 · c19d60d153
commit c19d60d153
parent b791a8cf94
6 changed files with 197 additions and 161 deletions
--- a/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNoRender.razor
+++ b/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNoRender.razor
@ -0,0 +1,63 @@
+@inject IStringLocalizer<EditDialogNoRender> Localizer
+
+<div>
+    <Button Text="@Localizer["PopupButton"]" OnClickWithoutRender="@ShowEditDialog" />
+    <BlockLogger @ref="Trace" class="mt-3" />
+</div>
+
+@code {
+    [NotNull]
+    private BlockLogger? Trace { get; set; }
+
+    [Inject]
+    [NotNull]
+    private DialogService? DialogService { get; set; }
+
+    /// <summary>
+    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
+    /// Foo class is used for Demo test, please download the source code if necessary
+    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
+    /// </summary>
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? FooLocalizer { get; set; }
+
+    private Foo Model { get; set; } = new Foo()
+    {
+        Name = "Name 1234",
+        Address = "Address 1234"
+    };
+
+    private async Task ShowEditDialog()
+    {
+        var items = Utility.GenerateEditorItems<Foo>();
+        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
+        item.Items = Foo.GenerateHobbys(FooLocalizer);
+
+        item = items.First(i => i.GetFieldName() == nameof(Foo.Address));
+        item.Editable = false;
+        item = items.First(i => i.GetFieldName() == nameof(Foo.Count));
+        item.Editable = false;
+
+        var option = new EditDialogOption<Foo>()
+        {
+            Title = "edit dialog",
+            Model = Model,
+            Items = items,
+            ItemsPerRow = 2,
+            RowType = RowType.Inline,
+            OnCloseAsync = () =>
+            {
+                Trace.Log("close button is clicked");
+                return Task.CompletedTask;
+            },
+            OnEditAsync = context =>
+            {
+                Trace.Log("save button is clicked");
+                 return Task.FromResult(true);
+            }
+        };
+
+        await DialogService.ShowEditDialog(option);
+    }
+}
--- a/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNormal.razor
+++ b/src/BootstrapBlazor.Shared/Demos/EditDialog/EditDialogNormal.razor
@ -0,0 +1,88 @@
+@inject IStringLocalizer<EditDialogNormal> Localizer
+
+<div>
+    <Button Text="@Localizer["LeftAlignedButton"]" OnClickWithoutRender="@ShowDialog" />
+    <Button Text="@Localizer["RightAlignedButton"]" OnClickWithoutRender="@ShowAlignDialog" />
+    <BlockLogger @ref="Trace" class="mt-3" />
+</div>
+
+@code {
+    [NotNull]
+    private BlockLogger? Trace { get; set; }
+
+    [Inject]
+    [NotNull]
+    private DialogService? DialogService { get; set; }
+
+    /// <summary>
+    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
+    /// Foo class is used for Demo test, please download the source code if necessary
+    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
+    /// </summary>
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? FooLocalizer { get; set; }
+
+    private Foo Model { get; set; } = new Foo()
+    {
+        Name = "Name 1234",
+        Address = "Address 1234"
+    };
+
+    private async Task ShowDialog()
+    {
+        var items = Utility.GenerateEditorItems<Foo>();
+        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
+        item.Items = Foo.GenerateHobbys(FooLocalizer);
+
+        var option = new EditDialogOption<Foo>()
+        {
+            Title = "edit dialog",
+            Model = Model,
+            Items = items,
+            ItemsPerRow = 2,
+            RowType = RowType.Inline,
+            OnCloseAsync = () =>
+            {
+                Trace.Log("close button is clicked");
+                return Task.CompletedTask;
+            },
+            OnEditAsync = context =>
+            {
+                Trace.Log("save button is clicked");
+                return Task.FromResult(true);
+            }
+        };
+
+        await DialogService.ShowEditDialog(option);
+    }
+
+    private async Task ShowAlignDialog()
+    {
+        var items = Utility.GenerateEditorItems<Foo>();
+        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
+        item.Items = Foo.GenerateHobbys(FooLocalizer);
+
+        var option = new EditDialogOption<Foo>()
+        {
+            Title = "edit dialog",
+            Model = Model,
+            Items = items,
+            ItemsPerRow = 2,
+            RowType = RowType.Inline,
+            LabelAlign = Alignment.Right,
+            OnCloseAsync = () =>
+            {
+                Trace.Log("close button is clicked");
+                return Task.CompletedTask;
+            },
+            OnEditAsync = context =>
+            {
+                Trace.Log("save button is clicked");
+                return Task.FromResult(true);
+            }
+        };
+
+        await DialogService.ShowEditDialog(option);
+    }
+}
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@ -547,23 +547,22 @@
    "P6": "Control the animation duration in milliseconds by setting the <code>Duration</code> parameter"
  },
  "BootstrapBlazor.Shared.Samples.EditDialogs": {
-    "H1": "EditDialog edit popup",
-    "H2": "Automatic rendering of edit popups by binding the data model",
-    "P1": "<code>EditDialog</code> The component is an extension of the <code>Dialog</code> component and is suitable for data popup editing.",
-    "P2": "Inject the service by calling",
-    "P3": "of",
-    "P4": "The method directly pops up the editing dialog box, which greatly reduces the amount of code.",
-    "P5": "Configuration class inheritance",
-    "P6": "For more parameter settings, please click",
-    "P7": "portal",
-    "P8": "Basic usage",
-    "P9": "Automatically generate editable forms for each field of the model by binding the <code>TModel</code> data model",
-    "P10": "Edit popup (left-aligned)",
-    "P11": "Edit popup (right aligned)",
-    "P12": "Setting bound model part property does not show",
-    "P13": "By setting the <code>Editable=false</code> of the <code>IEditorItem</code> instance, the editable pop-up window cannot be edited.",
-    "P14": "Pop-ups",
-    "P15": "EditDialogOption property"
+    "Title": "EditDialog edit popup",
+    "Description": "Automatic rendering of edit popups by binding the data model",
+    "SubDescription": "<code>EditDialog</code> The component is an extension of the <code>Dialog</code> component and is suitable for data popup editing.",
+    "Tip": "Inject the service by calling <code>DialogService</code> of <code>ShowEditDialog</code> The method directly pops up the editing dialog box, which greatly reduces the amount of code. <code>EditDialogOption</code> Configuration class inheritance <code>DialogOption</code>，For more parameter settings, please click <a href=\"dialogs\" target=\"_blank\">[portal]</a>\"",
+    "NormalTitle": "Basic usage",
+    "NormalIntro": "Automatically generate editable forms for each field of the model by binding the <code>TModel</code> data model",
+    "NoRenderTitle": "Setting bound model part property does not show",
+    "NoRenderIntro": "By setting the <code>Editable=false</code> of the <code>IEditorItem</code> instance, the editable pop-up window cannot be edited.",
+    "EditDialogOption": "EditDialogOption property"
+  },
+  "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNormal": {
+    "LeftAlignedButton": "Edit popup (left-aligned)",
+    "RightAlignedButton": "Edit popup (right aligned)"
+  },
+  "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNoRender": {
+    "PopupButton": "Pop-ups"
  },
  "BootstrapBlazor.Shared.Samples.Topologies": {
    "H1": "Topology HMI",
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@ -548,23 +548,22 @@
    "P6": "通过设置 <code>Duration</code> 参数控制动画时长单位为毫秒"
  },
  "BootstrapBlazor.Shared.Samples.EditDialogs": {
-    "H1": "EditDialog 编辑弹窗",
-    "H2": "通过绑定数据模型自动呈现编辑弹窗",
-    "P1": "<code>EditDialog</code> 组件是 <code>Dialog</code> 组件的扩展，适用于数据弹出窗编辑。",
-    "P2": "通过调用注入服务",
-    "P3": "的",
-    "P4": "方法直接弹出编辑对话框，大大减少代码量。",
-    "P5": "配置类继承",
-    "P6": "更多参数设置请点击",
-    "P7": "传送门",
-    "P8": "基础用法",
-    "P9": "通过绑定 <code>TModel</code> 数据模型，自动生成模型各个字段的可编辑表单",
-    "P10": "编辑弹窗(左对齐)",
-    "P11": "编辑弹窗(右对齐)",
-    "P12": "设置绑定模型部分属性不显示",
-    "P13": "通过设置 <code>IEditorItem</code> 实例的 <code>Editable=false</code>, 实现编辑弹窗不可编辑此属性",
-    "P14": "弹窗",
-    "P15": "EditDialogOption 属性"
+    "Title": "EditDialog 编辑弹窗",
+    "Description": "通过绑定数据模型自动呈现编辑弹窗",
+    "SubDescription": "<code>EditDialog</code> 组件是 <code>Dialog</code> 组件的扩展，适用于数据弹出窗编辑。",
+    "Tip": "通过调用注入服务 <code>DialogService</code> 的 <code>ShowEditDialog</code> 方法直接弹出编辑对话框，大大减少代码量。<code>EditDialogOption</code> 配置类继承 <code>DialogOption</code>，更多参数设置请点击 <a href=\"dialogs\" target=\"_blank\">[传送门]</a>\"",
+    "NormalTitle": "基础用法",
+    "NormalIntro": "通过绑定 <code>TModel</code> 数据模型，自动生成模型各个字段的可编辑表单",
+    "NoRenderTitle": "设置绑定模型部分属性不显示",
+    "NoRenderIntro": "通过设置 <code>IEditorItem</code> 实例的 <code>Editable=false</code>, 实现编辑弹窗不可编辑此属性",
+    "EditDialogOption": "EditDialogOption 属性"
+  },
+  "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNormal": {
+    "LeftAlignedButton": "编辑弹窗(左对齐)",
+    "RightAlignedButton": "编辑弹窗(右对齐)"
+  },
+  "BootstrapBlazor.Shared.Demos.EditDialog.EditDialogNoRender": {
+    "PopupButton": "弹窗"
  },
  "BootstrapBlazor.Shared.Samples.Topologies": {
    "H1": "Topology 人机交互界面",
--- a/src/BootstrapBlazor.Shared/Samples/EditDialogs.razor
+++ b/src/BootstrapBlazor.Shared/Samples/EditDialogs.razor
@ -1,22 +1,17 @@
@page "/editdialogs"
+@inject IStringLocalizer<EditDialogs> Localizer

-<h3>@Localizer["H1"]</h3>
-<h4>@Localizer["H2"]</h4>
+<h3>@Localizer["Title"]</h3>
+<h4>@Localizer["Description"]</h4>

-<p>@((MarkupString)Localizer["P1"].Value)</p>
+<p>@((MarkupString)Localizer["SubDescription"].Value)</p>

 <Tips>
-    <p>@Localizer["P2"] <code>DialogService</code> @Localizer["P3"] <code>ShowEditDialog</code> @Localizer["P4"]<code>EditDialogOption</code> @Localizer["P5"] <code>DialogOption</code>，@Localizer["P6"] <a href="dialogs" target="_blank">[@Localizer["P7"]]</a></p>
+    <p>@((MarkupString)Localizer["Tip"].Value)</p>
 </Tips>

-<DemoBlock Title="@Localizer["P8"]" Introduction="@Localizer["P9"]" Name="Normal">
-    <Button Text="@Localizer["P10"]" OnClickWithoutRender="@ShowDialog" />
-    <Button Text="@Localizer["P11"]" OnClickWithoutRender="@ShowAlignDialog" />
-    <BlockLogger @ref="Trace" class="mt-3" />
-</DemoBlock>
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.EditDialog.EditDialogNormal)" />

-<DemoBlock Title="@Localizer["P12"]" Introduction="@Localizer["P13"]" Name="NoRender">
-    <Button Text="@Localizer["P14"]" OnClickWithoutRender="@ShowEditDialog" />
-</DemoBlock>
+<DemoBlock Title="@Localizer["NoRenderTitle"]" Introduction="@Localizer["NoRenderIntro"]" Name="NoRender" Demo="typeof(Demos.EditDialog.EditDialogNoRender)" />

-<AttributeTable Items="@GetAttributes()" Title="@Localizer["P15"]" />
+<AttributeTable Items="@GetAttributes()" Title="@Localizer["EditDialogOption"]" />
--- a/src/BootstrapBlazor.Shared/Samples/EditDialogs.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/EditDialogs.razor.cs
@ -5,127 +5,18 @@
 namespace BootstrapBlazor.Shared.Samples;

 /// <summary>
-/// 
+/// EditDialogs
 /// </summary>
 public sealed partial class EditDialogs
 {
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<EditDialogs>? Localizer { get; set; }
-
-    private Foo Model { get; set; } = new Foo()
-    {
-        Name = "Name 1234",
-        Address = "Address 1234"
-    };
-
-    [Inject]
-    [NotNull]
-    private DialogService? DialogService { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IStringLocalizer<Foo>? FooLocalizer { get; set; }
-
-    [NotNull]
-    private BlockLogger? Trace { get; set; }
-
-    private async Task ShowDialog()
-    {
-        var items = Utility.GenerateEditorItems<Foo>();
-        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
-        item.Items = Foo.GenerateHobbys(FooLocalizer);
-
-        var option = new EditDialogOption<Foo>()
-        {
-            Title = "edit dialog",
-            Model = Model,
-            Items = items,
-            ItemsPerRow = 2,
-            RowType = RowType.Inline,
-            OnCloseAsync = () =>
-            {
-                Trace.Log("close button is clicked");
-                return Task.CompletedTask;
-            },
-            OnEditAsync = context =>
-            {
-                Trace.Log("save button is clicked");
-                return Task.FromResult(true);
-            }
-        };
-
-        await DialogService.ShowEditDialog(option);
-    }
-
-    private async Task ShowAlignDialog()
-    {
-        var items = Utility.GenerateEditorItems<Foo>();
-        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
-        item.Items = Foo.GenerateHobbys(FooLocalizer);
-
-        var option = new EditDialogOption<Foo>()
-        {
-            Title = "edit dialog",
-            Model = Model,
-            Items = items,
-            ItemsPerRow = 2,
-            RowType = RowType.Inline,
-            LabelAlign = Alignment.Right,
-            OnCloseAsync = () =>
-            {
-                Trace.Log("close button is clicked");
-                return Task.CompletedTask;
-            },
-            OnEditAsync = context =>
-            {
-                Trace.Log("save button is clicked");
-                return Task.FromResult(true);
-            }
-        };
-
-        await DialogService.ShowEditDialog(option);
-    }
-
-    private async Task ShowEditDialog()
-    {
-        var items = Utility.GenerateEditorItems<Foo>();
-        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
-        item.Items = Foo.GenerateHobbys(FooLocalizer);
-
-        item = items.First(i => i.GetFieldName() == nameof(Foo.Address));
-        item.Editable = false;
-        item = items.First(i => i.GetFieldName() == nameof(Foo.Count));
-        item.Editable = false;
-
-        var option = new EditDialogOption<Foo>()
-        {
-            Title = "edit dialog",
-            Model = Model,
-            Items = items,
-            ItemsPerRow = 2,
-            RowType = RowType.Inline,
-            OnCloseAsync = () =>
-            {
-                Trace.Log("close button is clicked");
-                return Task.CompletedTask;
-            },
-            OnEditAsync = context =>
-            {
-                Trace.Log("save button is clicked");
-                return Task.FromResult(true);
-            }
-        };
-
-        await DialogService.ShowEditDialog(option);
-    }
-
    /// <summary>
    /// get property method
    /// </summary>
    /// <returns></returns>
-    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+    private static IEnumerable<AttributeItem> GetAttributes()
    {
+        return new AttributeItem[]
+        {
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "Whether to show labels",
@ -196,5 +87,6 @@ public sealed partial class EditDialogs
                ValueList = "None|Left|Center|Right",
                DefaultValue = "None"
            }
-    };
+        };
+    }
 }