ASP.NET Core MVC / Razor Pages：自动完成选择组件

当数据量庞大时，简单的选择组件往往无法满足需求。ABP 通过使用 Select2 提供了一个支持分页和服务器端搜索的选择组件实现。该组件能很好地处理单选和多选场景。

下方展示了组件效果截图。

单选模式	多选模式

快速开始

这是 ABP 的核心功能，无需额外安装自定义包或扩展包。

使用方法

基础使用示例如下：

<select asp-for="Book.AuthorId" 
    class="auto-complete-select"
    data-autocomplete-api-url="/api/app/author"
    data-autocomplete-display-property="name"
    data-autocomplete-value-property="id"
    data-autocomplete-items-property="items"
    data-autocomplete-filter-param-name="filter"
    data-autocomplete-allow-clear="true">

    <!-- 可在此预定义已选项 -->
    <option selected value="@SelectedAuthor.Id">@SelectedAuthor.Name</option>
</select>

选择控件必须包含 auto-complete-select 类以及以下属性：

• data-autocomplete-api-url：* 获取选项数据的 API 接口地址（将向该地址发送 GET 请求）
• data-autocomplete-display-property：* 显示文本对应的属性名（例如实体/DTO 的 name 或 title 属性）
• data-autocomplete-value-property：* 标识符属性名（例如 id）
• data-autocomplete-items-property：* 响应对象中集合数据的属性名（例如 items）
• data-autocomplete-filter-param-name：* 筛选文本参数名（例如 filter）
• data-autocomplete-selected-item-name：选中项显示的文本
• data-autocomplete-parent-selector：父级 DOM 的 jQuery 选择器（如果位于模态框中，建议传入模态框选择器）
• data-autocomplete-allow-clear：设为 true 时允许清空已选值（默认值：false）
• data-autocomplete-placeholder：未选择任何值时的占位文本

由于启用了分页机制，已选项数据可能尚未加载，因此需要通过 <option> 标签预先定义选中值。

多选模式

自动完成选择组件支持多选功能。当 select 标签包含 multiple 属性时，将启用多选模式。

<select asp-for="Book.TagIds" 
    class="auto-complete-select"
    multiple="multiple"
    data-autocomplete-api-url="/api/app/tags"
    data-autocomplete-display-property="name"
    data-autocomplete-value-property="id"
    data-autocomplete-items-property="items"
    data-autocomplete-filter-param-name="filter">
    @foreach(var tag in SelectedTags)
    {
        <option selected value="@tag.Id">@tag.Name</option>
    }
</select>

多选值将自动绑定到指定类型的集合：

    public List<Guid> TagIds { get; set; }

注意事项

如果认证用户对指定 URL 没有访问权限，将会收到授权错误。在设计此类界面时需特别注意。 您可以通过创建专门的免授权端点/方法获取选项列表，这样页面就能在不授予用户完整读取权限的情况下获取关联实体的查询数据。