From 89a799ece26ec8bbfd71815ae0635c627573400c Mon Sep 17 00:00:00 2001
From: Argo <argo@163.com>
Date: Sun, 1 Jan 2023 13:02:06 +0000
Subject: [PATCH] =?UTF-8?q?!3715=20doc(#I68BXH):=20update=20DemoBlock=20pa?=
 =?UTF-8?q?rameter=20demo=20*=20refactor:=20=E7=A7=BB=E9=99=A4=20Demos=20?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=20*=20chore:=20=E6=9B=B4=E6=96=B0=E6=89=93?=
 =?UTF-8?q?=E5=8C=85=E6=96=87=E4=BB=B6=20*=20chore:=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=20wasm=20=E7=AB=AF=E5=8F=A3=20*=20doc:=20=E6=9B=B4=E6=96=B0=20?=
 =?UTF-8?q?Demo=20=E5=8F=98=E9=87=8F=E5=80=BC=20*=20refactor:=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E4=BB=A3=E7=A0=81=E7=89=87=E6=AE=B5=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=20*=20doc:=20Demo=20=E6=9B=B4=E6=94=B9=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E4=B8=BA=20Type=20*=20doc:=20=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=20DemoComponentConverter=20=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../appsettings.Development.json              |  4 +--
 .../Components/DemoBlock.razor                |  2 +-
 .../Components/DemoBlock.razor.cs             | 12 +++----
 .../Extensions/CacheManagerExtensions.cs      |  2 +-
 .../Extensions/ServicesExtensions.cs          |  3 --
 .../Samples/Ajaxs.razor                       |  4 +--
 .../Samples/Alerts.razor                      | 12 +++----
 .../Samples/AnchorLinks.razor                 |  2 +-
 .../Samples/Anchors.razor                     |  2 +-
 .../Samples/AutoCompletes.razor               | 18 +++++-----
 .../Samples/AutoFills.razor                   |  6 ++--
 .../Samples/AutoRedirects.razor               |  2 +-
 .../Samples/Avatars.razor                     |  8 ++---
 .../Samples/Badges.razor                      |  6 ++--
 .../Samples/BarcodeReaders.razor              |  4 +--
 .../Samples/Blocks.razor                      | 10 +++---
 .../Samples/Breadcrumbs.razor                 |  2 +-
 .../Samples/Buttons.razor                     | 20 +++++------
 .../Samples/Calendars.razor                   | 12 +++----
 .../Samples/Cameras.razor                     |  6 ++--
 .../Samples/Captchas.razor                    |  6 ++--
 .../Samples/Cards.razor                       | 16 ++++-----
 .../Samples/Carousels.razor                   | 22 ++++++------
 .../Samples/Cascaders.razor                   | 16 ++++-----
 .../Samples/CheckboxLists.razor               | 14 ++++----
 .../Samples/Checkboxs.razor                   | 16 ++++-----
 .../Samples/CherryMarkdowns.razor             | 10 +++---
 .../Samples/Circles.razor                     |  8 ++---
 .../Samples/Client.razor                      |  2 +-
 .../Samples/Collapses.razor                   | 10 +++---
 .../Samples/ColorPickers.razor                | 10 +++---
 .../Samples/Consoles.razor                    | 10 +++---
 .../Samples/DateTimePickers.razor             | 28 +++++++--------
 .../Samples/DateTimeRanges.razor              | 16 ++++-----
 .../Samples/Dialogs.razor                     | 36 +++++++++----------
 .../Samples/Dispatches.razor                  |  2 +-
 .../Samples/DropdownWidgets.razor             |  2 +-
 .../Samples/FileIcons.razor                   |  8 ++---
 .../Services/CodeSnippetService.cs            |  4 +--
 .../Services/DemoComponentConverter.cs        | 27 --------------
 .../wwwroot/js/bootstrap.blazor.chart.min.js  |  2 +-
 .../Properties/launchSettings.json            |  2 +-
 .../Properties/launchSettings.json            |  2 +-
 43 files changed, 187 insertions(+), 219 deletions(-)
 delete mode 100644 src/BootstrapBlazor.Shared/Services/DemoComponentConverter.cs

diff --git a/src/BootstrapBlazor.Server/appsettings.Development.json b/src/BootstrapBlazor.Server/appsettings.Development.json
index cc2a4eae9..5676712bb 100644
--- a/src/BootstrapBlazor.Server/appsettings.Development.json
+++ b/src/BootstrapBlazor.Server/appsettings.Development.json
@@ -8,7 +8,7 @@
   },
   "AllowOrigins": "http://localhost:5000",
   "WebsiteOptions": {
-    "ServerUrl": "http://localhost:50853",
-    "WasmUrl": "http://localhost:50855"
+    "ServerUrl": "http://localhost:5053",
+    "WasmUrl": "http://localhost:5055"
   }
 }
diff --git a/src/BootstrapBlazor.Shared/Components/DemoBlock.razor b/src/BootstrapBlazor.Shared/Components/DemoBlock.razor
index da162a1b4..4f04a2a63 100644
--- a/src/BootstrapBlazor.Shared/Components/DemoBlock.razor
+++ b/src/BootstrapBlazor.Shared/Components/DemoBlock.razor
@@ -15,7 +15,7 @@
         {
             <div class="card-footer">
                 <div class="card-footer-code collapse" id="@Id">
-                    <Pre @key="@RazorFileName" CodeFile="@RazorFileName" BlockTitle="@BlockTitle" Demo="@Demo" ShowToolbar="true"></Pre>
+                    <Pre @key="@RazorFileName" CodeFile="@RazorFileName" BlockTitle="@BlockTitle" Demo="@DemoString" ShowToolbar="true"></Pre>
                 </div>
                 <a class="card-footer-control collapsed" href="#@Id" data-bs-toggle="collapse" role="button" aria-label="show code">
                     <i class="fa-solid fa-caret-up"></i>
diff --git a/src/BootstrapBlazor.Shared/Components/DemoBlock.razor.cs b/src/BootstrapBlazor.Shared/Components/DemoBlock.razor.cs
index 8c3314a0c..967474a7e 100644
--- a/src/BootstrapBlazor.Shared/Components/DemoBlock.razor.cs
+++ b/src/BootstrapBlazor.Shared/Components/DemoBlock.razor.cs
@@ -41,7 +41,7 @@ public sealed partial class DemoBlock
     /// 获得/设置 示例代码片段 默认 null 未设置
     /// </summary>
     [Parameter]
-    public string? Demo { get; set; }
+    public Type? Demo { get; set; }
 
     /// <summary>
     /// 获得/设置 是否显示代码块 默认 true 显示
@@ -59,10 +59,6 @@ public sealed partial class DemoBlock
     [NotNull]
     private IStringLocalizer<DemoBlock>? Localizer { get; set; }
 
-    [Inject]
-    [NotNull]
-    private DemoComponentConverter? ComponentConverter { get; set; }
-
     /// <summary>
     /// 获得/设置 友好链接锚点名称
     /// </summary>
@@ -71,6 +67,8 @@ public sealed partial class DemoBlock
 
     private string BlockTitle => Name ?? Title;
 
+    private string? DemoString => Demo?.ToString().Replace("BootstrapBlazor.Shared.", "");
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -86,9 +84,9 @@ public sealed partial class DemoBlock
     {
         builder.AddContent(0, ChildContent);
 
-        if (ComponentConverter.TryParse(Demo, out var t))
+        if (Demo != null)
         {
-            builder.OpenComponent(1, t);
+            builder.OpenComponent(1, Demo);
             builder.CloseComponent();
         }
     };
diff --git a/src/BootstrapBlazor.Shared/Extensions/CacheManagerExtensions.cs b/src/BootstrapBlazor.Shared/Extensions/CacheManagerExtensions.cs
index da06018c4..22ecf073b 100644
--- a/src/BootstrapBlazor.Shared/Extensions/CacheManagerExtensions.cs
+++ b/src/BootstrapBlazor.Shared/Extensions/CacheManagerExtensions.cs
@@ -69,7 +69,7 @@ internal static class CacheManagerExtensions
 
     public static Task<string> GetContentFromDemoAsync(this ICacheManager cache, string demo, Func<ICacheEntry, Task<string>> factory)
     {
-        var key = $"{nameof(GetContentFromDemoAsync)}-Demos-{demo}";
+        var key = $"{nameof(GetContentFromDemoAsync)}-{demo}";
         return cache.GetOrCreateAsync(key, entry => factory(entry));
     }
 }
diff --git a/src/BootstrapBlazor.Shared/Extensions/ServicesExtensions.cs b/src/BootstrapBlazor.Shared/Extensions/ServicesExtensions.cs
index c8596bfc8..e51329246 100644
--- a/src/BootstrapBlazor.Shared/Extensions/ServicesExtensions.cs
+++ b/src/BootstrapBlazor.Shared/Extensions/ServicesExtensions.cs
@@ -26,9 +26,6 @@ public static class ServicesExtensions
         services.AddSingleton(typeof(ILookupService), typeof(DemoLookupService));
         services.AddSingleton<MockDataTableDynamicService>();
 
-        // 增加代码示例服务
-        services.AddSingleton<DemoComponentConverter>();
-
         services.AddSingleton<MenuService>();
         services.AddScoped<FanControllerDataService>();
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Ajaxs.razor b/src/BootstrapBlazor.Shared/Samples/Ajaxs.razor
index 82dc27284..da13e1102 100644
--- a/src/BootstrapBlazor.Shared/Samples/Ajaxs.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Ajaxs.razor
@@ -5,7 +5,7 @@
 
 <h4>@Localizer["AjaxDescribe"]</h4>
 
-<DemoBlock Introduction="@Localizer["NormalIntro"]" Title="@Localizer["NormalTitle"]" Name="Normal" Demo="Ajax.AjaxNormal">
+<DemoBlock Introduction="@Localizer["NormalIntro"]" Title="@Localizer["NormalTitle"]" Name="Normal" Demo="typeof(Demos.Ajax.AjaxNormal)">
     <p>
         <b>@Localizer["NormalB"]</b>
         <div>@((MarkupString)Localizer["NormalDiv"].Value)</div>
@@ -18,7 +18,7 @@
 var result = await AjaxService.InvokeAsync(option);</Pre>
 </DemoBlock>
 
-<DemoBlock Introduction="@Localizer["GotoIntro"]" Title="@Localizer["GotoTitle"]" Name="Goto" Demo="Ajax.AjaxGoto" />
+<DemoBlock Introduction="@Localizer["GotoIntro"]" Title="@Localizer["GotoTitle"]" Name="Goto" Demo="typeof(Demos.Ajax.AjaxGoto)" />
 
 <MethodTable Items="@GetMethods()" />
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Alerts.razor b/src/BootstrapBlazor.Shared/Samples/Alerts.razor
index 47224a48e..6ae18c205 100644
--- a/src/BootstrapBlazor.Shared/Samples/Alerts.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Alerts.razor
@@ -4,17 +4,17 @@
 
 <h4>@SubTitle</h4>
 
-<DemoBlock Title="@BaseUsageText" Introduction="@IntroText1" Name="Normal" Demo="Alert.AlertNormal" />
+<DemoBlock Title="@BaseUsageText" Introduction="@IntroText1" Name="Normal" Demo="typeof(Demos.Alert.AlertNormal)" />
 
-<DemoBlock Title="@CloseButtonUsageText" Introduction="@IntroText2" Name="Close" Demo="Alert.AlertClose" />
+<DemoBlock Title="@CloseButtonUsageText" Introduction="@IntroText2" Name="Close" Demo="typeof(Demos.Alert.AlertClose)" />
 
-<DemoBlock Title="@WithIconUsageText" Introduction="@IntroText3" Name="Icon" Demo="Alert.AlertIcon" />
+<DemoBlock Title="@WithIconUsageText" Introduction="@IntroText3" Name="Icon" Demo="typeof(Demos.Alert.AlertIcon)" />
 
-<DemoBlock Title="@Localizer["ShowBorderTitle"]" Introduction="@Localizer["ShowBorderIntro"]" Name="Border" Demo="Alert.AlertBorder" />
+<DemoBlock Title="@Localizer["ShowBorderTitle"]" Introduction="@Localizer["ShowBorderIntro"]" Name="Border" Demo="typeof(Demos.Alert.AlertBorder)" />
 
-<DemoBlock Title="@Localizer["ShowShadowTitle"]" Introduction="@Localizer["ShowShadowIntro"]" Name="Shadow" Demo="Alert.AlertShadow" />
+<DemoBlock Title="@Localizer["ShowShadowTitle"]" Introduction="@Localizer["ShowShadowIntro"]" Name="Shadow" Demo="typeof(Demos.Alert.AlertShadow)" />
 
-<DemoBlock Title="@ShowBarUsageText" Introduction="@IntroText4" Name="ShowBar" Demo="Alert.AlertShowBar" />
+<DemoBlock Title="@ShowBarUsageText" Introduction="@IntroText4" Name="ShowBar" Demo="typeof(Demos.Alert.AlertShowBar)" />
 
 <AttributeTable Items="@GetAttributes()" />
 
diff --git a/src/BootstrapBlazor.Shared/Samples/AnchorLinks.razor b/src/BootstrapBlazor.Shared/Samples/AnchorLinks.razor
index 833f6d0c0..3573a3e36 100644
--- a/src/BootstrapBlazor.Shared/Samples/AnchorLinks.razor
+++ b/src/BootstrapBlazor.Shared/Samples/AnchorLinks.razor
@@ -4,7 +4,7 @@
 
 <h4>@Localizer["AnchorLinkDescribe1"] <b>Hash</b> @Localizer["AnchorLinkDescribe2"]</h4>
 
-<DemoBlock Title="@Localizer["AnchorLinkDemoTitle"]" Introduction="@Localizer["AnchorLinkDemoIntroduction"]" Name="Normal" Demo="AnchorLink.AnchorLinkNormal"/>
+<DemoBlock Title="@Localizer["AnchorLinkDemoTitle"]" Introduction="@Localizer["AnchorLinkDemoIntroduction"]" Name="Normal" Demo="typeof(Demos.AnchorLink.AnchorLinkNormal)"/>
 
 <Tips class="mt-3">
     <div><code>AnchorLink</code> @Localizer["AnchorLinkTips1"] <code>Id</code> @Localizer["AnchorLinkTips2"]</div>
diff --git a/src/BootstrapBlazor.Shared/Samples/Anchors.razor b/src/BootstrapBlazor.Shared/Samples/Anchors.razor
index e8f20c779..1dd72dfea 100644
--- a/src/BootstrapBlazor.Shared/Samples/Anchors.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Anchors.razor
@@ -4,7 +4,7 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal" demo="Anchor.AnchorNormal"/>
+<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal" Demo="typeof(Demos.Anchor.AnchorNormal)"/>
 
 <AttributeTable Items="@GetAttributes()"/>
 
diff --git a/src/BootstrapBlazor.Shared/Samples/AutoCompletes.razor b/src/BootstrapBlazor.Shared/Samples/AutoCompletes.razor
index 16318f94e..9ba57d829 100644
--- a/src/BootstrapBlazor.Shared/Samples/AutoCompletes.razor
+++ b/src/BootstrapBlazor.Shared/Samples/AutoCompletes.razor
@@ -6,30 +6,30 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]"
-           Name="Normal" Demo="AutoComplete.AutoCompleteNormal"/>
+           Name="Normal" Demo="typeof(Demos.AutoComplete.AutoCompleteNormal)"/>
 
 <DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]"
-           Name="LikeMatch" Demo="AutoComplete.AutoCompleteLikeMatch"/>
+           Name="LikeMatch" Demo="typeof(Demos.AutoComplete.AutoCompleteLikeMatch)"/>
 
 <DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]"
-           Name="NoDataTip" Demo="AutoComplete.AutoCompleteNoDataTip"/>
+           Name="NoDataTip" Demo="typeof(Demos.AutoComplete.AutoCompleteNoDataTip)"/>
 
 <DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]"
-           Name="ValueChanged" Demo="AutoComplete.AutoCompleteValueChanged"/>
+           Name="ValueChanged" Demo="typeof(Demos.AutoComplete.AutoCompleteValueChanged)"/>
 
 <DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]"
-           Name="ShowLabel" Demo="AutoComplete.AutoCompleteShowLabel"/>
+           Name="ShowLabel" Demo="typeof(Demos.AutoComplete.AutoCompleteShowLabel)"/>
 
 <DemoBlock Title="@Localizer["DebounceTitle"]" Introduction="@Localizer["DebounceIntro"]"
-           Name="Debounce" Demo="AutoComplete.AutoCompleteOnSelectedItemChanged"/>
+           Name="Debounce" Demo="typeof(Demos.AutoComplete.AutoCompleteOnSelectedItemChanged)"/>
 
 <DemoBlock Title="@Localizer["OnSelectedItemChangedTitle"]" Introduction="@Localizer["OnSelectedItemChangedIntro"]"
-           Name="OnSelectedItemChanged" Demo="AutoComplete.AutoCompleteDebounce"/>
+           Name="OnSelectedItemChanged" Demo="typeof(Demos.AutoComplete.AutoCompleteDebounce)"/>
 
 <DemoBlock Title="@Localizer["ItemTemplateTitle"]" Introduction="@Localizer["ItemTemplateIntro"]"
-           Name="ItemTemplate" Demo="AutoComplete.AutoCompleteItemTemplate"/>
+           Name="ItemTemplate" Demo="typeof(Demos.AutoComplete.AutoCompleteItemTemplate)"/>
 
 <DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]"
-           Name="Group" Demo="AutoComplete.AutoCompleteGroup"/>
+           Name="Group" Demo="typeof(Demos.AutoComplete.AutoCompleteGroup)"/>
 
 <AttributeTable Items="@GetAttributes()"/>
diff --git a/src/BootstrapBlazor.Shared/Samples/AutoFills.razor b/src/BootstrapBlazor.Shared/Samples/AutoFills.razor
index 206549fbd..4411e073e 100644
--- a/src/BootstrapBlazor.Shared/Samples/AutoFills.razor
+++ b/src/BootstrapBlazor.Shared/Samples/AutoFills.razor
@@ -5,19 +5,19 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]"
-           Name="Normal" Demo="AutoFill.AutoFillNormal">
+           Name="Normal" Demo="typeof(Demos.AutoFill.AutoFillNormal)">
     <div class="mb-3">
         @((MarkupString)@Localizer["NormalDesc"].Value)
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["CustomFilterTitle"]" Introduction="@Localizer["CustomFilterIntro"]"
-           Name="CustomFilter" Demo="AutoFill.AutoFillCustomFilter">
+           Name="CustomFilter" Demo="typeof(Demos.AutoFill.AutoFillCustomFilter)">
     <div class="mb-3">@((MarkupString)Localizer["CustomFilterDesc"].Value)</div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ShowDropdownListOnFocusTitle"]" Introduction="@Localizer["ShowDropdownListOnFocusIntro"]"
-           Name="ShowDropdownListOnFocus" Demo="AutoFill.AutoFillShowDropdownListOnFocus">
+           Name="ShowDropdownListOnFocus" Demo="typeof(Demos.AutoFill.AutoFillShowDropdownListOnFocus)">
     <div class="mb-3">
         @((MarkupString)@Localizer["ShowDropdownListOnFocusDesc"].Value)
     </div>
diff --git a/src/BootstrapBlazor.Shared/Samples/AutoRedirects.razor b/src/BootstrapBlazor.Shared/Samples/AutoRedirects.razor
index 6321bd4b7..c1f27e8f6 100644
--- a/src/BootstrapBlazor.Shared/Samples/AutoRedirects.razor
+++ b/src/BootstrapBlazor.Shared/Samples/AutoRedirects.razor
@@ -5,6 +5,6 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]"
-           Name="Normal" Demo="AutoRedirect.AutoRedirectNormal" />
+           Name="Normal" Demo="typeof(Demos.AutoRedirect.AutoRedirectNormal)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Avatars.razor b/src/BootstrapBlazor.Shared/Samples/Avatars.razor
index d946b02e6..ee6b24ca2 100644
--- a/src/BootstrapBlazor.Shared/Samples/Avatars.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Avatars.razor
@@ -5,12 +5,12 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Avatar.AvatarNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Avatar.AvatarNormal)" />
 
-<DemoBlock Title="@Localizer["IconTitle"]" Introduction="@Localizer["IconIntro"]" Name="Icon" Demo="Avatar.AvatarIcon" />
+<DemoBlock Title="@Localizer["IconTitle"]" Introduction="@Localizer["IconIntro"]" Name="Icon" Demo="typeof(Demos.Avatar.AvatarIcon)" />
 
-<DemoBlock Title="@Localizer["BorderTitle"]" Introduction="@Localizer["BorderIntro"]" Name="Border" Demo="Avatar.AvatarBorder" />
+<DemoBlock Title="@Localizer["BorderTitle"]" Introduction="@Localizer["BorderIntro"]" Name="Border" Demo="typeof(Demos.Avatar.AvatarBorder)" />
 
-<DemoBlock Title="@Localizer["CircletTitle"]" Introduction="@Localizer["CircleIntro"]" Name="Circle" Demo="Avatar.AvatarCircle" />
+<DemoBlock Title="@Localizer["CircletTitle"]" Introduction="@Localizer["CircleIntro"]" Name="Circle" Demo="typeof(Demos.Avatar.AvatarCircle)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Badges.razor b/src/BootstrapBlazor.Shared/Samples/Badges.razor
index 8420dc2d6..c9c061d21 100644
--- a/src/BootstrapBlazor.Shared/Samples/Badges.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Badges.razor
@@ -5,10 +5,10 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicusageTitle"]" Introduction="@Localizer["BasicusageIntro"]" Name="Normal" Demo="Badge.BadgeNormal" />
+<DemoBlock Title="@Localizer["BasicusageTitle"]" Introduction="@Localizer["BasicusageIntro"]" Name="Normal" Demo="typeof(Demos.Badge.BadgeNormal)" />
 
-<DemoBlock Title="@Localizer["PillTitle"]" Introduction='@Localizer["PillIntro"]' Name="Pill" Demo="Badge.BadgePill" />
+<DemoBlock Title="@Localizer["PillTitle"]" Introduction='@Localizer["PillIntro"]' Name="Pill" Demo="typeof(Demos.Badge.BadgePill)" />
 
-<DemoBlock Title="@Localizer["ButtonTitle"]" Introduction="@Localizer["ButtonIntro"]" Name="Button" Demo="Badge.BadgeButton" />
+<DemoBlock Title="@Localizer["ButtonTitle"]" Introduction="@Localizer["ButtonIntro"]" Name="Button" Demo="typeof(Demos.Badge.BadgeButton)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/BarcodeReaders.razor b/src/BootstrapBlazor.Shared/Samples/BarcodeReaders.razor
index 378691a6f..4706fc878 100644
--- a/src/BootstrapBlazor.Shared/Samples/BarcodeReaders.razor
+++ b/src/BootstrapBlazor.Shared/Samples/BarcodeReaders.razor
@@ -12,7 +12,7 @@
     <li>@Localizer["Li4"]</li>
 </ul>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="BarcodeReader.BarcodeReaderNormal">
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.BarcodeReader.BarcodeReaderNormal)">
     <p>@Localizer["Step"]</p>
     <ul class="ul-demo mb-3">
         <li>@Localizer["BasicUsageLi1"]</li>
@@ -21,7 +21,7 @@
     </ul>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ImageTitle"]" Introduction="@Localizer["ImageIntro"]" Name="Image" Demo="BarcodeReader.BarcodeReaderImage">
+<DemoBlock Title="@Localizer["ImageTitle"]" Introduction="@Localizer["ImageIntro"]" Name="Image" Demo="typeof(Demos.BarcodeReader.BarcodeReaderImage)">
     <p>@Localizer["Step"]</p>
     <ul class="ul-demo mb-3">
         <li>@Localizer["ImageLi1"]</li>
diff --git a/src/BootstrapBlazor.Shared/Samples/Blocks.razor b/src/BootstrapBlazor.Shared/Samples/Blocks.razor
index 799ee6dc1..08bd9cbf6 100644
--- a/src/BootstrapBlazor.Shared/Samples/Blocks.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Blocks.razor
@@ -5,15 +5,15 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Block.BlockNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Block.BlockNormal)" />
 
-<DemoBlock Title="@Localizer["TemplateTitle"]" Introduction="@Localizer["TemplateIntro"]" Name="Template" Demo="Block.BlockTemplate" />
+<DemoBlock Title="@Localizer["TemplateTitle"]" Introduction="@Localizer["TemplateIntro"]" Name="Template" Demo="typeof(Demos.Block.BlockTemplate)" />
 
-<DemoBlock Title="@Localizer["AuthorizateTitle"]" Introduction="@Localizer["AuthorizateIntro"]" Name="Authorizate" Demo="Block.BlockAuthorizate" />
+<DemoBlock Title="@Localizer["AuthorizateTitle"]" Introduction="@Localizer["AuthorizateIntro"]" Name="Authorizate" Demo="typeof(Demos.Block.BlockAuthorizate)" />
 
-<DemoBlock Title="@Localizer["UsersTitle"]" Introduction="@Localizer["UsersIntro"]" Name="Users" Demo="Block.BlockUsers" />
+<DemoBlock Title="@Localizer["UsersTitle"]" Introduction="@Localizer["UsersIntro"]" Name="Users" Demo="typeof(Demos.Block.BlockUsers)" />
 
-<DemoBlock Title="@Localizer["RolesTitle"]" Introduction="@Localizer["RolesIntro"]" Name="Roles" Demo="Block.BlockRoles" />
+<DemoBlock Title="@Localizer["RolesTitle"]" Introduction="@Localizer["RolesIntro"]" Name="Roles" Demo="typeof(Demos.Block.BlockRoles)" />
 
 <Tips class="mt-3">
     <p>@((MarkupString)Localizer["Tips"].Value)</p>
diff --git a/src/BootstrapBlazor.Shared/Samples/Breadcrumbs.razor b/src/BootstrapBlazor.Shared/Samples/Breadcrumbs.razor
index 47cad229a..d66c6cfef 100644
--- a/src/BootstrapBlazor.Shared/Samples/Breadcrumbs.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Breadcrumbs.razor
@@ -5,6 +5,6 @@
 
 <h4>@Localizer["Describe"]</h4>
 
-<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal" Demo="Breadcrumb.BreadcrumbNormal" />
+<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal" Demo="typeof(Demos.Breadcrumb.BreadcrumbNormal)" />
 
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Buttons.razor b/src/BootstrapBlazor.Shared/Samples/Buttons.razor
index 638928165..0cc8a69da 100644
--- a/src/BootstrapBlazor.Shared/Samples/Buttons.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Buttons.razor
@@ -5,27 +5,27 @@
 
 <h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal" Demo="Button.ButtonNormal" />
+<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal" Demo="typeof(Demos.Button.ButtonNormal)" />
 
-<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Round" Demo="Button.ButtonRound" />
+<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Round" Demo="typeof(Demos.Button.ButtonRound)" />
 
-<DemoBlock Title="@Localizer["Block3Title"]" Introduction='@Localizer["Block3Intro"]' Name="Outline" Demo="Button.ButtonOutline" />
+<DemoBlock Title="@Localizer["Block3Title"]" Introduction='@Localizer["Block3Intro"]' Name="Outline" Demo="typeof(Demos.Button.ButtonOutline)" />
 
-<DemoBlock Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]' Name="Size" Demo="Button.ButtonSize" />
+<DemoBlock Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]' Name="Size" Demo="typeof(Demos.Button.ButtonSize)" />
 
-<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="IsDisabled" Demo="Button.ButtonIsDisabled" />
+<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="IsDisabled" Demo="typeof(Demos.Button.ButtonIsDisabled)" />
 
-<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Color" Demo="Button.ButtonColor" />
+<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Color" Demo="typeof(Demos.Button.ButtonColor)" />
 
-<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="Icon" Demo="Button.ButtonIcon" />
+<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="Icon" Demo="typeof(Demos.Button.ButtonIcon)" />
 
-<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="Extension" Demo="Button.ButtonExtension" />
+<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="Extension" Demo="typeof(Demos.Button.ButtonExtension)" />
 
-<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="Async" Demo="Button.ButtonAsync">
+<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="Async" Demo="typeof(Demos.Button.ButtonAsync)">
     <p>@((MarkupString)Localizer["ButtonAsyncDescription"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TooltipTitle"]" Introduction="@Localizer["TooltipIntro"]" Name="Tooltip" Demo="Button.ButtonTooltip" />
+<DemoBlock Title="@Localizer["TooltipTitle"]" Introduction="@Localizer["TooltipIntro"]" Name="Tooltip" Demo="typeof(Demos.Button.ButtonTooltip)" />
 
 <AttributeTable Items="@GetAttributes()" />
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Calendars.razor b/src/BootstrapBlazor.Shared/Samples/Calendars.razor
index 30614e2b1..729648630 100644
--- a/src/BootstrapBlazor.Shared/Samples/Calendars.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Calendars.razor
@@ -5,19 +5,19 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Calendar.CalendarNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Calendar.CalendarNormal)" />
 
-<DemoBlock Title="@Localizer["BindTitle"]" Introduction="@Localizer["BindIntro"]" Name="Bind" Demo="Calendar.CalendarBind" />
+<DemoBlock Title="@Localizer["BindTitle"]" Introduction="@Localizer["BindIntro"]" Name="Bind" Demo="typeof(Demos.Calendar.CalendarBind)" />
 
-<DemoBlock Title="@Localizer["CellTemplateTitle"]" Introduction="@Localizer["CellTemplateIntro"]" Name="CellTemplate" Demo="Calendar.CalendarCellTemplate" />
+<DemoBlock Title="@Localizer["CellTemplateTitle"]" Introduction="@Localizer["CellTemplateIntro"]" Name="CellTemplate" Demo="typeof(Demos.Calendar.CalendarCellTemplate)" />
 
-<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewModel" Demo="Calendar.CalendarViewModel" />
+<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewModel" Demo="typeof(Demos.Calendar.CalendarViewModel)" />
 
-<DemoBlock Title="@Localizer["AppTitle"]" Introduction="@Localizer["AppIntro"]" Name="App" Demo="Calendar.CalendarApp">
+<DemoBlock Title="@Localizer["AppTitle"]" Introduction="@Localizer["AppIntro"]" Name="App" Demo="typeof(Demos.Calendar.CalendarApp)">
     <p>@((MarkupString)Localizer["AppText"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["CellTemplateDemoTitle"]" Introduction="@Localizer["CellTemplateDemoIntro"]" Name="CellTemplateDemo" Demo="Calendar.CalendarCellTemplateDemo" />
+<DemoBlock Title="@Localizer["CellTemplateDemoTitle"]" Introduction="@Localizer["CellTemplateDemoIntro"]" Name="CellTemplateDemo" Demo="typeof(Demos.Calendar.CalendarCellTemplateDemo)" />
 
 <AttributeTable Items="@GetAttributes()" />
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Cameras.razor b/src/BootstrapBlazor.Shared/Samples/Cameras.razor
index eec81d802..adf71f407 100644
--- a/src/BootstrapBlazor.Shared/Samples/Cameras.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Cameras.razor
@@ -12,7 +12,7 @@
     <li>@((MarkupString)Localizer["Li1"].Value)</li>
 </ul>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Camera.CameraNormal">
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Camera.CameraNormal)">
     <p>@Localizer["BasicUsageStep"]</p>
     <ul class="ul-demo mb-3">
         <li>@Localizer["BasicUsageLi1"]</li>
@@ -21,8 +21,8 @@
     </ul>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ShowPreviewTitle"]" Introduction="@Localizer["ShowPreviewIntro"]" Name="ShowPreview" Demo="Camera.CameraShowPreview" />
+<DemoBlock Title="@Localizer["ShowPreviewTitle"]" Introduction="@Localizer["ShowPreviewIntro"]" Name="ShowPreview" Demo="typeof(Demos.Camera.CameraShowPreview)" />
 
-<DemoBlock Title="@Localizer["AutoStartTitle"]" Introduction="@Localizer["AutoStartIntro"]" Name="AutoStart" Demo="Camera.CameraAutoStart" />
+<DemoBlock Title="@Localizer["AutoStartTitle"]" Introduction="@Localizer["AutoStartIntro"]" Name="AutoStart" Demo="typeof(Demos.Camera.CameraAutoStart)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Captchas.razor b/src/BootstrapBlazor.Shared/Samples/Captchas.razor
index 18751d701..3a901ddad 100644
--- a/src/BootstrapBlazor.Shared/Samples/Captchas.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Captchas.razor
@@ -5,11 +5,11 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Captcha.CaptchaNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Captcha.CaptchaNormal)" />
 
-<DemoBlock Title="@Localizer["ImageTitle"]" Introduction="" Name="Image" Demo="Captcha.CaptchaImage" />
+<DemoBlock Title="@Localizer["ImageTitle"]" Introduction="" Name="Image" Demo="typeof(Demos.Captcha.CaptchaImage)" />
 
-<DemoBlock Title="@Localizer["ImageCallbackTitle"]" Introduction="@Localizer["ImageCallbackIntro"]" Name="ImageCallback" Demo="Captcha.CaptchaImageCallback" />
+<DemoBlock Title="@Localizer["ImageCallbackTitle"]" Introduction="@Localizer["ImageCallbackIntro"]" Name="ImageCallback" Demo="typeof(Demos.Captcha.CaptchaImageCallback)" />
 
 <AttributeTable Items="@GetAttributes()" />
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Cards.razor b/src/BootstrapBlazor.Shared/Samples/Cards.razor
index 421374362..730984439 100644
--- a/src/BootstrapBlazor.Shared/Samples/Cards.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Cards.razor
@@ -5,22 +5,22 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Card.CardNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Card.CardNormal)" />
 
-<DemoBlock Title="@Localizer["FooterTitle"]" Introduction="@Localizer["FooterIntro"]" Name="Footer" Demo="Card.CardFooter" />
+<DemoBlock Title="@Localizer["FooterTitle"]" Introduction="@Localizer["FooterIntro"]" Name="Footer" Demo="typeof(Demos.Card.CardFooter)" />
 
-<DemoBlock Title="@Localizer["IsCenterTitle"]" Introduction="@Localizer["IsCenterIntro"]" Name="IsCenter" Demo="Card.CardIsCenter" />
+<DemoBlock Title="@Localizer["IsCenterTitle"]" Introduction="@Localizer["IsCenterIntro"]" Name="IsCenter" Demo="typeof(Demos.Card.CardIsCenter)" />
 
-<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color" Demo="Card.CardColor" />
+<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color" Demo="typeof(Demos.Card.CardColor)" />
 
-<DemoBlock Title="@Localizer["CollapsibleTitle"]" Introduction="@Localizer["CollapsibleIntro"]" Name="Collapsible" Demo="Card.CardCollapsible">
+<DemoBlock Title="@Localizer["CollapsibleTitle"]" Introduction="@Localizer["CollapsibleIntro"]" Name="Collapsible" Demo="typeof(Demos.Card.CardCollapsible)">
     <p>@((MarkupString)Localizer["CollapsibleIntroDesc"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["CollapsibleHeaderTemplateTitle"]" Introduction="@Localizer["CollapsibleHeaderTemplateIntro"]" Name="HeaderTemplate" Demo="Card.CardHeaderTemplate" />
+<DemoBlock Title="@Localizer["CollapsibleHeaderTemplateTitle"]" Introduction="@Localizer["CollapsibleHeaderTemplateIntro"]" Name="HeaderTemplate" Demo="typeof(Demos.Card.CardHeaderTemplate)" />
 
-<DemoBlock Title="@Localizer["ShadowTitle"]" Introduction="@Localizer["ShadowIntro"]" Name="Shadow" Demo="Card.CardShadow" />
+<DemoBlock Title="@Localizer["ShadowTitle"]" Introduction="@Localizer["ShadowIntro"]" Name="Shadow" Demo="typeof(Demos.Card.CardShadow)" />
 
-<DemoBlock Title="@Localizer["Compare"]" Name="Compare" Demo="Card.CardCompare" />
+<DemoBlock Title="@Localizer["Compare"]" Name="Compare" Demo="typeof(Demos.Card.CardCompare)" />
 
 <AttributeTable Items="GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Carousels.razor b/src/BootstrapBlazor.Shared/Samples/Carousels.razor
index a35c8ca96..ccb2f44bb 100644
--- a/src/BootstrapBlazor.Shared/Samples/Carousels.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Carousels.razor
@@ -5,28 +5,28 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Carousel.CarouselNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Carousel.CarouselNormal)" />
 
-<DemoBlock Title="@Localizer["ShowControlsTitle"]" Introduction="@Localizer["ShowControlsIntro"]" Name="ShowControls" Demo="Carousel.CarouselShowControls" />
+<DemoBlock Title="@Localizer["ShowControlsTitle"]" Introduction="@Localizer["ShowControlsIntro"]" Name="ShowControls" Demo="typeof(Demos.Carousel.CarouselShowControls)" />
 
-<DemoBlock Title="@Localizer["ShowIndicatorsTitle"]" Introduction="@Localizer["ShowIndicatorsIntro"]" Name="ShowIndicators" Demo="Carousel.CarouselShowIndicators" />
+<DemoBlock Title="@Localizer["ShowIndicatorsTitle"]" Introduction="@Localizer["ShowIndicatorsIntro"]" Name="ShowIndicators" Demo="typeof(Demos.Carousel.CarouselShowIndicators)" />
 
-<DemoBlock Title="@Localizer["FadeTitle"]" Introduction="@Localizer["FadeIntro"]" Name="Fade" Demo="Carousel.CarouselFade" />
+<DemoBlock Title="@Localizer["FadeTitle"]" Introduction="@Localizer["FadeIntro"]" Name="Fade" Demo="typeof(Demos.Carousel.CarouselFade)" />
 
-<DemoBlock Title="@Localizer["CaptionTitle"]" Introduction="@Localizer["CaptionIntro"]" Name="Caption" Demo="Carousel.CarouselCaption" />
+<DemoBlock Title="@Localizer["CaptionTitle"]" Introduction="@Localizer["CaptionIntro"]" Name="Caption" Demo="typeof(Demos.Carousel.CarouselCaption)" />
 
-<DemoBlock Title="@Localizer["IntervalTitle"]" Introduction="@Localizer["IntervalIntro"]" Name="Interval" Demo="Carousel.CarouselInterval" />
+<DemoBlock Title="@Localizer["IntervalTitle"]" Introduction="@Localizer["IntervalIntro"]" Name="Interval" Demo="typeof(Demos.Carousel.CarouselInterval)" />
 
-<DemoBlock Title="@Localizer["CaptionTemplateTitle"]" Introduction="@Localizer["CaptionTemplateIntro"]" Name="CaptionTemplate" Demo="Carousel.CarouselCaptionTemplate" />
+<DemoBlock Title="@Localizer["CaptionTemplateTitle"]" Introduction="@Localizer["CaptionTemplateIntro"]" Name="CaptionTemplate" Demo="typeof(Demos.Carousel.CarouselCaptionTemplate)" />
 
-<DemoBlock Title="@Localizer["CaptionClassTitle"]" Introduction="@Localizer["CaptionClassIntro"]" Name="CaptionClass" Demo="Carousel.CarouselCaptionClass">
+<DemoBlock Title="@Localizer["CaptionClassTitle"]" Introduction="@Localizer["CaptionClassIntro"]" Name="CaptionClass" Demo="typeof(Demos.Carousel.CarouselCaptionClass)">
     <p>@((MarkupString)Localizer["CaptionClassP1"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["OnClickTitle"]" Introduction="@Localizer["OnClickIntro"]" Name="OnClick" Demo="Carousel.CarouselOnClick" />
+<DemoBlock Title="@Localizer["OnClickTitle"]" Introduction="@Localizer["OnClickIntro"]" Name="OnClick" Demo="typeof(Demos.Carousel.CarouselOnClick)" />
 
-<DemoBlock Title="@Localizer["TouchSwipingTitle"]" Introduction="@Localizer["TouchSwipingIntro"]" Name="DisableTouchSwiping" Demo="Carousel.CarouselDisableTouchSwiping" />
+<DemoBlock Title="@Localizer["TouchSwipingTitle"]" Introduction="@Localizer["TouchSwipingIntro"]" Name="DisableTouchSwiping" Demo="typeof(Demos.Carousel.CarouselDisableTouchSwiping)" />
 
-<DemoBlock Title="@Localizer["ChildContentTitle"]" Introduction="@Localizer["ChildContentIntro"]" Name="ChildContent" Demo="Carousel.CarouselChildContent" />
+<DemoBlock Title="@Localizer["ChildContentTitle"]" Introduction="@Localizer["ChildContentIntro"]" Name="ChildContent" Demo="typeof(Demos.Carousel.CarouselChildContent)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Cascaders.razor b/src/BootstrapBlazor.Shared/Samples/Cascaders.razor
index f4a76146d..a3b448e7b 100644
--- a/src/BootstrapBlazor.Shared/Samples/Cascaders.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Cascaders.razor
@@ -3,21 +3,21 @@
 
 <h3>@Localizer["Title"]</h3>
 
-<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal" Demo="Cascader.CascaderNormal" />
+<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal" Demo="typeof(Demos.Cascader.CascaderNormal)" />
 
-<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Disabled" Demo="Cascader.CascaderDisabled" />
+<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Disabled" Demo="typeof(Demos.Cascader.CascaderDisabled)" />
 
-<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Bind" Demo="Cascader.CascaderBind" />
+<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Bind" Demo="typeof(Demos.Cascader.CascaderBind)" />
 
-<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="ValidateForm" Demo="Cascader.CascaderValidateForm" />
+<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="ValidateForm" Demo="typeof(Demos.Cascader.CascaderValidateForm)" />
 
-<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Color" Demo="Cascader.CascaderColor" />
+<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Color" Demo="typeof(Demos.Cascader.CascaderColor)" />
 
-<DemoBlock Title="@Localizer["BlockParentSelectableTitle"]" Introduction="@Localizer["BlockParentSelectableIntro"]" Name="ParentSelectable" Demo="Cascader.CascaderParentSelectable" />
+<DemoBlock Title="@Localizer["BlockParentSelectableTitle"]" Introduction="@Localizer["BlockParentSelectableIntro"]" Name="ParentSelectable" Demo="typeof(Demos.Cascader.CascaderParentSelectable)" />
 
-<DemoBlock Title="@Localizer["BlockShowFullLevelsTitle"]" Introduction="@Localizer["BlockShowFullLevelsIntro"]" Name="ShowFullLevels" Demo="Cascader.CascaderShowFullLevels" />
+<DemoBlock Title="@Localizer["BlockShowFullLevelsTitle"]" Introduction="@Localizer["BlockShowFullLevelsIntro"]" Name="ShowFullLevels" Demo="typeof(Demos.Cascader.CascaderShowFullLevels)" />
 
-<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Labels" Demo="Cascader.CascaderLabels">
+<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Labels" Demo="typeof(Demos.Cascader.CascaderLabels)">
     <p>@((MarkupString)Localizer["Description"].Value)</p>
 </DemoBlock>
 
diff --git a/src/BootstrapBlazor.Shared/Samples/CheckboxLists.razor b/src/BootstrapBlazor.Shared/Samples/CheckboxLists.razor
index 51c28e955..95ed2b114 100644
--- a/src/BootstrapBlazor.Shared/Samples/CheckboxLists.razor
+++ b/src/BootstrapBlazor.Shared/Samples/CheckboxLists.razor
@@ -4,7 +4,7 @@
 
 <h4>@Localizer["CheckboxListsTip"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="CheckboxList.CheckboxListNormal">
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.CheckboxList.CheckboxListNormal)">
     <ul class="ul-demo mb-3">
         <li>@((MarkupString)Localizer["NormalTips1"].Value)</li>
         <li>@((MarkupString)Localizer["NormalTips2"].Value)</li>
@@ -12,27 +12,27 @@
     </ul>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="CheckboxList.CheckboxListValidateForm">
+<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="typeof(Demos.CheckboxList.CheckboxListValidateForm)">
     <p>@((MarkupString)Localizer["ValidateFormTips1"].Value)</p>
     <p>@((MarkupString)Localizer["ValidateFormTips2"].Value)</p>
     <p>@((MarkupString)Localizer["ValidateFormTips3"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel" Demo="CheckboxList.CheckboxListShowLabel">
+<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel" Demo="typeof(Demos.CheckboxList.CheckboxListShowLabel)">
     <p>@((MarkupString)Localizer["ShowLabelTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["EnumTitle"]" Introduction="@Localizer["EnumIntro"]" Name="Enum" Demo="CheckboxList.CheckboxListEnum">
+<DemoBlock Title="@Localizer["EnumTitle"]" Introduction="@Localizer["EnumIntro"]" Name="Enum" Demo="typeof(Demos.CheckboxList.CheckboxListEnum)">
     <p>@((MarkupString)Localizer["EnumTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["NoBorderTitle"]" Introduction="@Localizer["NoBorderIntro"]" Name="NoBorder" Demo="CheckboxList.CheckboxListNoBorder">
+<DemoBlock Title="@Localizer["NoBorderTitle"]" Introduction="@Localizer["NoBorderIntro"]" Name="NoBorder" Demo="typeof(Demos.CheckboxList.CheckboxListNoBorder)">
     <p>@Localizer["NoBorderTip"]</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["VerticalTitle"]" Introduction="@Localizer["VerticalIntro"]" Name="Vertical" Demo="CheckboxList.CheckboxListVertical" />
+<DemoBlock Title="@Localizer["VerticalTitle"]" Introduction="@Localizer["VerticalIntro"]" Name="Vertical" Demo="typeof(Demos.CheckboxList.CheckboxListVertical)" />
 
-<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled" Demo="CheckboxList.CheckboxListDisabled" />
+<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled" Demo="typeof(Demos.CheckboxList.CheckboxListDisabled)" />
 
 <AttributeTable Items="@GetAttributes()" />
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Checkboxs.razor b/src/BootstrapBlazor.Shared/Samples/Checkboxs.razor
index eb670dc71..7f4942e42 100644
--- a/src/BootstrapBlazor.Shared/Samples/Checkboxs.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Checkboxs.razor
@@ -5,23 +5,23 @@
 
 <h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="Checkbox.CheckboxNormal" />
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.Checkbox.CheckboxNormal)" />
 
-<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled" Demo="Checkbox.CheckboxDisabled" />
+<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled" Demo="typeof(Demos.Checkbox.CheckboxDisabled)" />
 
-<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel" Demo="Checkbox.CheckboxShowLabel" />
+<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel" Demo="typeof(Demos.Checkbox.CheckboxShowLabel)" />
 
-<DemoBlock Title="@Localizer["DisplayTextTitle"]" Introduction="@Localizer["DisplayTextIntro"]" Name="DisplayText" Demo="Checkbox.CheckboxDisplayText" />
+<DemoBlock Title="@Localizer["DisplayTextTitle"]" Introduction="@Localizer["DisplayTextIntro"]" Name="DisplayText" Demo="typeof(Demos.Checkbox.CheckboxDisplayText)" />
 
-<DemoBlock Title="@Localizer["ShowAfterLabelTitle"]" Introduction="@Localizer["ShowAfterLabelIntro"]" Name="ShowAfterLabel" Demo="Checkbox.CheckboxShowAfterLabel">
+<DemoBlock Title="@Localizer["ShowAfterLabelTitle"]" Introduction="@Localizer["ShowAfterLabelIntro"]" Name="ShowAfterLabel" Demo="typeof(Demos.Checkbox.CheckboxShowAfterLabel)">
     <p>@((MarkupString)Localizer["ShowAfterLabelDescription"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["OnStateChangedTitle"]" Introduction="@Localizer["OnStateChangedIntro"]" Name="OnStateChanged" Demo="Checkbox.CheckboxOnStateChanged" />
+<DemoBlock Title="@Localizer["OnStateChangedTitle"]" Introduction="@Localizer["OnStateChangedIntro"]" Name="OnStateChanged" Demo="typeof(Demos.Checkbox.CheckboxOnStateChanged)" />
 
-<DemoBlock Title="@Localizer["BindStringTitle"]" Introduction="@Localizer["BindStringIntro"]" Name="BindString" Demo="Checkbox.CheckboxBindString" />
+<DemoBlock Title="@Localizer["BindStringTitle"]" Introduction="@Localizer["BindStringIntro"]" Name="BindString" Demo="typeof(Demos.Checkbox.CheckboxBindString)" />
 
-<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="Checkbox.CheckboxValidateForm">
+<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="typeof(Demos.Checkbox.CheckboxValidateForm)">
     <p>@((MarkupString)Localizer["ValidateFormDescription"].Value)</p>
 </DemoBlock>
 
diff --git a/src/BootstrapBlazor.Shared/Samples/CherryMarkdowns.razor b/src/BootstrapBlazor.Shared/Samples/CherryMarkdowns.razor
index c6c8028a0..61cec4040 100644
--- a/src/BootstrapBlazor.Shared/Samples/CherryMarkdowns.razor
+++ b/src/BootstrapBlazor.Shared/Samples/CherryMarkdowns.razor
@@ -3,14 +3,14 @@
 <h3>@Localizer["Header"]</h3>
 <h4>@Localizer["Tip"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="CherryMarkdown.CherryMarkdownNormal" />
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.CherryMarkdown.CherryMarkdownNormal)" />
 
-<DemoBlock Title="@Localizer["FileUploadTitle"]" Introduction="@Localizer["FileUploadIntro"]" Name="FileUpload" Demo="CherryMarkdown.CherryMarkdownFileUpload" />
+<DemoBlock Title="@Localizer["FileUploadTitle"]" Introduction="@Localizer["FileUploadIntro"]" Name="FileUpload" Demo="typeof(Demos.CherryMarkdown.CherryMarkdownFileUpload)" />
 
-<DemoBlock Title="@Localizer["CustomTitle"]" Introduction="@Localizer["CustomIntro"]" Name="Custom" Demo="CherryMarkdown.CherryMarkdownCustom" />
+<DemoBlock Title="@Localizer["CustomTitle"]" Introduction="@Localizer["CustomIntro"]" Name="Custom" Demo="typeof(Demos.CherryMarkdown.CherryMarkdownCustom)" />
 
-<DemoBlock Title="@Localizer["ViewTitle"]" Introduction="@Localizer["ViewIntro"]" Name="View" Demo="CherryMarkdown.CherryMarkdownView" />
+<DemoBlock Title="@Localizer["ViewTitle"]" Introduction="@Localizer["ViewIntro"]" Name="View" Demo="typeof(Demos.CherryMarkdown.CherryMarkdownView)" />
 
-<DemoBlock Title="@Localizer["ApiTitle"]" Introduction="@Localizer["ApiIntro"]" Name="Api" Demo="CherryMarkdown.CherryMarkdownApi" />
+<DemoBlock Title="@Localizer["ApiTitle"]" Introduction="@Localizer["ApiIntro"]" Name="Api" Demo="typeof(Demos.CherryMarkdown.CherryMarkdownApi)" />
 
 <AttributeTable Items="GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Circles.razor b/src/BootstrapBlazor.Shared/Samples/Circles.razor
index ea6862b8c..e9d39917a 100644
--- a/src/BootstrapBlazor.Shared/Samples/Circles.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Circles.razor
@@ -10,12 +10,12 @@
     <li>@Localizer["CircleTips2"]</li>
 </ol>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Circle.CircleNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Circle.CircleNormal)" />
 
-<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color" Demo="Circle.CircleColor" />
+<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color" Demo="typeof(Demos.Circle.CircleColor)" />
 
-<DemoBlock Title="@Localizer["StrokeWidthTitle"]" Introduction="@Localizer["StrokeWidthIntro"]" Name="StrokeWidth" Demo="Circle.CircleStrokeWidth" />
+<DemoBlock Title="@Localizer["StrokeWidthTitle"]" Introduction="@Localizer["StrokeWidthIntro"]" Name="StrokeWidth" Demo="typeof(Demos.Circle.CircleStrokeWidth)" />
 
-<DemoBlock Title="@Localizer["ChildContentTitle"]" Introduction="@Localizer["ChildContentIntro"]" Name="ChildContent" Demo="Circle.CircleChildContent" />
+<DemoBlock Title="@Localizer["ChildContentTitle"]" Introduction="@Localizer["ChildContentIntro"]" Name="ChildContent" Demo="typeof(Demos.Circle.CircleChildContent)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Client.razor b/src/BootstrapBlazor.Shared/Samples/Client.razor
index 9f8b635b4..8bf06e611 100644
--- a/src/BootstrapBlazor.Shared/Samples/Client.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Client.razor
@@ -5,7 +5,7 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Client.ClientNormal">
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Client.ClientNormal)">
     <p>@Localizer["BasicUsageP1"]</p>
     <div class="mb-3">
         <p>@((MarkupString)Localizer["BasicUsageP2"].Value)</p>
diff --git a/src/BootstrapBlazor.Shared/Samples/Collapses.razor b/src/BootstrapBlazor.Shared/Samples/Collapses.razor
index e8014da73..453c4cbf2 100644
--- a/src/BootstrapBlazor.Shared/Samples/Collapses.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Collapses.razor
@@ -5,14 +5,14 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="Collapse.CollapseNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.Collapse.CollapseNormal)" />
 
-<DemoBlock Title="@Localizer["AccordionTitle"]" Introduction="@Localizer["AccordionIntro"]" Name="Accordion" Demo="Collapse.CollapseAccordion" />
+<DemoBlock Title="@Localizer["AccordionTitle"]" Introduction="@Localizer["AccordionIntro"]" Name="Accordion" Demo="typeof(Demos.Collapse.CollapseAccordion)" />
 
-<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color" Demo="Collapse.CollapseColor" />
+<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color" Demo="typeof(Demos.Collapse.CollapseColor)" />
 
-<DemoBlock Title="@Localizer["ItemsTitle"]" Introduction="@Localizer["ItemsIntro"]" Name="Items" Demo="Collapse.CollapseItems" />
+<DemoBlock Title="@Localizer["ItemsTitle"]" Introduction="@Localizer["ItemsIntro"]" Name="Items" Demo="typeof(Demos.Collapse.CollapseItems)" />
 
-<DemoBlock Title="@Localizer["IconTitle"]" Introduction="@Localizer["IconIntro"]" Name="Icon" Demo="Collapse.CollapseIcon" />
+<DemoBlock Title="@Localizer["IconTitle"]" Introduction="@Localizer["IconIntro"]" Name="Icon" Demo="typeof(Demos.Collapse.CollapseIcon)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/ColorPickers.razor b/src/BootstrapBlazor.Shared/Samples/ColorPickers.razor
index 008d69851..fc6f6cc99 100644
--- a/src/BootstrapBlazor.Shared/Samples/ColorPickers.razor
+++ b/src/BootstrapBlazor.Shared/Samples/ColorPickers.razor
@@ -5,16 +5,16 @@
 
 <h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="ColorPicker.ColorPickerNormal" />
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.ColorPicker.ColorPickerNormal)" />
 
-<DemoBlock Title="@Localizer["ValueTitle"]" Introduction="@Localizer["ValueIntro"]" Name="Value" Demo="ColorPicker.ColorPickerValue">
+<DemoBlock Title="@Localizer["ValueTitle"]" Introduction="@Localizer["ValueIntro"]" Name="Value" Demo="typeof(Demos.ColorPicker.ColorPickerValue)">
     <p>@((MarkupString)Localizer["ValueDescription"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue" Demo="ColorPicker.ColorPickerBindValue" />
+<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue" Demo="typeof(Demos.ColorPicker.ColorPickerBindValue)" />
 
-<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled" Demo="ColorPicker.ColorPickerDisabled" />
+<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled" Demo="typeof(Demos.ColorPicker.ColorPickerDisabled)" />
 
-<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="ColorPicker.ColorPickerValidateForm" />
+<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="typeof(Demos.ColorPicker.ColorPickerValidateForm)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Consoles.razor b/src/BootstrapBlazor.Shared/Samples/Consoles.razor
index 8e29b2bc6..4976e3c94 100644
--- a/src/BootstrapBlazor.Shared/Samples/Consoles.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Consoles.razor
@@ -4,17 +4,17 @@
 
 <h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="Console.ConsoleNormal" />
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.Console.ConsoleNormal)" />
 
-<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color" Demo="Console.ConsoleColor" />
+<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color" Demo="typeof(Demos.Console.ConsoleColor)" />
 
-<DemoBlock Title="@Localizer["IsAutoScrollTitle"]" Introduction="@Localizer["IsAutoScrollIntro"]" Name="IsAutoScroll" Demo="Console.ConsoleIsAutoScroll">
+<DemoBlock Title="@Localizer["IsAutoScrollTitle"]" Introduction="@Localizer["IsAutoScrollIntro"]" Name="IsAutoScroll" Demo="typeof(Demos.Console.ConsoleIsAutoScroll)">
     <p class="mt-3">@((MarkupString)Localizer["IsAutoScrollDescription"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["OnClearTitle"]" Introduction="@Localizer["OnClearIntro"]" Name="OnClear" Demo="Console.ConsoleOnClear" />
+<DemoBlock Title="@Localizer["OnClearTitle"]" Introduction="@Localizer["OnClearIntro"]" Name="OnClear" Demo="typeof(Demos.Console.ConsoleOnClear)" />
 
-<DemoBlock Title="@Localizer["ShowAutoScrollTitle"]" Introduction="@Localizer["ShowAutoScrollIntro"]" Name="ShowAutoScroll" Demo="Console.ConsoleShowAutoScroll">
+<DemoBlock Title="@Localizer["ShowAutoScrollTitle"]" Introduction="@Localizer["ShowAutoScrollIntro"]" Name="ShowAutoScroll" Demo="typeof(Demos.Console.ConsoleShowAutoScroll)">
     <p>@((MarkupString)Localizer["ShowAutoScrollDescription"].Value)</p>
 </DemoBlock>
 
diff --git a/src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor
index 0db3ee507..68d7c76be 100644
--- a/src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor
+++ b/src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor
@@ -4,40 +4,40 @@
 
 <h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="DateTimePicker.DateTimePickerNormal" />
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.DateTimePicker.DateTimePickerNormal)" />
 
-<DemoBlock Title="@Localizer["ValueChangedTitle"]" Introduction="@Localizer["ValueChangedIntro"]" Name="ValueChanged" Demo="DateTimePicker.DateTimePickerValueChanged" />
+<DemoBlock Title="@Localizer["ValueChangedTitle"]" Introduction="@Localizer["ValueChangedIntro"]" Name="ValueChanged" Demo="typeof(Demos.DateTimePicker.DateTimePickerValueChanged)" />
 
-<DemoBlock Title="@Localizer["TimeTitle"]" Introduction="@Localizer["TimeIntro"]" Name="Time" Demo="DateTimePicker.DateTimePickerTime" />
+<DemoBlock Title="@Localizer["TimeTitle"]" Introduction="@Localizer["TimeIntro"]" Name="Time" Demo="typeof(Demos.DateTimePicker.DateTimePickerTime)" />
 
-<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="DateTimePicker.DateTimePickerValidateForm" />
+<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="typeof(Demos.DateTimePicker.DateTimePickerValidateForm)" />
 
-<DemoBlock Title="@Localizer["DateTitle"]" Introduction="@Localizer["DateIntro"]" Name="Date" Demo="DateTimePicker.DateTimePickerDate" />
+<DemoBlock Title="@Localizer["DateTitle"]" Introduction="@Localizer["DateIntro"]" Name="Date" Demo="typeof(Demos.DateTimePicker.DateTimePickerDate)" />
 
-<DemoBlock Title="@Localizer["PlacementTitle"]" Introduction="@Localizer["PlacementIntro"]" Name="Placement" Demo="DateTimePicker.DateTimePickerPlacement" />
+<DemoBlock Title="@Localizer["PlacementTitle"]" Introduction="@Localizer["PlacementIntro"]" Name="Placement" Demo="typeof(Demos.DateTimePicker.DateTimePickerPlacement)" />
 
-<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewMode" Demo="DateTimePicker.DateTimePickerViewMode">
+<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewMode" Demo="typeof(Demos.DateTimePicker.DateTimePickerViewMode)">
     <p>@((MarkupString)Localizer["ViewModeTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["NullValueTitle"]" Introduction="@Localizer["NullValueIntro"]" Name="NullValue" Demo="DateTimePicker.DateTimePickerNullValue">
+<DemoBlock Title="@Localizer["NullValueTitle"]" Introduction="@Localizer["NullValueIntro"]" Name="NullValue" Demo="typeof(Demos.DateTimePicker.DateTimePickerNullValue)">
     <p>@((MarkupString)Localizer["NullValueTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel" Demo="DateTimePicker.DateTimePickerShowLabel">
+<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel" Demo="typeof(Demos.DateTimePicker.DateTimePickerShowLabel)">
     <p>@((MarkupString)Localizer["ShowLabelTip1"].Value)</p>
     <p>@((MarkupString)Localizer["ShowLabelTip2"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["DisalbedTitle"]" Introduction="@Localizer["DisalbedIntro"]" Name="Disalbed" Demo="DateTimePicker.DateTimePickerDisalbed" />
+<DemoBlock Title="@Localizer["DisalbedTitle"]" Introduction="@Localizer["DisalbedIntro"]" Name="Disalbed" Demo="typeof(Demos.DateTimePicker.DateTimePickerDisalbed)" />
 
-<DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar" Demo="DateTimePicker.DateTimePickerShowSidebar" />
+<DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar" Demo="typeof(Demos.DateTimePicker.DateTimePickerShowSidebar)" />
 
-<DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue" Demo="DateTimePicker.DateTimePickerMinValue" />
+<DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue" Demo="typeof(Demos.DateTimePicker.DateTimePickerMinValue)" />
 
-<DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose" Demo="DateTimePicker.DateTimePickerAutoClose" />
+<DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose" Demo="typeof(Demos.DateTimePicker.DateTimePickerAutoClose)" />
 
-<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group" Demo="DateTimePicker.DateTimePickerGroup" />
+<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group" Demo="typeof(Demos.DateTimePicker.DateTimePickerGroup)" />
 
 <AttributeTable Items="@GetAttributes()" />
 
diff --git a/src/BootstrapBlazor.Shared/Samples/DateTimeRanges.razor b/src/BootstrapBlazor.Shared/Samples/DateTimeRanges.razor
index dc5788a93..6f8cf8116 100644
--- a/src/BootstrapBlazor.Shared/Samples/DateTimeRanges.razor
+++ b/src/BootstrapBlazor.Shared/Samples/DateTimeRanges.razor
@@ -5,25 +5,25 @@
 
 <h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="DateTimeRange.DateTimeRangeNormal" />
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.DateTimeRange.DateTimeRangeNormal)" />
 
-<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue" Demo="DateTimeRange.DateTimeRangeBindValue" />
+<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue" Demo="typeof(Demos.DateTimeRange.DateTimeRangeBindValue)" />
 
-<DemoBlock Title="@Localizer["MaxMinValueTitle"]" Introduction="@Localizer["MaxMinValueIntro"]" Name="MaxMinValue" Demo="DateTimeRange.DateTimeRangeMaxMinValue" />
+<DemoBlock Title="@Localizer["MaxMinValueTitle"]" Introduction="@Localizer["MaxMinValueIntro"]" Name="MaxMinValue" Demo="typeof(Demos.DateTimeRange.DateTimeRangeMaxMinValue)" />
 
-<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled" Demo="DateTimeRange.DateTimeRangeDisabled" />
+<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="Disabled" Demo="typeof(Demos.DateTimeRange.DateTimeRangeDisabled)" />
 
-<DemoBlock Title="@Localizer["SidebarTitle"]" Introduction="@Localizer["SidebarIntro"]" Name="Sidebar" Demo="DateTimeRange.DateTimeRangeSidebar">
+<DemoBlock Title="@Localizer["SidebarTitle"]" Introduction="@Localizer["SidebarIntro"]" Name="Sidebar" Demo="typeof(Demos.DateTimeRange.DateTimeRangeSidebar)">
     <p>@((MarkupString)Localizer["SidebarTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TodayTitle"]" Introduction="@Localizer["TodayIntro"]" Name="Today" Demo="DateTimeRange.DateTimeRangeToday">
+<DemoBlock Title="@Localizer["TodayTitle"]" Introduction="@Localizer["TodayIntro"]" Name="Today" Demo="typeof(Demos.DateTimeRange.DateTimeRangeToday)">
     <p>@((MarkupString)Localizer["TodayTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="DateTimeRange.DateTimeRangeValidateForm" />
+<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="typeof(Demos.DateTimeRange.DateTimeRangeValidateForm)" />
 
-<DemoBlock Title="@Localizer["AutoCloseTitle"]" Introduction="@Localizer["AutoCloseIntro"]" Name="AutoClose" Demo="DateTimeRange.DateTimeRangeAutoClose" />
+<DemoBlock Title="@Localizer["AutoCloseTitle"]" Introduction="@Localizer["AutoCloseIntro"]" Name="AutoClose" Demo="typeof(Demos.DateTimeRange.DateTimeRangeAutoClose)" />
 
 <AttributeTable Items="@GetAttributes()" />
 
diff --git a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
index 1e6f65947..d051bffcc 100644
--- a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
@@ -39,33 +39,33 @@ private async Task OnClick()
 <p class="code-label">@((MarkupString)Localizer["Tip5"].Value)</p>
 <Pre>&lt;DialogCloseButton /&gt;</Pre>
 
-<DemoBlock Title="@Localizer["KeyboardTitle"]" Introduction="@Localizer["KeyboardIntro"]" Name="Keyboard" Demo="Dialog.DialogKeyboard">
+<DemoBlock Title="@Localizer["KeyboardTitle"]" Introduction="@Localizer["KeyboardIntro"]" Name="Keyboard" Demo="typeof(Demos.Dialog.DialogKeyboard)">
     <p>@((MarkupString)Localizer["KeyboardTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["CustomerHeaderTitle"]" Introduction="@Localizer["CustomerHeaderIntro"]" Name="CustomerHeader" Demo="Dialog.DialogCustomerHeader" />
+<DemoBlock Title="@Localizer["CustomerHeaderTitle"]" Introduction="@Localizer["CustomerHeaderIntro"]" Name="CustomerHeader" Demo="typeof(Demos.Dialog.DialogCustomerHeader)" />
 
-<DemoBlock Title="@Localizer["HeaderToolbarTemplateTitle"]" Introduction="@Localizer["HeaderToolbarTemplateIntro"]" Name="HeaderToolbarTemplate" Demo="Dialog.DialogHeaderToolbarTemplate" />
+<DemoBlock Title="@Localizer["HeaderToolbarTemplateTitle"]" Introduction="@Localizer["HeaderToolbarTemplateIntro"]" Name="HeaderToolbarTemplate" Demo="typeof(Demos.Dialog.DialogHeaderToolbarTemplate)" />
 
-<DemoBlock Title="@Localizer["ComponentTitle"]" Introduction="@Localizer["ComponentIntro"]" Name="Component" Demo="Dialog.DialogComponent">
+<DemoBlock Title="@Localizer["ComponentTitle"]" Introduction="@Localizer["ComponentIntro"]" Name="Component" Demo="typeof(Demos.Dialog.DialogComponent)">
     <div class="mb-2">@((MarkupString)Localizer["ComponentTip"].Value)</div>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["BodyContextTitle"]" Introduction="@Localizer["BodyContextIntro"]" Name="BodyContext" Demo="Dialog.DialogBodyContext">
+<DemoBlock Title="@Localizer["BodyContextTitle"]" Introduction="@Localizer["BodyContextIntro"]" Name="BodyContext" Demo="typeof(Demos.Dialog.DialogBodyContext)">
     <p>@((MarkupString)Localizer["BodyContextTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ApplyTitle"]" Introduction="@Localizer["ApplyIntro"]" Name="Apply" Demo="Dialog.DialogApply" />
+<DemoBlock Title="@Localizer["ApplyTitle"]" Introduction="@Localizer["ApplyIntro"]" Name="Apply" Demo="typeof(Demos.Dialog.DialogApply)" />
 
-<DemoBlock Title="@Localizer["CloseDialogByCodeTitle"]" Introduction="@Localizer["CloseDialogByCodeIntro"]" Name="CloseDialogByCode" Demo="Dialog.DialogCloseDialogByCode">
+<DemoBlock Title="@Localizer["CloseDialogByCodeTitle"]" Introduction="@Localizer["CloseDialogByCodeIntro"]" Name="CloseDialogByCode" Demo="typeof(Demos.Dialog.DialogCloseDialogByCode)">
     <div class="mb-2">@((MarkupString)Localizer["CloseDialogByCodeTip"].Value)</div>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["DisableHeaderCloseButtonTitle"]" Introduction="@Localizer["DisableHeaderCloseButtonIntro"]" Name="DisableHeaderCloseButton" Demo="Dialog.DialogDisableHeaderCloseButton">
+<DemoBlock Title="@Localizer["DisableHeaderCloseButtonTitle"]" Introduction="@Localizer["DisableHeaderCloseButtonIntro"]" Name="DisableHeaderCloseButton" Demo="typeof(Demos.Dialog.DialogDisableHeaderCloseButton)">
     <p>@((MarkupString)Localizer["DisableHeaderCloseButtonTip"].Value)</p>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["MultipleDialogTitle"]" Introduction="@Localizer["MultipleDialogIntro"]" Name="MultipleDialog" Demo="Dialog.DialogMultipleDialog">
+<DemoBlock Title="@Localizer["MultipleDialogTitle"]" Introduction="@Localizer["MultipleDialogIntro"]" Name="MultipleDialog" Demo="typeof(Demos.Dialog.DialogMultipleDialog)">
     <div class="mb-2">@Localizer["MultipleDialogTip1"]</div>
     <ul class="ul-demo mb-2">
         <li>@Localizer["MultipleDialogTip2"]</li>
@@ -76,7 +76,7 @@ private async Task OnClick()
     <div class="mb-2">@((MarkupString)Localizer["MultipleDialogDesc"].Value)</div>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ModalDialogTitle"]" Introduction="@Localizer["ModalDialogIntro"]" Name="ModalDialog" Demo="Dialog.DialogModalDialog">
+<DemoBlock Title="@Localizer["ModalDialogTitle"]" Introduction="@Localizer["ModalDialogIntro"]" Name="ModalDialog" Demo="typeof(Demos.Dialog.DialogModalDialog)">
     <div class="mb-2">@Localizer["ModalDialogTip1"]</div>
     <ul class="ul-demo mb-2">
         <li>@Localizer["ModalDialogTip2"]</li>
@@ -86,7 +86,7 @@ private async Task OnClick()
     </ul>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["EditDialogTitle"]" Introduction="@Localizer["EditDialogIntro"]" Name="EditDialog" Demo="Dialog.DialogEditDialog">
+<DemoBlock Title="@Localizer["EditDialogTitle"]" Introduction="@Localizer["EditDialogIntro"]" Name="EditDialog" Demo="typeof(Demos.Dialog.DialogEditDialog)">
     <div class="mb-2">@Localizer["EditDialogTip1"]</div>
     <ul class="ul-demo mb-2">
         <li>@Localizer["EditDialogTip2"]</li>
@@ -95,7 +95,7 @@ private async Task OnClick()
     </ul>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["SearchDialogTitle"]" Introduction="@Localizer["SearchDialogIntro"]" Name="SearchDialog" Demo="Dialog.DialogSearchDialog">
+<DemoBlock Title="@Localizer["SearchDialogTitle"]" Introduction="@Localizer["SearchDialogIntro"]" Name="SearchDialog" Demo="typeof(Demos.Dialog.DialogSearchDialog)">
     <div class="mb-2">@Localizer["SearchDialogTip1"]</div>
     <ul class="ul-demo mb-2">
         <li>@Localizer["SearchDialogTip2"]</li>
@@ -104,7 +104,7 @@ private async Task OnClick()
     </ul>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["SaveDialogTitle"]" Introduction="@Localizer["SaveDialogIntro"]" Name="SaveDialog" Demo="Dialog.DialogSaveDialog">
+<DemoBlock Title="@Localizer["SaveDialogTitle"]" Introduction="@Localizer["SaveDialogIntro"]" Name="SaveDialog" Demo="typeof(Demos.Dialog.DialogSaveDialog)">
     <div class="mb-2">@Localizer["SaveDialogTip1"]</div>
     <ul class="ul-demo mb-2">
         <li>@Localizer["SaveDialogTip2"]</li>
@@ -112,17 +112,17 @@ private async Task OnClick()
     </ul>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["SizeTitle"]" Introduction="@Localizer["SizeIntro"]" Name="Size" Demo="Dialog.DialogSize" />
+<DemoBlock Title="@Localizer["SizeTitle"]" Introduction="@Localizer["SizeIntro"]" Name="Size" Demo="typeof(Demos.Dialog.DialogSize)" />
 
-<DemoBlock Title="@Localizer["PrintDialogTitle"]" Introduction="@Localizer["PrintDialogIntro"]" Name="PrintDialog" Demo="Dialog.DialogPrintDialog">
+<DemoBlock Title="@Localizer["PrintDialogTitle"]" Introduction="@Localizer["PrintDialogIntro"]" Name="PrintDialog" Demo="typeof(Demos.Dialog.DialogPrintDialog)">
     <div class="mb-2">@((MarkupString)Localizer["PrintDialogTip"].Value)</div>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["ShowMaximizeButtonTitle"]" Introduction="@Localizer["ShowMaximizeButtonIntro"]" Name="ShowMaximizeButton" Demo="Dialog.DialogShowMaximizeButton" />
+<DemoBlock Title="@Localizer["ShowMaximizeButtonTitle"]" Introduction="@Localizer["ShowMaximizeButtonIntro"]" Name="ShowMaximizeButton" Demo="typeof(Demos.Dialog.DialogShowMaximizeButton)" />
 
-<DemoBlock Title="@Localizer["ErrorLoggerTitle"]" Introduction="@Localizer["ErrorLoggerIntro"]" Name="ErrorLogger" Demo="Dialog.DialogErrorLogger" />
+<DemoBlock Title="@Localizer["ErrorLoggerTitle"]" Introduction="@Localizer["ErrorLoggerIntro"]" Name="ErrorLogger" Demo="typeof(Demos.Dialog.DialogErrorLogger)" />
 
-<DemoBlock Title="@Localizer["EmailTitle"]" Introduction="@Localizer["EmailIntro"]" Name="Email" Demo="Dialog.DialogEmail">
+<DemoBlock Title="@Localizer["EmailTitle"]" Introduction="@Localizer["EmailIntro"]" Name="Email" Demo="typeof(Demos.Dialog.DialogEmail)">
     <div class="mb-2">@Localizer["EmailTip1"]</div>
     <ul class="ul-demo mb-2">
         <li>@((MarkupString)Localizer["EmailTip2"].Value)</li>
diff --git a/src/BootstrapBlazor.Shared/Samples/Dispatches.razor b/src/BootstrapBlazor.Shared/Samples/Dispatches.razor
index a21bd2ca7..0ed8f3e12 100644
--- a/src/BootstrapBlazor.Shared/Samples/Dispatches.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Dispatches.razor
@@ -43,7 +43,7 @@ private IDispatchService&lt;GiteePostBody&gt;? DispatchService { get; set; }</Pr
 }</Pre>
 <div>@((MarkupString)Localizer["NormalTips5"].Value)</div>
 
-<DemoBlock Title="@Localizer["DispatchTitle"]" Introduction="@Localizer["DispatchIntro"]" Name="Dispatch" Demo="Dispatch.DispatchNormal">
+<DemoBlock Title="@Localizer["DispatchTitle"]" Introduction="@Localizer["DispatchIntro"]" Name="Dispatch" Demo="typeof(Demos.Dispatch.DispatchNormal)">
     <p>@((MarkupString)Localizer["DispatchTip"].Value)</p>
     <Pre class="mb-3">public class MessageItem
 {
diff --git a/src/BootstrapBlazor.Shared/Samples/DropdownWidgets.razor b/src/BootstrapBlazor.Shared/Samples/DropdownWidgets.razor
index 7e68a5d8b..cf5bcc1ac 100644
--- a/src/BootstrapBlazor.Shared/Samples/DropdownWidgets.razor
+++ b/src/BootstrapBlazor.Shared/Samples/DropdownWidgets.razor
@@ -5,6 +5,6 @@
 
 <h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="DropdownWidget.DropdownWidgetNormal" />
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal" Demo="typeof(Demos.DropdownWidget.DropdownWidgetNormal)" />
 
 <AttributeTable Items="@GetAttributes()" Title="@Localizer["AttrTitle"]" />
diff --git a/src/BootstrapBlazor.Shared/Samples/FileIcons.razor b/src/BootstrapBlazor.Shared/Samples/FileIcons.razor
index ba23d3e61..84d137eae 100644
--- a/src/BootstrapBlazor.Shared/Samples/FileIcons.razor
+++ b/src/BootstrapBlazor.Shared/Samples/FileIcons.razor
@@ -3,12 +3,12 @@
 <h3>@Localizer["Title"]</h3>
 <h4>@Localizer["Intro"]</h4>
 
-<DemoBlock Title="@Localizer["BaseUsageTitle"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Normal" Demo="FileIcon.FileIconNormal" />
+<DemoBlock Title="@Localizer["BaseUsageTitle"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Normal" Demo="typeof(Demos.FileIcon.FileIconNormal)" />
 
-<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="IconColor" Demo="FileIcon.FileIconColor" />
+<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="IconColor" Demo="typeof(Demos.FileIcon.FileIconColor)" />
 
-<DemoBlock Title="@Localizer["BackgroundTemplateTitle"]" Introduction="@Localizer["BackgroundTemplateIntro"]" Name="BackgroundTemplate" Demo="FileIcon.FileIconBackgroundTemplate" />
+<DemoBlock Title="@Localizer["BackgroundTemplateTitle"]" Introduction="@Localizer["BackgroundTemplateIntro"]" Name="BackgroundTemplate" Demo="typeof(Demos.FileIcon.FileIconBackgroundTemplate)" />
 
-<DemoBlock Title="@Localizer["CustomCssTitle"]" Introduction="@Localizer["CustomCssIntro"]" Name="CustomClass" Demo="FileIcon.FileIconCustomClass" />
+<DemoBlock Title="@Localizer["CustomCssTitle"]" Introduction="@Localizer["CustomCssIntro"]" Name="CustomClass" Demo="typeof(Demos.FileIcon.FileIconCustomClass)" />
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Shared/Services/CodeSnippetService.cs b/src/BootstrapBlazor.Shared/Services/CodeSnippetService.cs
index e04760072..e4ad6e0ad 100644
--- a/src/BootstrapBlazor.Shared/Services/CodeSnippetService.cs
+++ b/src/BootstrapBlazor.Shared/Services/CodeSnippetService.cs
@@ -48,7 +48,7 @@ class CodeSnippetService
         ContentRootPath = options.CurrentValue.ContentRootPath;
         ServerUrl = options.CurrentValue.ServerUrl;
         SampleUrl = options.CurrentValue.SampleUrl;
-        DemoUrl = $"{SampleUrl}../Demos/";
+        DemoUrl = $"{SampleUrl}../";
     }
 
     /// <summary>
@@ -235,7 +235,7 @@ class CodeSnippetService
     private async Task<string> ReadDemoTextAsync(string codeFile)
     {
         var payload = "";
-        var paths = new string[] { "..", "BootstrapBlazor.Shared", "Demos" };
+        var paths = new string[] { "..", "BootstrapBlazor.Shared" };
         var folder = Path.Combine(ContentRootPath, string.Join(Path.DirectorySeparatorChar, paths));
         var file = Path.Combine(folder, codeFile);
         if (File.Exists(file))
diff --git a/src/BootstrapBlazor.Shared/Services/DemoComponentConverter.cs b/src/BootstrapBlazor.Shared/Services/DemoComponentConverter.cs
deleted file mode 100644
index b0f0a2183..000000000
--- a/src/BootstrapBlazor.Shared/Services/DemoComponentConverter.cs
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
-// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
-// Website: https://www.blazor.zone or https://argozhang.github.io/
-
-namespace BootstrapBlazor.Shared.Services;
-
-internal class DemoComponentConverter
-{
-    private static Dictionary<string, Type>? Cache { get; set; }
-
-    public bool TryParse(string? name, [NotNullWhen(true)] out Type? type)
-    {
-        type = null;
-        name = name?.Split('.').LastOrDefault();
-        if (!string.IsNullOrEmpty(name))
-        {
-            Cache ??= BuildDemoTable();
-            if (!string.IsNullOrEmpty(name) && Cache.ContainsKey(name))
-            {
-                type = Cache[name];
-            }
-        }
-        return type != null;
-    }
-
-    private Dictionary<string, Type> BuildDemoTable() => GetType().Assembly.GetExportedTypes().Where(i => i.Namespace?.Contains(".Demos.") ?? false).ToDictionary(i => i.Name);
-}
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/wwwroot/js/bootstrap.blazor.chart.min.js b/src/Extensions/Components/BootstrapBlazor.Chart/wwwroot/js/bootstrap.blazor.chart.min.js
index 35326dbdb..c9397a922 100644
--- a/src/Extensions/Components/BootstrapBlazor.Chart/wwwroot/js/bootstrap.blazor.chart.min.js
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/wwwroot/js/bootstrap.blazor.chart.min.js
@@ -1 +1 @@
-(function(n){window.chartOption={options:{responsive:!0,maintainAspectRatio:!0,aspectRatio:2,resizeDelay:0,plugins:{title:{display:!0,text:null}},tooltips:{mode:"index",intersect:!1},hover:{mode:"nearest",intersect:!0},scales:{x:{display:!0,title:{display:!1,text:null}},y:{display:!0,title:{display:!1,text:null}}}}};var t=(n,t)=>n.p0.skip||n.p1.skip?t:undefined,r=(n,t)=>n.p0.parsed.y>n.p1.parsed.y?t:undefined,i={fill:!1,interaction:{intersect:!1},radius:0};n.extend({getChartOption:function(r){var e=[],o,u,f;window.chartColors=r.options.colors;for(o in r.options.colors)e.push(o);return u={},f=null,r.type==="line"?(n.isArray(r.data)&&(n.each(r.data,function(i,u){n.each(u.data,function(n,u){u===null&&(r.data[i].data[n]=NaN,r.data[i].segment={borderColor:n=>t(n,"rgb(0,0,0,0.2)"),borderDash:n=>t(n,[6,6])})})}),r.options=n.extend(!0,r.options,i)),u=n.extend(!0,{},chartOption),f=function(t){var i=chartColors[e.shift()];n.extend(t,{backgroundColor:i,borderColor:i})}):r.type==="bar"?(u=n.extend(!0,{},chartOption),f=function(t){var i=chartColors[e.shift()];n.extend(t,{backgroundColor:Chart.helpers.color(i).alpha(.5).rgbString(),borderColor:i,borderWidth:1})}):r.type==="pie"||r.type==="doughnut"?(u=n.extend(!0,{},chartOption,{options:{scales:{x:{display:!1},y:{display:!1}}}}),f=function(t){n.extend(t,{backgroundColor:e.slice(0,t.data.length).map(function(n){return chartColors[n]})})},r.type==="doughnut"&&n.extend(u.options,{cutoutPercentage:50,animation:{animateScale:!0,animateRotate:!0}})):r.type==="bubble"&&(u=n.extend(!0,{},chartOption,{data:{animation:{duration:1e4}},options:{tooltips:{mode:"point"}}}),f=function(t){var i=chartColors[e.shift()];n.extend(t,{backgroundColor:Chart.helpers.color(i).alpha(.5).rgbString(),borderWidth:1,borderColor:i})}),n.each(r.data,function(){f(this)}),n.extend(!0,u,{type:r.type,data:{labels:r.labels,datasets:r.data},options:{responsive:r.options.responsive,maintainAspectRatio:r.options.maintainAspectRatio,aspectRatio:r.options.aspectRatio,resizeDelay:r.options.resizeDelay,plugins:{title:{display:r.options.title!=null,text:r.options.title}},scales:{x:{title:{display:r.options.x.title!=null,text:r.options.x.title},stacked:r.options.x.stacked},y:{title:{display:r.options.y.title!=null,text:r.options.y.title},stacked:r.options.x.stacked}}}})},updateChart:function(n,t){t.updateMethod==="addDataset"?n.data.datasets.push(t.data.datasets.pop()):t.updateMethod==="removeDataset"?n.data.datasets.pop():t.updateMethod==="addData"?n.data.datasets.length>0&&(n.data.labels.push(t.data.labels.pop()),n.data.datasets.forEach(function(n,i){n.data.push(t.data.datasets[i].data.pop());(t.type==="pie"||t.type==="doughnut")&&n.backgroundColor.push(t.data.datasets[i].backgroundColor.pop())})):t.updateMethod==="removeData"?(n.data.labels.pop(),n.data.datasets.forEach(function(n){n.data.pop();(t.type==="pie"||t.type==="doughnut")&&n.backgroundColor.pop()})):t.updateMethod==="setAngle"?t.type==="doughnut"&&(t.angle===360?(n.options.circumference=360,n.options.rotation=-360):(n.options.circumference=180,n.options.rotation=-90)):t.updateMethod==="reload"?n.data=t.data:n.data.datasets.forEach((n,i)=>{n.data=t.data.datasets[i].data})},bb_chart:function(t,i,r,u,f,e,o){var c=n(t),s,h;u.type=e;s=c.data("chart");s?(h=n.getChartOption(u),h.angle=o,h.updateMethod=f,n.updateChart(s.config,h),s.update()):(h=n.getChartOption(u),c.data("chart",s=new Chart(t.getElementsByTagName("canvas"),h)),u.options.height!==null&&(s.canvas.parentNode.style.height=u.options.height),u.options.width!==null&&(s.canvas.parentNode.style.width=u.options.width),c.removeClass("is-loading").trigger("chart.afterInit"),i.invokeMethodAsync(r))}})})(jQuery);
\ No newline at end of file
+(function(n){window.chartOption={options:{responsive:!0,maintainAspectRatio:!0,aspectRatio:2,resizeDelay:0,plugins:{title:{display:!0,text:null}},tooltips:{mode:"index",intersect:!1},hover:{mode:"nearest",intersect:!0},scales:{x:{display:!0,title:{display:!1,text:null}},y:{display:!0,title:{display:!1,text:null}}}}};var t=(n,t)=>n.p0.skip||n.p1.skip?t:undefined,r=(n,t)=>n.p0.parsed.y>n.p1.parsed.y?t:undefined,i={fill:!1,interaction:{intersect:!1},radius:0};n.extend({getChartOption:function(r){var e=[],o,u,f;window.chartColors=r.options.colors;for(o in r.options.colors)e.push(o);return u={},f=null,r.type==="line"?(n.isArray(r.data)&&(n.each(r.data,function(i,u){n.each(u.data,function(n,u){u===null&&(r.data[i].data[n]=NaN,r.data[i].segment={borderColor:n=>t(n,"rgb(0,0,0,0.2)"),borderDash:n=>t(n,[6,6])})})}),r.options=n.extend(!0,r.options,i)),u=n.extend(!0,{},chartOption),f=function(t){var i=chartColors[e.shift()];n.extend(t,{backgroundColor:i,borderColor:i})}):r.type==="bar"?(u=n.extend(!0,{},chartOption),f=function(t){var i=chartColors[e.shift()];n.extend(t,{backgroundColor:Chart.helpers.color(i).alpha(.5).rgbString(),borderColor:i,borderWidth:1})}):r.type==="pie"||r.type==="doughnut"?(u=n.extend(!0,{},chartOption,{options:{scales:{x:{display:!1},y:{display:!1}}}}),f=function(t){n.extend(t,{backgroundColor:e.slice(0,t.data.length).map(function(n){return chartColors[n]})})},r.type==="doughnut"&&n.extend(u.options,{cutoutPercentage:50,animation:{animateScale:!0,animateRotate:!0}})):r.type==="bubble"&&(u=n.extend(!0,{},chartOption,{data:{animation:{duration:1e4}},options:{tooltips:{mode:"point"}}}),f=function(t){var i=chartColors[e.shift()];n.extend(t,{backgroundColor:Chart.helpers.color(i).alpha(.5).rgbString(),borderWidth:1,borderColor:i})}),n.each(r.data,function(){f(this)}),n.extend(!0,u,{type:r.type,data:{labels:r.labels,datasets:r.data},options:{responsive:r.options.responsive,maintainAspectRatio:r.options.maintainAspectRatio,aspectRatio:r.options.aspectRatio,resizeDelay:r.options.resizeDelay,plugins:{title:{display:r.options.title!=null,text:r.options.title}},scales:{x:{title:{display:r.options.x.title!=null,text:r.options.x.title},stacked:r.options.x.stacked},y:{title:{display:r.options.y.title!=null,text:r.options.y.title},stacked:r.options.x.stacked}}}})},updateChart:function(n,t){t.updateMethod==="addDataset"?n.data.datasets.push(t.data.datasets.pop()):t.updateMethod==="removeDataset"?n.data.datasets.pop():t.updateMethod==="addData"?n.data.datasets.length>0&&(n.data.labels.push(t.data.labels.pop()),n.data.datasets.forEach(function(n,i){n.data.push(t.data.datasets[i].data.pop());(t.type==="pie"||t.type==="doughnut")&&n.backgroundColor.push(t.data.datasets[i].backgroundColor.pop())})):t.updateMethod==="removeData"?(n.data.labels.pop(),n.data.datasets.forEach(function(n){n.data.pop();(t.type==="pie"||t.type==="doughnut")&&n.backgroundColor.pop()})):t.updateMethod==="setAngle"?t.type==="doughnut"&&(t.angle===360?(n.options.circumference=360,n.options.rotation=-360):(n.options.circumference=180,n.options.rotation=-90)):t.updateMethod==="reload"?(n.data=t.data,n.options=t.options):n.data.datasets.forEach((n,i)=>{n.data=t.data.datasets[i].data})},bb_chart:function(t,i,r,u,f,e,o){var c=n(t),s,h;u.type=e;s=c.data("chart");s?(h=n.getChartOption(u),h.angle=o,h.updateMethod=f,n.updateChart(s.config,h),s.update()):(h=n.getChartOption(u),c.data("chart",s=new Chart(t.getElementsByTagName("canvas"),h)),u.options.height!==null&&(s.canvas.parentNode.style.height=u.options.height),u.options.width!==null&&(s.canvas.parentNode.style.width=u.options.width),c.removeClass("is-loading").trigger("chart.afterInit"),i.invokeMethodAsync(r))}})})(jQuery);
\ No newline at end of file
diff --git a/src/Wasm/BootstrapBlazor.WebAssembly.ClientHost/Properties/launchSettings.json b/src/Wasm/BootstrapBlazor.WebAssembly.ClientHost/Properties/launchSettings.json
index 94bb74036..89b8c2796 100644
--- a/src/Wasm/BootstrapBlazor.WebAssembly.ClientHost/Properties/launchSettings.json
+++ b/src/Wasm/BootstrapBlazor.WebAssembly.ClientHost/Properties/launchSettings.json
@@ -4,7 +4,7 @@
     "anonymousAuthentication": true,
     "hotReloadProfile": "blazorwasm",
     "iisExpress": {
-      "applicationUrl": "http://localhost:50855",
+      "applicationUrl": "http://localhost:5055",
       "sslPort": 0
     }
   },
diff --git a/src/Wasm/BootstrapBlazor.WebAssembly.ServerHost/Properties/launchSettings.json b/src/Wasm/BootstrapBlazor.WebAssembly.ServerHost/Properties/launchSettings.json
index d680e568d..6d71a763e 100644
--- a/src/Wasm/BootstrapBlazor.WebAssembly.ServerHost/Properties/launchSettings.json
+++ b/src/Wasm/BootstrapBlazor.WebAssembly.ServerHost/Properties/launchSettings.json
@@ -3,7 +3,7 @@
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:50855/",
+      "applicationUrl": "http://localhost:5055/",
       "sslPort": 0
     }
   },