diff --git a/docs/en/UI/AspNetCore/AutoComplete-Select.md b/docs/en/UI/AspNetCore/AutoComplete-Select.md new file mode 100644 index 0000000000..1a4705627d --- /dev/null +++ b/docs/en/UI/AspNetCore/AutoComplete-Select.md @@ -0,0 +1,43 @@ +# 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](https://select2.org/). It works with single or multiple choices well. + +A screenshot can be shown below. + +| Single | Multiple | +| --- | --- | +| ![autocomplete-select-example](../../images/abp-select2-single.png) |![autocomplete-select-example](../../images/abp-select2-multiple.png) | + +## 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)_. + + ```html + + ``` + + +## 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. \ No newline at end of file diff --git a/docs/en/images/abp-select2-multiple.png b/docs/en/images/abp-select2-multiple.png new file mode 100644 index 0000000000..bdc2d7cc95 Binary files /dev/null and b/docs/en/images/abp-select2-multiple.png differ diff --git a/docs/en/images/abp-select2-single.png b/docs/en/images/abp-select2-single.png new file mode 100644 index 0000000000..219355dd66 Binary files /dev/null and b/docs/en/images/abp-select2-single.png differ diff --git a/modules/cms-kit/host/Volo.CmsKit.Web.Unified/appsettings.json b/modules/cms-kit/host/Volo.CmsKit.Web.Unified/appsettings.json index 3c872decbe..e8c26fdfcd 100644 --- a/modules/cms-kit/host/Volo.CmsKit.Web.Unified/appsettings.json +++ b/modules/cms-kit/host/Volo.CmsKit.Web.Unified/appsettings.json @@ -1,5 +1,5 @@ { "ConnectionStrings": { - "Default": "Server=(localdb)\\.\\MSSQLLocalDB;Database=CmsKit_Unified;Trusted_Connection=True" + "Default": "Server=localhost;Database=CmsKit_Unified;User ID=SA;Password=12345678Aa" } } diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/Default.cshtml index 3232be484d..54b8ede939 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/Default.cshtml +++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/Default.cshtml @@ -6,17 +6,23 @@ @inject IStringLocalizer L -
+ -
- - -
+
+ + + @**@ +
- @if (Model.DisplaySubmitButton) - { - - - - } -
\ No newline at end of file + @if (Model.DisplaySubmitButton) + { + + + + } + \ No newline at end of file diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/default.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/default.js index 834aedf3d6..e3607d48fd 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/default.js +++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Components/TagEditor/default.js @@ -1,5 +1,20 @@ $(function () { + var $selectTags = $("#tags"); + + function initSelectTagEditor() { + $selectTags.data('autocompleteApiUrl', '/api/cms-kit-admin/tags'); + $selectTags.data('autocompleteDisplayProperty', 'name'); + $selectTags.data('autocompleteValueProperty', 'id'); + $selectTags.data('autocompleteItemsProperty', 'items'); + $selectTags.data('autocompleteFilterParamName', 'filter'); + + abp.dom.initializers.initializeAutocompleteSelects($selectTags); + } + + initSelectTagEditor(); + + var $tagEditorForms = $('.tag-editor-form'); $tagEditorForms.on('submit', function (e) {