
SearchDialog 搜索弹窗
通过绑定数据模型自动呈现搜索弹窗
SearchDialog
组件是 Dialog
组件的扩展,适用于数据弹出窗设置搜索条件。
基础用法
通过绑定 TModel
数据模型,自动生成模型各个字段的搜索表单
Demo
自定义搜索弹窗内显示的条件字段
通过设定 Columns
参数显式设置显示的搜索字段
Demo
设置搜索弹窗内布局方式
通过设定 RowType
参数显式设置弹窗内组件布局方式,默认为上下布局,可设置值 inline
水平布局
Demo
SearchDialogOption 属性
Loading...
@page "/searchdialogs"
<h3>SearchDialog 搜索弹窗</h3>
<h4>通过绑定数据模型自动呈现搜索弹窗</h4>
<p><code>SearchDialog</code> 组件是 <code>Dialog</code> 组件的扩展,适用于数据弹出窗设置搜索条件。</p>
<Tips>
<p>通过调用注入服务 <code>DialogService</code> 的 <code>ShowSearchDialog</code> 方法直接弹出搜索条件弹窗,大大减少代码量。<code>SearchDialogOption</code> 配置类继承 <code>DialogOption</code>,更多参数设置请点击 <a href="dialogs" target="_blank">[传送门]</a></p>
</Tips>
<DemoBlock Title="基础用法" Introduction="通过绑定 <code>TModel</code> 数据模型,自动生成模型各个字段的搜索表单" Name="Normal">
<Button Text="点击弹出搜索弹窗" OnClickWithoutRender="@ShowDialog" />
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="自定义搜索弹窗内显示的条件字段" Introduction="通过设定 <code>Columns</code> 参数显式设置显示的搜索字段" Name="Field">
<Button Text="点击弹出搜索弹窗" OnClickWithoutRender="@ShowColumnsDialog" />
</DemoBlock>
<DemoBlock Title="设置搜索弹窗内布局方式" Introduction="通过设定 <code>RowType</code> 参数显式设置弹窗内组件布局方式,默认为上下布局,可设置值 <code>inline</code> 水平布局" Name="Layout">
<Button Text="搜索弹窗(左对齐)" OnClickWithoutRender="@ShowInlineDialog" />
<Button Text="搜索弹窗(右对齐)" OnClickWithoutRender="@ShowInlineAlignDialog" />
</DemoBlock>
<AttributeTable Items="@GetAttributes()" Title="SearchDialogOption 属性" />
// 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 BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class SearchDialogs
{
[Inject]
[NotNull]
private DialogService? DialogService { get; set; }
[NotNull]
private BlockLogger? Trace { get; set; }
private async Task ShowDialog()
{
var option = new SearchDialogOption<Foo>()
{
Title = "搜索弹出框",
Model = new Foo(),
ItemsPerRow = 2,
RowType = RowType.Inline,
OnCloseAsync = () =>
{
Trace.Log("关闭按钮被点击");
return Task.CompletedTask;
},
OnResetSearchClick = () =>
{
Trace.Log("重置按钮被点击");
return Task.CompletedTask;
},
OnSearchClick = () =>
{
Trace.Log("搜索按钮被点击");
return Task.CompletedTask;
}
};
await DialogService.ShowSearchDialog(option);
}
private async Task ShowColumnsDialog()
{
var model = new Foo();
var option = new SearchDialogOption<Foo>()
{
Title = "搜索弹出框",
Model = model,
ItemsPerRow = 2,
RowType = RowType.Inline,
Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
};
await DialogService.ShowSearchDialog(option);
}
private async Task ShowInlineDialog()
{
var model = new Foo();
var option = new SearchDialogOption<Foo>()
{
Title = "搜索弹出框",
ItemsPerRow = 2,
RowType = RowType.Inline,
Model = model,
Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
};
await DialogService.ShowSearchDialog(option);
}
private async Task ShowInlineAlignDialog()
{
var model = new Foo();
var option = new SearchDialogOption<Foo>()
{
Title = "搜索弹出框",
ItemsPerRow = 2,
RowType = RowType.Inline,
LabelAlign = Alignment.Right,
Model = model,
Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
};
await DialogService.ShowSearchDialog(option);
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "ShowLabel",
Description = "是否显示标签",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "Model",
Description = "泛型参数用于呈现 UI",
Type = "TModel",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Items",
Description = "搜索条件集合",
Type = "IEnumerable<IEditorItem>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "DialogBodyTemplate",
Description = "SearchDialog Body 模板",
Type = "RenderFragment<TModel>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ResetButtonText",
Description = "重置按钮文本",
Type = "string",
ValueList = " — ",
DefaultValue = "重置"
},
new AttributeItem() {
Name = "QueryButtonText",
Description = "查询按钮文本",
Type = "string",
ValueList = " — ",
DefaultValue = "查询"
},
new AttributeItem() {
Name = "OnResetSearchClick",
Description = "重置回调委托",
Type = "Func<Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnSearchClick",
Description = "搜索回调委托",
Type = "Func<Task>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ItemsPerRow",
Description = "每行显示组件数量",
Type = "int?",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "RowType",
Description = "设置组件布局方式",
Type = "RowType",
ValueList = "Row|Inline",
DefaultValue = "Row"
},
new AttributeItem() {
Name = "LabelAlign",
Description = "Inline 布局模式下标签对齐方式",
Type = "Alignment",
ValueList = "None|Left|Center|Right",
DefaultValue = "None"
}
};
}