Bootstrap Blazor UI 库小技巧 (持续更新)

1. 文本处理键盘按键

<Bootstrap Blazorclass="table-toolbar-search" placeholder="@SearchPlaceholderText" @onkeyup="OnSearchKeyUp" @bind-Value="@SearchText">
</BootstrapInput>

@code{
    private async Task OnSearchKeyUp(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
            await SearchClick();
        }
        else if (args.Key == "Escape")
        {
            await ClearSearchClick();
        }
    }
}

2. 文本框逐字搜索

UseInputEvent: 是否在文本框输入值时触发 bind-value:event="oninput" 默认 false

<BootstrapInput @bind-Value="value" ShowLabel="true" UseInputEvent="true" />

@value

@code{
    [DisplayName("条码文字")]
    private string? value { get; set; } = "12345";

}

3. Ajaxs 请求处理参数大小写

    private async Task ProcessResponse(string userName, string password)
    {
        var option = new AjaxOption()
        {
            Url = "/api/Login",
            Data = new User() { UserName = userName, Password = password }
        };
        var result = await AjaxService.InvokeAsync(option);
        if (result == null)
        {
            ResultMessage = "Login failed";
        }
        else
        {
            if (200 == result.RootElement.GetProperty("code").GetInt32())
            {
                await SwalService.Show(new SwalOption() { Content = "Login success！", Category = SwalCategory.Success });
            }
            else
            {
                await SwalService.Show(new SwalOption() { Content = $"Login failed: {result.RootElement.GetProperty("message").GetString()}", Category = SwalCategory.Error });
            }
        }
    }

    class User
    {
        [JsonPropertyName("uSErnaMe22222")]
        public string? UserName { get; set; }

        public string? Password { get; set; }
    }

4. 文本框获取焦点事件(触摸屏应用)

<BootstrapInput ShowLabel="true"
                @bind-Value="@one"
                @onfocus="_=>OnFocus(0)"/>
<BootstrapInput ShowLabel="true"
                @bind-Value="@two"
                @onfocus="_=>OnFocus(1)"/>

<Button class="m-1" Text="abc" Color="Color.Success" OnClick='_=>OnKeyBoardsItemClick("abc")' />
<Button class="m-1" Text="def" Color="Color.Success" OnClick='_=>OnKeyBoardsItemClick("def")' />

@code{

    string one="one";
    string two = "two";

    int mode;
    private Task OnFocus(int v)
    {
        mode = v;
        return Task.CompletedTask;
    }

    //触摸按钮点击
    private Task OnKeyBoardsItemClick(string v)
    {
        switch (mode)
        {
            case 1:
                two = v;
                break;
            default:
                one = v;
                break;
        }
        return Task.CompletedTask;
    }
}

5. 模板取消链接默认点击事件

模板默认带了链接 <a href="#" 导致点击后回到主页, 如果要停留在当前页,需要取消事件的默认行为

https://www.jianshu.com/p/c933de9249c7

<Logout>
  <LinkTemplate>
    <a @onclick="@(e => IsOpen = !IsOpen)" @onclick:stopPropagation><i class="fa-solid fa-cog"></i>设置</a>
  </LinkTemplate>
</Logout>

6. Segmented 超出宽度显示滚动条

<Segmented TValue="Dto" Items="@Items" class="over-x-bar-thin" />

.over-x-bar-thin { 
    width: 100%;
    scrollbar-width: thin;
    overflow-x: auto;
}

7. 制作无软键盘弹出焦点的输入框

<BootstrapInput inputmode="none"/>

8. 关闭点击表格行自定义操作按钮栏冒泡事件, 避免点击行事件执行

点击 PopConfirmButton 按钮不触发 OrderListItemClick
点击 Button 按钮不触发 OrderListItemClick

<Table OnClickRowCallback="OrderListItemClick">
  <TableColumns>
    <TableColumn>
      <Template>
        <div @onclick:stopPropagation="true">
          <PopConfirmButton />
          <Button />
        </div>
      </Template>
      </TableColumn>
  </TableColumns>
</Table>