!3649 doc(#I677HQ): update Ajax demo

* doc: 更新 AjaxGoto 文档
* refactor: 重构代码精简 CacheManager 内部逻辑
* refactor: 增加多语言替换功能
* doc: 格式化文档
* revert: 增加示例
* doc: 增加本地化
* Merge branch 'main' into doc/newAjax
* update ajax demos
This commit is contained in:
代码搬运工 2022-12-24 14:14:29 +00:00 committed by Argo
parent 0ac3c3739f
commit 056f1031ca
8 changed files with 99 additions and 185 deletions

View File

@ -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");
}
}

View File

@ -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; }
}
}

View File

@ -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>

View File

@ -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.",

View File

@ -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": "用图标、图片或者字符的形式展示用户或事物信息。",

View File

@ -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 = " — "
}
};
}

View File

@ -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 = " — "
}
};
}

View File

@ -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('\\', '/'));
}
}