3.2 KiB

Raw Blame History

ASP.NET Core MVC / Razor Pages: Auto-Complete Select

A simple select component sometimes isn't useful with huge amount of data. ABP Provides a select implementation that works with pagination and server-side search via using Select2. It works with single or multiple choices well.

A screenshot can be shown below.

Single	Multiple

Getting Started

This is a core feature and it's used by ABP Framework. There is no custom installation or additional package required.

Usage

A simple is usage is presented below. The select must have auto-complete-select class and following attributes:

data-autocomplete-api-url: * API Endpoint url to get select items. GET request will be sent to this url.
data-autocomplete-display-property: * Property name to display. (For example: name ot title. Property name of entity/dto.).
data-autocomplete-value-property: * Identifier property name. (For example: id).
data-autocomplete-items-property: * Property name of collection in response object. (For example: items)
data-autocomplete-filter-param-name: * Filter text property name. (For example: filter).
data-autocomplete-selected-item-name: Text to display as selected item.

data-autocomplete-parent-selector: jQuery selector expression for parent DOM. (If it's in a modal, it's suggested to send modal selector as this parameter).

<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">

    <!-- You can define selected option(s) here  -->
    <option value="@SelectedAuthor.Id">@SelectedAuthor.Name</option>
</select>

You can define selected option(s) inside select tags. AutoComplete select may can't find selected item if pagination is applied.

Multiple Choices

AutoComplete Select supports multiple choices. If select tag has multiple attribute, it'll allow to choose multiple options.

<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 value="@tag.Id">@tag.Name</option>
    }
</select>

It'll be automatically binded to an collection of defined value type.

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

Possible Issues

Permission Restriction

If the authenticated user doesn't have permission on given url, user will get an authorization error. Be careful while designing this kind of UIs.

You may place a lookup method in the same AppService, so your page can retrieve lookup daha of dependent entity without giving a entire read permission to users.

3.2 KiB Raw Blame History