0
darutter created
I am using abp.io commercial version 5.2.1 in a Blazor server app. I need to display a <SELECT > list on my forms that get their elements from an enumeration. I have looked for documentation or an example of how to use the tag helper but can't find any help. Please provide an example of this type.
3 Answer(s)
-
0
Hi,
You should use Blazor component instead of tag helper.
See: https://blazorise.com/docs/components/select
-
0
Thank you for the reply. I've added the select to a razor page and set the SelectedValue to a property in my .cs file, but the binding isn't working. Please advise. I'm adding my code below:
@page "/item-categories" @attribute [Authorize(RadixSalesQuotePermissions.ItemCategories.Default)] @using RadixSalesQuote.BusinessObjects @using RadixSalesQuote.Localization @using RadixSalesQuote.Shared @using Microsoft.AspNetCore.Authorization @using Microsoft.Extensions.Localization @using Blazorise.Components @using Volo.Abp.BlazoriseUI.Components @using Volo.Abp.ObjectMapping @using Volo.Abp.AspNetCore.Components.Messages @using Volo.Abp.AspNetCore.Components.Web.Theming.Layout @using RadixSalesQuote.Permissions @inherits RadixSalesQuoteComponentBase @inject IItemCategoriesAppService ItemCategoriesAppService @inject IUiMessageService UiMessageService @* ************************* PAGE HEADER ************************* *@ <PageHeader Title="@L["ItemCategories"]" BreadcrumbItems="BreadcrumbItems" Toolbar="Toolbar"> </PageHeader> @* ************************* SEARCH ************************* *@ <Card> <CardBody> <Form id="ItemCategorySearchForm" class="mb-3"> <Addons> <Addon AddonType="AddonType.Body"> <TextEdit @bind-Text="@Filter.FilterText" Autofocus="true" Placeholder="@L["Search"]"> </TextEdit> </Addon> <Addon AddonType="AddonType.End"> <SubmitButton Form="ItemCategorySearchForm" Clicked="GetItemCategoriesAsync"> <Icon Name="IconName.Search" Class="me-1"></Icon>@L["Search"] </SubmitButton> </Addon> </Addons> <Div Class="row col-md-2"> <Select SelectedValue="@Filter.ActiveFilter"> <SelectItem Value="0">@L["ActiveOnly"]</SelectItem> <SelectItem Value="1">@L["InactiveOnly"]</SelectItem> <SelectItem Value="2">@L["All"]</SelectItem> </Select> </Div> </Form> </CardBody> </Card> @* ************************* DATA GRID ************************* *@ <Card> <CardBody> <DataGrid TItem="ItemCategoryDto" Data="ItemCategoryList" ReadData="OnDataGridReadAsync" TotalItems="TotalCount" ShowPager="true" Responsive="true" PageSize="PageSize"> <DataGridColumns> <DataGridEntityActionsColumn TItem="ItemCategoryDto" @ref="@EntityActionsColumn"> <DisplayTemplate> <EntityActions TItem="ItemCategoryDto" EntityActionsColumn="@EntityActionsColumn"> <EntityAction TItem="ItemCategoryDto" Visible="@CanEditItemCategory" Clicked="async () => await OpenEditItemCategoryModalAsync(context)" Text="@L["Edit"]"></EntityAction> <EntityAction TItem="ItemCategoryDto" Visible="@CanDeleteItemCategory" Clicked="() => DeleteItemCategoryAsync(context)" ConfirmationMessage="@(()=> L["DeleteConfirmationMessage"])" Text="@L["Delete"]"></EntityAction> </EntityActions> </DisplayTemplate> </DataGridEntityActionsColumn> <DataGridColumn TItem="ItemCategoryDto" Field="Name" Caption="@L["Name"]"> </DataGridColumn> </DataGridColumns> </DataGrid> </CardBody> </Card> @* ************************* CREATE MODAL ************************* *@ <Modal @ref="CreateItemCategoryModal"> <ModalContent Centered="true"> <Form id="CreateItemCategoryForm"> <ModalHeader> <ModalTitle>@L["NewItemCategory"]</ModalTitle> <CloseButton Clicked="CloseCreateItemCategoryModalAsync" /> </ModalHeader> <ModalBody> <Validations @ref="@NewItemCategoryValidations" Mode="ValidationMode.Auto" Model="@NewItemCategory" ValidateOnLoad="false"> <Validation> <Field> <FieldLabel>@L["Name"] *</FieldLabel> <TextEdit Autofocus @bind-Text="@NewItemCategory.Name" MaxLength="ItemCategoryConsts.NameMaxLength"> <Feedback> <ValidationError /> </Feedback> </TextEdit> </Field> </Validation> </Validations> </ModalBody> <ModalFooter> <Button Color="Color.Secondary" Clicked="CloseCreateItemCategoryModalAsync"> @L["Cancel"] </Button> <SubmitButton Form="CreateItemCategoryForm" Clicked="CreateItemCategoryAsync" /> </ModalFooter> </Form> </ModalContent> </Modal> @* ************************* EDIT MODAL ************************* *@ <Modal @ref="EditItemCategoryModal"> <ModalContent Centered="true"> <Form id="EditItemCategoryForm"> <ModalHeader> <ModalTitle>@L["Update"]</ModalTitle> <CloseButton Clicked="CloseEditItemCategoryModalAsync" /> </ModalHeader> <ModalBody> <Validations @ref="@EditingItemCategoryValidations" Mode="ValidationMode.Auto" Model="@EditingItemCategory" ValidateOnLoad="false"> <Validation> <Field> <FieldLabel>@L["Name"] *</FieldLabel> <TextEdit Autofocus @bind-Text="@EditingItemCategory.Name" MaxLength="ItemCategoryConsts.NameMaxLength"> <Feedback> <ValidationError /> </Feedback> </TextEdit> </Field> </Validation> </Validations> </ModalBody> <ModalFooter> <Button Color="Color.Secondary" Clicked="CloseEditItemCategoryModalAsync"> @L["Cancel"] </Button> <SubmitButton Form="CreateItemCategoryForm" Clicked="UpdateItemCategoryAsync" /> </ModalFooter> </Form> </ModalContent> </Modal>backend code:
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Blazorise; using Blazorise.DataGrid; using Volo.Abp.BlazoriseUI.Components; using Microsoft.AspNetCore.Authorization; using Volo.Abp.Application.Dtos; using Volo.Abp.AspNetCore.Components.Web.Theming.PageToolbars; using RadixSalesQuote.BusinessObjects; using RadixSalesQuote.Permissions; using RadixSalesQuote.Shared; using Microsoft.AspNetCore.Mvc; using RadixSalesQuote.Enumerations; namespace RadixSalesQuote.Blazor.Pages { public partial class ItemCategories { protected List<Volo.Abp.BlazoriseUI.BreadcrumbItem> BreadcrumbItems = new List<Volo.Abp.BlazoriseUI.BreadcrumbItem>(); protected PageToolbar Toolbar {get;} = new PageToolbar(); private IReadOnlyList<ItemCategoryDto> ItemCategoryList { get; set; } private int PageSize { get; } = LimitedResultRequestDto.DefaultMaxResultCount; private int CurrentPage { get; set; } = 1; private string CurrentSorting { get; set; } private int TotalCount { get; set; } private bool CanCreateItemCategory { get; set; } private bool CanEditItemCategory { get; set; } private bool CanDeleteItemCategory { get; set; } private ItemCategoryCreateDto NewItemCategory { get; set; } private Validations NewItemCategoryValidations { get; set; } private ItemCategoryUpdateDto EditingItemCategory { get; set; } private Validations EditingItemCategoryValidations { get; set; } private Guid EditingItemCategoryId { get; set; } private Modal CreateItemCategoryModal { get; set; } private Modal EditItemCategoryModal { get; set; } private GetItemCategoriesInput Filter { get; set; } private DataGridEntityActionsColumn<ItemCategoryDto> EntityActionsColumn { get; set; } protected string SelectedCreateTab = "itemCategory-create-tab"; protected string SelectedEditTab = "itemCategory-edit-tab"; public ItemCategories() { NewItemCategory = new ItemCategoryCreateDto(); EditingItemCategory = new ItemCategoryUpdateDto(); Filter = new GetItemCategoriesInput { ActiveFilter = Enumerations.ActiveInactiveFilter.Active, MaxResultCount = PageSize, SkipCount = (CurrentPage - 1) * PageSize, Sorting = CurrentSorting }; } protected override async Task OnInitializedAsync() { await SetToolbarItemsAsync(); await SetBreadcrumbItemsAsync(); await SetPermissionsAsync(); } protected virtual ValueTask SetBreadcrumbItemsAsync() { BreadcrumbItems.Add(new Volo.Abp.BlazoriseUI.BreadcrumbItem(L["Menu:ItemCategories"])); return ValueTask.CompletedTask; } protected virtual ValueTask SetToolbarItemsAsync() { Toolbar.AddButton(L["NewItemCategory"], async () => { await OpenCreateItemCategoryModalAsync(); }, IconName.Add, requiredPolicyName: RadixSalesQuotePermissions.ItemCategories.Create); return ValueTask.CompletedTask; } private async Task SetPermissionsAsync() { CanCreateItemCategory = await AuthorizationService .IsGrantedAsync(RadixSalesQuotePermissions.ItemCategories.Create); CanEditItemCategory = await AuthorizationService .IsGrantedAsync(RadixSalesQuotePermissions.ItemCategories.Edit); CanDeleteItemCategory = await AuthorizationService .IsGrantedAsync(RadixSalesQuotePermissions.ItemCategories.Delete); } //private Task OnActiveFilterChanged(int value) //{ // Console.WriteLine(value.ToString()); // //Filter.ActiveFilter = (ActiveInactiveFilter)value; // return Task.CompletedTask; //} private async Task GetItemCategoriesAsync() { Filter.MaxResultCount = PageSize; Filter.SkipCount = (CurrentPage - 1) * PageSize; Filter.Sorting = CurrentSorting; var result = await ItemCategoriesAppService.GetListAsync(Filter); ItemCategoryList = result.Items; TotalCount = (int)result.TotalCount; } protected virtual async Task SearchAsync() { CurrentPage = 1; await GetItemCategoriesAsync(); await InvokeAsync(StateHasChanged); } private async Task OnDataGridReadAsync(DataGridReadDataEventArgs<ItemCategoryDto> e) { CurrentSorting = e.Columns .Where(c => c.SortDirection != SortDirection.Default) .Select(c => c.Field + (c.SortDirection == SortDirection.Descending ? " DESC" : "")) .JoinAsString(","); CurrentPage = e.Page; await GetItemCategoriesAsync(); await InvokeAsync(StateHasChanged); } private async Task OpenCreateItemCategoryModalAsync() { NewItemCategory = new ItemCategoryCreateDto{ }; await NewItemCategoryValidations.ClearAll(); await CreateItemCategoryModal.Show(); } private async Task CloseCreateItemCategoryModalAsync() { NewItemCategory = new ItemCategoryCreateDto{ }; await CreateItemCategoryModal.Hide(); } private async Task OpenEditItemCategoryModalAsync(ItemCategoryDto input) { var itemCategory = await ItemCategoriesAppService.GetAsync(input.Id); EditingItemCategoryId = itemCategory.Id; EditingItemCategory = ObjectMapper.Map<ItemCategoryDto, ItemCategoryUpdateDto>(itemCategory); await EditingItemCategoryValidations.ClearAll(); await EditItemCategoryModal.Show(); } private async Task DeleteItemCategoryAsync(ItemCategoryDto input) { await ItemCategoriesAppService.DeleteAsync(input.Id); await GetItemCategoriesAsync(); } private async Task CreateItemCategoryAsync() { try { if (await NewItemCategoryValidations.ValidateAll() == false) { return; } await ItemCategoriesAppService.CreateAsync(NewItemCategory); await GetItemCategoriesAsync(); await CloseCreateItemCategoryModalAsync(); } catch (Exception ex) { await HandleErrorAsync(ex); } } private async Task CloseEditItemCategoryModalAsync() { await EditItemCategoryModal.Hide(); } private async Task UpdateItemCategoryAsync() { try { if (await EditingItemCategoryValidations.ValidateAll() == false) { return; } await ItemCategoriesAppService.UpdateAsync(EditingItemCategoryId, EditingItemCategory); await GetItemCategoriesAsync(); await EditItemCategoryModal.Hide(); } catch (Exception ex) { await HandleErrorAsync(ex); } } private void OnSelectedCreateTabChanged(string name) { SelectedCreateTab = name; } private void OnSelectedEditTabChanged(string name) { SelectedEditTab = name; } } }In the GetItemCategoriesAsync method is where the Filter.ActiveFilter should be getting set to the value of the SelectedValue but it's not.
-
0
Hi,
Note: When dealing with a TValue of an enum type, you should be mindfull of your javascript serializer settings. As that will affect the correct handling of this type by the Select as it will need to javascript interop the enum value as a string. Applying the attribute [JsonConverter(typeof(System.Text.Json.Serialization.JsonStringEnumConverter))] to your enum should allow it to be properly bound.
And You should use two-way binding
<Select @bind-SelectedValue="@Filter.ActiveFilter"> <SelectItem Value="0">@L["ActiveOnly"]</SelectItem> <SelectItem Value="1">@L["InactiveOnly"]</SelectItem> <SelectItem Value="2">@L["All"]</SelectItem> </Select>
