Andi AR
Andi AR

Reputation: 2918

How to implement custom taghelper in .NET MAUI BLAZOR project

I tried to implement a custom TAGhelper in .NET MAUI blazor project but not working. Seems viewimport is not properly registered. Custom component not rendering & breakpoint also not hitting.

Below steps, I followed:

  1. Installed Microsoft.AspNetCore.Mvc.TagHelpers and Microsoft.AspNetCore.Mvc.TagHelpers via Nugget.

  2. Implemented simple custom TagHelper.cs file as mentioned below:

    
    using Microsoft.AspNetCore.Razor.TagHelpers;
    
    namespace Sitecore.MAUI.Service.RenderingEngine.TagHelpers
    {
        [HtmlTargetElement("sc-placeholder")]
        public class PlaceholderTagHelper : TagHelper
        {       
            public override void Process(TagHelperContext context, TagHelperOutput output)
            {
                output.Content.SetContent("Custom sc component");
            }
        }
    }

  1. Created Viewimport.cshtml inside a shared folder. As well I tried to create a view folder and placed it. Both not working. below lines inside the viewport.
@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
@addTagHelper "*, Sitecore.MAUI.Service.RenderingEngine.TagHelpers"
  1. I tried using viewimport.razor , instead of cshtml but it's throwing an error. So I kept it as cshtml.

The directives @addTagHelper, @removeTagHelper and @tagHelperPrefix are not valid in a component document. Use '@using ' directive instead. c:***\Src\Sitecore.Net.MAUI.Blazor.Client\Shared_ViewImports.razor

  1. In the main layout.razor I placed the component as shown below:
@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <sc-placeholder name="myproject-main"></sc-placeholder>
            @Body

        </article>
    </main>
</div>

Upvotes: 2

Views: 386

Answers (0)

Related Questions