Open Closed

TagViewComponent not working in Blazor Server app #5576


User avatar
0
phil@travelengine.com.au created
  • ABP Framework version: v7.3.1
  • UI Type: Blazor Server
  • Database System: EF Core (SQL Server)
  • Tiered (for MVC) or Auth Server Separated (for Angular): no
  • Exception message and full stack trace:
  • Steps to reproduce the issue:

I wish to add tagging capability (from the CMS Kit) to various entities I am creating within my application. I am attempting to follow the instructions here: https://docs.abp.io/en/abp/latest/Modules/Cms-Kit/Tags

I can add/edit/delete tags through the CMS admin pages. However, the instructions on how to use the Tags widget appear to only apply to MVC apps. How do I utilise this widget in a Blazor Server app? If I do it as per the instructions and add the component into the relevant razor page it produces an error:

The 'await' operator can only be used within an async lambda expression. Consider marking this lambda expression with the 'async' modifier.

Thanks, Phil


3 Answer(s)
  • User Avatar
    0
    jfistelmann created

    You can not use ViewComponents in Blazor.

    You would need to either implement a Blazor component for that or provide a cshtml file (like it's done here)

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello @phil@travelengine.com.au,

    by default, the "TagViewComponent" widget comes with CMS Kit (namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags) and you can use it directly within your application. And the implementation for Blazor (Server/WASM) and MVC is mostly similar.

    However, if you wish to implement it, I hope the following code would be useful.

    [Widget(
        StyleFiles = new[]
        {
                "/Pages/CmsKit/Shared/Components/Tags/default.css" // or the path that you want to use
        })]
    public class TagViewComponent : AbpViewComponent
    {
        protected readonly ITagAppService TagAppService;
         public TagViewComponent(ITagAppService tagAppService)
        {
            TagAppService = tagAppService;
        }
         public virtual async Task<IViewComponentResult> InvokeAsync(
            string entityType,
            string entityId,
            string urlFormat)
        {
            var tagDtos = await TagAppService.GetAllRelatedTagsAsync(entityType, entityId);
            var viewModel = new TagViewModel
            {
                EntityId = entityId,
                EntityType = entityType,
                Tags = tagDtos,
                UrlFormat = urlFormat
            };
            return View("~/Pages/CmsKit/Shared/Components/Tags/Default.cshtml", viewModel);
        }
        public class TagViewModel
        {
            public List<TagDto> Tags { get; set; }
            public string EntityId { get; set; }
            public string EntityType { get; set; }
            public string UrlFormat { get; set; }
        }
    }
     
    [Serializable]
    public class TagDto : ExtensibleEntityDto<Guid>, IHasConcurrencyStamp
    {
        public string EntityType { get; set; }
        public string Name { get; set; }
        public string ConcurrencyStamp { get; set; }
    }
    

    Please let me know if this is what you are looking for.

  • User Avatar
    0
    phil@travelengine.com.au created

    Thanks very much Anjali for getting back to me.

    We are doing some prototyping and due to the lack of consistency in capabilities between Blazor and MVC we have now decided to build with the MVC version. It seems that this will require less dev effort at our end until ABP fully supports Blazor.

    It might be worth correcting the documentation to show where samples are specific to a certain UI. E.g. this page: https://docs.abp.io/en/abp/7.3/Modules/Cms-Kit/Tags contains no indication that the instructions are only relevant for the MVC UI.

    Cheers, Phil

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11