!3649 doc(#I677HQ): update Ajax demo

* doc: 更新 AjaxGoto 文档
* refactor: 重构代码精简 CacheManager 内部逻辑
* refactor: 增加多语言替换功能
* doc: 格式化文档
* revert: 增加示例
* doc: 增加本地化
* Merge branch 'main' into doc/newAjax
* update ajax demos

src/BootstrapBlazor.Shared/Demos/Ajax/AjaxGoto.razor

@@ -0,0 +1,22 @@
+<Button OnClick="Goto">@Localizer["GotoButtonText1"]</Button>
+<Button OnClick="GotoSelf">@Localizer["GotoButtonText2"]</Button>
+
+@code {
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<AjaxGoto>? Localizer { get; set; }
+
+    [Inject]
+    [NotNull]
+    private AjaxService? AjaxService { get; set; }
+
+    private async Task Goto()
+    {
+        await AjaxService.Goto("/introduction");
+    }
+
+    private async Task GotoSelf()
+    {
+        await AjaxService.Goto("/ajaxs");
+    }
+}

src/BootstrapBlazor.Shared/Demos/Ajax/AjaxNormal.razor

@@ -1,19 +1,23 @@
 @using BootstrapBlazor.Components
 @using System.Text.Json
 
-<div class="my-2">
-    <b>特别注意：</b>
+<div class="mt-3">
+    <Button OnClick="Success">@Localizer["NormalButtonText1"]</Button>
+    <Button OnClick="Fail">@Localizer["NormalButtonText2"]</Button>
+    @if (!string.IsNullOrEmpty(ResultMessage))
+    {
+        <div class="mt-2"><code>@ResultMessage</code></div>
+    }
 </div>
-<div>这里只是进行了登录模拟，并没有真正的调用 <code>HttpContext.SignInAsync</code>，真实使用时需要在登录完成后对页面进行刷新，否则无法真正的登录成功。</div>
-
-<div class="mb-3"><code>@ResultMessage</code></div>
-<Button OnClick="Success">登录成功</Button>
-<Button OnClick="Fail">登录失败</Button>
 
 @code
 {
     private string? ResultMessage { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<AjaxNormal>? Localizer { get; set; }
+
     [Inject]
     [NotNull]
     private AjaxService? AjaxService { get; set; }
@@ -22,17 +26,21 @@
     [NotNull]
     private SwalService? SwalService { get; set; }
 
-    private async Task Success()
+    private Task Success() => ProcessResponse("admin", "123456");
+
+    private Task Fail() => ProcessResponse("admin", "123");
+
+    private async Task ProcessResponse(string userName, string password)
     {
-        var option = new AjaxOption
+        var option = new AjaxOption()
         {
             Url = "/api/Login",
-            Data = new User() { UserName = "admin", Password = "123456" }
+            Data = new User() { UserName = userName, Password = password }
         };
         var result = await AjaxService.InvokeAsync(option);
         if (result == null)
         {
-            ResultMessage = "响应失败";
+            ResultMessage = "Login failed";
         }
         else
         {
@@ -40,55 +48,19 @@
             var doc = JsonDocument.Parse(result);
             if (200 == doc.RootElement.GetProperty("code").GetInt32())
             {
-                await SwalService.Show(new SwalOption() { Content = "登录成功！", Category = SwalCategory.Success });
+                await SwalService.Show(new SwalOption() { Content = "Login success！", Category = SwalCategory.Success });
             }
             else
             {
-                await SwalService.Show(new SwalOption() { Content = $"登录失败:{doc.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
+                await SwalService.Show(new SwalOption() { Content = $"Login failed: {doc.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
             }
         }
     }
 
-    private async Task Fail()
-    {
-        var option = new AjaxOption
-            {
-                Url = "/api/Login",
-                Data = new User() { UserName = "admin", Password = "1234567" }
-            };
-        var result = await AjaxService.InvokeAsync(option);
-        if (result == null)
-        {
-            ResultMessage = "响应失败";
-        }
-        else
-        {
-            ResultMessage = result;
-            var doc = JsonDocument.Parse(result);
-            if (200 == doc.RootElement.GetProperty("code").GetInt32())
-            {
-                await SwalService.Show(new SwalOption() { Content = "登录成功！", Category = SwalCategory.Success });
-            }
-            else
-            {
-                await SwalService.Show(new SwalOption() { Content = $"登录失败:{doc.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
-            }
-        }
-    }
-
-    /// <summary>
-    /// 登录模拟类
-    /// </summary>
     class User
     {
-        /// <summary>
-        /// 用户名
-        /// </summary>
         public string? UserName { get; set; }
 
-        /// <summary>
-        /// 密码
-        /// </summary>
         public string? Password { get; set; }
     }
 }

src/BootstrapBlazor.Shared/Extensions/CacheManagerExtensions.cs

@@ -35,16 +35,16 @@ internal static class CacheManagerExtensions
     /// 获得 指定代码文件当前文化设置的本地化资源集合
     /// </summary>
     /// <param name="cache"></param>
-    /// <param name="codeFile"></param>
+    /// <param name="typeName"></param>
     /// <param name="options"></param>
     /// <returns></returns>
-    public static IEnumerable<LocalizedString> GetDemoLocalizedStrings(this ICacheManager cache, string codeFile, JsonLocalizationOptions options)
+    public static IEnumerable<LocalizedString> GetDemoLocalizedStrings(this ICacheManager cache, string typeName, JsonLocalizationOptions options)
     {
-        var key = $"Snippet-{CultureInfo.CurrentUICulture.Name}-{nameof(GetLocalizedStrings)}-{codeFile}";
-        return cache.GetOrCreate(key, entry =>
+        var key = $"Snippet-{CultureInfo.CurrentUICulture.Name}-{nameof(GetLocalizedStrings)}-{typeName}";
+        return cache.GetOrCreate(key, (Func<ICacheEntry, IEnumerable<LocalizedString>>)(entry =>
         {
-            return Utility.GetJsonStringByTypeName(options, typeof(CodeSnippetService).Assembly, $"BootstrapBlazor.Shared.{codeFile}");
-        });
+            return Utility.GetJsonStringByTypeName(options, typeof(CodeSnippetService).Assembly, $"BootstrapBlazor.Shared.Demos.{typeName}");
+        }));
     }
 
     /// <summary>

src/BootstrapBlazor.Shared/Locales/en.json

@@ -3253,20 +3253,24 @@
   },
   "BootstrapBlazor.Shared.Samples.Ajaxs": {
     "AjaxTitle": "Ajax call",
-    "H4": "The ajax method used to use js directly in the browser to interact with the server currently only supports both input and output as json, and the return value is a json string, which can be converted and processed by itself.",
+    "AjaxDescribe": "The ajax method used to use js directly in the browser to interact with the server currently only supports both input and output as json, and the return value is a json string, which can be converted and processed by itself.",
     "NormalTitle": "Basic usage",
     "NormalIntro": "Impersonate a login",
     "NormalB": "Special attention:",
     "NormalDiv": "Here is only a login simulation, and there is no real call to<code> HttpContext.SignInAsync </code>, the real use needs to refresh the page after the login is completed, otherwise the real login can not be successful.",
-    "NormalButtonText1": "Login successful",
-    "NormalButtonText2": "Login failed",
     "GotoTitle": "Page jump",
     "GotoIntro": "Implementing page jumps with<code> Js </code> addresses an issue where <code> Blazor </code> pages don't really refresh when they're jumped as <b> SPA </b>",
-    "GotoButtonText1": "Jump to the first page of the document",
-    "GotoButtonText2": "Jump to yourself (refresh page)",
     "InvokeAsync": "Execute fetch",
     "Goto": "Execute goto"
   },
+  "BootstrapBlazor.Shared.Demos.Ajax.AjaxNormal": {
+    "NormalButtonText1": "Login successful",
+    "NormalButtonText2": "Login failed"
+  },
+  "BootstrapBlazor.Shared.Demos.Ajax.AjaxGoto": {
+    "GotoButtonText1": "Jump to the first page of the document",
+    "GotoButtonText2": "Jump to yourself (refresh page)"
+  },
   "BootstrapBlazor.Shared.Samples.Avatars": {
     "Title": "Avatar",
     "SubTitle": "Present user or thing information as icons, pictures, or characters.",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -3261,20 +3261,24 @@
   },
   "BootstrapBlazor.Shared.Samples.Ajaxs": {
     "AjaxTitle": "Ajax调用",
-    "H4": "用于直接在浏览器使用 fetch 方法与服务器交互，目前只支持输入输出皆为 json，返回值为 json 字符串，可以自行转换处理。",
+    "AjaxDescribe": "用于直接在浏览器使用 fetch 方法与服务器交互，目前只支持输入输出皆为 json，返回值为 json 字符串，可以自行转换处理。",
     "NormalTitle": "基础用法",
     "NormalIntro": "模拟登录",
     "NormalB": "特别注意：",
     "NormalDiv": "这里只是进行了登录模拟，并没有真正的调用 <code>HttpContext.SignInAsync</code>，真实使用时需要在登录完成后对页面进行刷新，否则无法真正的登录成功。",
-    "NormalButtonText1": "登录成功",
-    "NormalButtonText2": "登录失败",
     "GotoTitle": "页面跳转",
     "GotoIntro": "用 <code>Js</code> 实现页面跳转，解决了 <code>Blazor</code> 页面作为 <b>SPA</b> 跳转时不会真正刷新页面的问题",
-    "GotoButtonText1": "跳转到文档首页",
-    "GotoButtonText2": "跳转到自己（刷新页面）",
     "InvokeAsync": "执行 fetch 方法",
     "Goto": "执行 goto 方法"
   },
+  "BootstrapBlazor.Shared.Demos.Ajax.AjaxNormal": {
+    "NormalButtonText1": "登录成功",
+    "NormalButtonText2": "登录失败"
+  },
+  "BootstrapBlazor.Shared.Demos.Ajax.AjaxGoto": {
+    "GotoButtonText1": "跳转到文档首页",
+    "GotoButtonText2": "跳转到自己（刷新页面）"
+  },
   "BootstrapBlazor.Shared.Samples.Avatars": {
     "Title": "Avatar 头像",
     "SubTitle": "用图标、图片或者字符的形式展示用户或事物信息。",

src/BootstrapBlazor.Shared/Samples/Ajaxs.razor

@@ -3,7 +3,7 @@
 
 <h3>@Localizer["AjaxTitle"]</h3>
 
-<h4>@Localizer["H4"]</h4>
+<h4>@Localizer["AjaxDescribe"]</h4>
 
 <DemoBlock Introduction="@Localizer["NormalIntro"]" Title="@Localizer["NormalTitle"]" Name="Normal" Demo="Ajax.AjaxNormal">
     <p>
@@ -18,10 +18,31 @@
 var result = await AjaxService.InvokeAsync(option);</Pre>
 </DemoBlock>
 
-<DemoBlock Introduction="@Localizer["GotoIntro"]" Title="@Localizer["GotoTitle"]" Name="Goto">
-    <Pre>await AjaxService.Goto("/introduction");</Pre>
-    <Button OnClick="Goto">@Localizer["GotoButtonText1"]</Button>
-    <Button OnClick="GotoSelf">@Localizer["GotoButtonText2"]</Button>
-</DemoBlock>
+<DemoBlock Introduction="@Localizer["GotoIntro"]" Title="@Localizer["GotoTitle"]" Name="Goto" Demo="Ajax.AjaxGoto" />
 
 <MethodTable Items="@GetMethods()" />
+
+@code
+{
+    /// <summary>
+    /// 获得属性方法
+    /// </summary>
+    /// <returns></returns>
+    private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
+    {
+        new MethodItem()
+        {
+            Name = "InvokeAsync",
+            Description = Localizer["InvokeAsync"],
+            Parameters = "AjaxOption",
+            ReturnValue = "string"
+        },
+        new MethodItem()
+        {
+            Name = "Goto",
+            Description = Localizer["Goto"],
+            Parameters = "string",
+            ReturnValue = " — "
+        }
+    };
+}

src/BootstrapBlazor.Shared/Samples/Ajaxs.razor.cs

@@ -1,109 +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/
-
-using System.Text.Json;
-
-namespace BootstrapBlazor.Shared.Samples;
-
-/// <summary>
-/// Ajax示例类
-/// </summary>
-public partial class Ajaxs
-{
-    private string? ResultMessage { get; set; }
-
-    [Inject]
-    [NotNull]
-    private AjaxService? AjaxService { get; set; }
-
-    [Inject]
-    [NotNull]
-    private SwalService? SwalService { get; set; }
-
-    private async Task Success()
-    {
-        var option = new AjaxOption
-        {
-            Url = "/api/Login",
-            Data = new User() { UserName = "admin", Password = "123456" }
-        };
-        var result = await AjaxService.InvokeAsync(option);
-        if (result == null)
-        {
-            ResultMessage = "响应失败";
-        }
-        else
-        {
-            ResultMessage = result;
-            var doc = JsonDocument.Parse(result);
-            if (200 == doc.RootElement.GetProperty("code").GetInt32())
-            {
-                await SwalService.Show(new SwalOption() { Content = "登录成功！", Category = SwalCategory.Success });
-            }
-            else
-            {
-                await SwalService.Show(new SwalOption() { Content = $"登录失败:{doc.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
-            }
-        }
-    }
-
-    private async Task Fail()
-    {
-        var option = new AjaxOption
-        {
-            Url = "/api/Login",
-            Data = new User() { UserName = "admin", Password = "1234567" }
-        };
-        var result = await AjaxService.InvokeAsync(option);
-        if (result == null)
-        {
-            ResultMessage = "响应失败";
-        }
-        else
-        {
-            ResultMessage = result;
-            var doc = JsonDocument.Parse(result);
-            if (200 == doc.RootElement.GetProperty("code").GetInt32())
-            {
-                await SwalService.Show(new SwalOption() { Content = "登录成功！", Category = SwalCategory.Success });
-            }
-            else
-            {
-                await SwalService.Show(new SwalOption() { Content = $"登录失败:{doc.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
-            }
-        }
-    }
-
-    private async Task Goto()
-    {
-        await AjaxService.Goto("/introduction");
-    }
-
-    private async Task GotoSelf()
-    {
-        await AjaxService.Goto("/ajaxs");
-    }
-
-    /// <summary>
-    /// 获得属性方法
-    /// </summary>
-    /// <returns></returns>
-    private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
-    {
-        new MethodItem()
-        {
-            Name = "InvokeAsync",
-            Description = Localizer["InvokeAsync"],
-            Parameters = "AjaxOption",
-            ReturnValue = "string"
-        },
-        new MethodItem()
-        {
-            Name = "Goto",
-            Description = Localizer["Goto"],
-            Parameters = "string",
-            ReturnValue = " — "
-        }
-    };
-}

src/BootstrapBlazor.Shared/Services/CodeSnippetService.cs

@@ -146,12 +146,12 @@ class CodeSnippetService
     {
         var payload = "";
 
-        demo = demo.Replace('.', Path.DirectorySeparatorChar);
-        demo = $"{demo}.razor";
+        var fileName = demo.Replace('.', Path.DirectorySeparatorChar);
+        fileName = $"{fileName}.razor";
 
         if (IsDevelopment)
         {
-            payload = await ReadDemoTextAsync(demo);
+            payload = await ReadDemoTextAsync(fileName);
         }
         else
         {
@@ -161,12 +161,12 @@ class CodeSnippetService
             if (OperatingSystem.IsBrowser())
             {
                 client.BaseAddress = new Uri($"{ServerUrl}/api/");
-                payload = await client.GetStringAsync($"Code?fileName={demo}");
+                payload = await client.GetStringAsync($"Code?fileName={fileName}");
             }
             else
             {
                 client.BaseAddress = new Uri(DemoUrl);
-                payload = await client.GetStringAsync(demo.Replace('\\', '/'));
+                payload = await client.GetStringAsync(fileName.Replace('\\', '/'));
             }
         }