Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

SearchDialog 搜索弹窗

通过绑定数据模型自动呈现搜索弹窗

SearchDialog 组件是 Dialog 组件的扩展,适用于数据弹出窗设置搜索条件。

基础用法

通过绑定 TModel 数据模型,自动生成模型各个字段的搜索表单

Demo

自定义搜索弹窗内显示的条件字段

通过设定 Columns 参数显式设置显示的搜索字段

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>

<Block Title="基础用法" Introduction="通过绑定 <code>TModel</code> 数据模型,自动生成模型各个字段的搜索表单">
    <Button Text="点击弹出搜索弹窗" OnClickWithoutRender="@ShowDialog" />
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="自定义搜索弹窗内显示的条件字段" Introduction="通过设定 <code>Columns</code> 参数显式设置显示的搜索字段">
    <Button Text="点击弹出搜索弹窗" OnClickWithoutRender="@ShowColumnsDialog" />
</Block>

<Dialog></Dialog>

<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.Pages.Components;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;
using Foo = BootstrapBlazor.Shared.Pages.Components.Foo;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class SearchDialogs
    {
        [Inject]
        [NotNull]
        private DialogService? DialogService { get; set; }

        [NotNull]
        private Logger? Trace { get; set; }

        private async Task ShowDialog()
        {
            var option = new SearchDialogOption<Foo>()
            {
                Title = "搜索弹出框",
                Model = new Foo(),
                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,
                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 = " — "
            }
        };
    }
}

B 站相关视频链接

[传送门]

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload