如何在Syncfusion Blazor下拉菜单中实现块状展示

问题根源 #

直接在<SfDropDownList>内循环编写<option>并嵌套HTML结构不符合组件规范，Syncfusion Blazor DropDownList需要通过ItemTemplate实现自定义选项布局，同时需配置数据源、字段映射等基础属性才能正常渲染。

具体实现步骤 #

1. 配置组件基础属性：设置下拉占位符（对应"Client Name"标题）、绑定数据源、映射客户名称与ID的字段。
2. 使用ItemTemplate自定义选项布局：通过模板上下文获取当前客户对象，自由编写HTML结构展示名称、项目数、用户数。
3. 调整计数方法：让计数方法接收当前客户参数，确保计算对应客户的项目数与用户数。
4. 添加CSS美化布局：对齐元素、调整字体样式，匹配设计需求。

修改后完整代码 #

@using Syncfusion.Blazor.DropDowns
@typeparam TItem
@typeparam TValue
@inherits ContextAwareComponent

<style>
    .client-option {
        padding: 10px;
    }
    .client-name {
        font-weight: 600;
        margin-bottom: 5px;
    }
    .client-stats {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.9rem;
        color: #555;
    }
    .client-stats svg {
        width: 6px;
        height: 6px;
        fill: #888;
    }
</style>

<SfDropDownList TItem="TItem" 
                TValue="TValue"
                Placeholder="Client Name"
                DataSource="@Clients"
                TextField="@nameof(Client.Name)"
                ValueField="@nameof(Client.Id)">
    <ItemTemplate Context="currentClient">
        <div class="client-option">
            <div class="client-name">@currentClient.Name</div>
            <div class="client-stats">
                <span>@ClientProjectCount(currentClient) Project@(ClientProjectCount(currentClient) != 1 ? "s" : "")</span>
                <svg>
                    <circle cx="3" cy="3" r="2.5"></circle>
                </svg>
                <span>@ClientUserCount(currentClient) User@(ClientUserCount(currentClient) != 1 ? "s" : "")</span>
            </div>
        </div>
    </ItemTemplate>
</SfDropDownList>

@code {
    public IEnumerable<TItem> Clients { get; set; }

    // 传入当前客户对象，计算对应项目数
    private int ClientProjectCount(TItem client)
    {
        // 替换为你的实际项目数获取逻辑
        return 0;
    }

    // 传入当前客户对象，计算对应用户数
    private int ClientUserCount(TItem client)
    {
        // 替换为你的实际用户数获取逻辑
        return 0;
    }

    // 自定义客户类示例（根据你的TItem类型调整）
    public class Client
    {
        public TValue Id { get; set; }
        public string Name { get; set; }
    }
}

关键注意事项 #

• 必须通过ItemTemplate定义自定义选项，利用Context参数获取当前循环的客户对象。
• 计数方法需接收客户参数，才能精准计算单个客户的项目/用户数，避免无参方法无法区分客户的问题。
• 配置TextField和ValueField是组件正常绑定选中值与显示文本的必要条件。
• CSS样式可根据设计需求自由调整，比如间距、颜色、字体大小等。

内容的提问来源于stack exchange，提问作者Ben Pugh