Blazor 逐键搜索并动态反馈到url - densen2014/Blazor100 GitHub Wiki
Blazor 逐键搜索并动态反馈到url
(博客园传gif貌似有条例,gif自己点击链接查看吧)
新建项目,使用 Bootstrap Blazor App 模板 , 命名为 b22dynamicURL
BootstrapBlazor简介: BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。
显示如下模板站点,就说明你前面的操作都对了.
`private bool UseTabSet { get; set; } = true; `
改为
`private bool UseTabSet { get; set; } = false;`
@page "/"
@attribute [TabItemOption(Text = "Index", Closable = false)]
@page "/music/{Value?}"
@using System.Diagnostics.CodeAnalysis
<PageTitle>Index</PageTitle>
<div>
@Value
</div>
<BootstrapInput @bind-Value="Value" ShowLabel="true" UseInputEvent="true" OnValueChanged="_=>UpdateSearching()" IsAutoFocus />
@code{
[NotNull]
[Inject]
public NavigationManager? NavigationManager { get; set; }
[DisplayName("搜索")]
[Parameter]
public string? Value { get; set; } = "12345";
Task UpdateSearching()
{
NavigationManager.NavigateTo($"music/{Value}");
return Task.CompletedTask;
}
}
其中 <BootstrapInput @bind-Value="Value" ShowLabel="true" UseInputEvent="true" OnValueChanged="_=>UpdateSearching()" IsAutoFocus /> 为 BootstrapBlazor 库的输入组件, 我们启用显示标签, 使用逐键输入, 自动获取焦点属性.
可以看到,基本上满足需求.
万能的群友又来提问了 "如果中文能直接转英文，就好了" , 虽然不太明白说什么,但是可以安排一下
首先拉一个老掉牙的拼音包 Microsoft.International.Converters.PinYinConverter
然后代码改一下
@page "/"
@attribute [TabItemOption(Text = "Index", Closable = false)]
@page "/music/{Value?}"
@using System.Diagnostics.CodeAnalysis
@using Microsoft.International.Converters.PinYinConverter
<PageTitle>Index</PageTitle>
<div>
@Value
拼音
<i>
@pinyin
</i>
拼音缩写
<b>
@pinyinCompat
</b>
</div>
<BootstrapInput @bind-Value="Value" ShowLabel="true" UseInputEvent="true" OnValueChanged="_=>UpdateSearching()" IsAutoFocus />
@code{
[NotNull]
[Inject]
public NavigationManager? NavigationManager { get; set; }
[DisplayName("搜索")]
[Parameter]
public string? Value { get; set; } = "12345";
string? pinyin { get; set; } = "";
string? pinyinCompat { get; set; } = "";
Task UpdateSearching()
{
if (!string.IsNullOrWhiteSpace(Value))
{
pinyin = string.Empty;
pinyinCompat = string.Empty;
foreach (char c in Value)
{
if (ChineseChar.IsValidChar(c))
{
ChineseChar chineseChar = new ChineseChar(c);
pinyin += chineseChar.Pinyins[0];
pinyinCompat += chineseChar.Pinyins[0][0];
}
else
{
pinyin += c;
pinyinCompat += c;
}
}
}
NavigationManager.NavigateTo($"music/{Value}");
return Task.CompletedTask;
}
}
不知道你们满不满意, 我已经满意了, :->
