Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

AutoFill 自动填充组件

通过智能感应提示选项,选中后自动填充表单

填充表单

Demo
录入 Name 姓名智能提示,选择提示项后自动填充下方表单 目前支持键盘 Enter Spance
Loading...
@page "/autofills"

<h3>AutoFill 自动填充组件</h3>

<h4>通过智能感应提示选项,选中后自动填充表单</h4>

<Block Title="基本用法" Introduction="填充表单">
    <div class="mb-3">录入 <code>Name</code> 姓名智能提示,选择提示项后自动填充下方表单 目前支持键盘 <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class="fa fa-arrow-up"></i></kbd> <kbd><i class="fa fa-arrow-down"></i></kbd></div>
    <AutoFill TValue="Dummy" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged" class="mb-3">
        <Template>
            <div class="d-flex">
                <div>
                    <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@GetTitle(context.Id)</div>
                </div>
            </div>
        </Template>
    </AutoFill>
    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2">
        <FieldItems>
            <EditorItem @bind-Field="@context.Hobby" Editable="false" />
        </FieldItems>
    </EditorForm>
    <div style="height: 300px"></div>
</Block>
// 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.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    partial class AutoFills
    {
        private Dummy Model { get; set; } = new Dummy();

        [NotNull]
        private IEnumerable<Dummy>? Items { get; set; }

        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            Items = Foo.GenerateFoo(LocalizerFoo).Select(i => Dummy.ConvertFromFoo(i));
        }

        private ConcurrentDictionary<int, string> TitleCache { get; } = new();

        private string GetTitle(int id) => TitleCache.GetOrAdd(id, key => Foo.GetTitle());

        private Task OnSelectedItemChanged(Dummy dummy)
        {
            Model = Utility.Clone(dummy);
            StateHasChanged();
            return Task.CompletedTask;
        }

        private class Dummy : Foo, ISelectedItem
        {
            /// <summary>
            /// 
            /// </summary>
            [AutoGenerateColumn(Editable = false)]
            public string Text { get; set; } = "";

            /// <summary>
            /// 
            /// </summary>
            [AutoGenerateColumn(Editable = false)]
            public string Value { get; set; } = "";

            /// <summary>
            /// 
            /// </summary>
            [AutoGenerateColumn(Editable = false)]
            public bool Active { get; set; }

            /// <summary>
            /// 
            /// </summary>
            [AutoGenerateColumn(Editable = false)]
            public bool IsDisabled { get; set; }

            /// <summary>
            /// 
            /// </summary>
            [AutoGenerateColumn(Editable = false)]
            public string GroupName { get; set; } = "";

            /// <summary>
            /// 
            /// </summary>
            /// <param name="foo"></param>
            /// <returns></returns>
            public static Dummy ConvertFromFoo(Foo foo)
            {
                return new Dummy()
                {
                    Address = foo.Address,
                    Complete = foo.Complete,
                    Count = foo.Count,
                    DateTime = foo.DateTime,
                    Education = foo.Education,
                    Id = foo.Id,
                    Name = foo.Name,
                    Text = foo.Name ?? string.Empty,
                    Value = foo.Id.ToString()
                };
            }
        }
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload