Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enter innerHtml to an input (generated with TagHelper)?

I created my own anchor tag using MVC 6 Tag Helper. It works fine if I give the innerHtml from a property but I want to give the innerHtml directly from HTML. Here is my TagHelper code for the custom anchor

   public string Text { get; set; }  

   public override void Process(TagHelperContext context, TagHelperOutput output)
   {
       var builder = new TagBuilder("a");

       output.Attributes.Add("data-controller", Controller);
       output.Attributes.Add("data-action", Action);

       if (!string.IsNullOrEmpty(Text))
       {
           builder.InnerHtml.Append(Text); // INNER HTML IS HERE!!! 
       }
       builder.AddCssClass("btn btn-link");
       output.Content.SetContent(builder);
       base.Process(context, output);
   }

And the usage is like this now (Current situation - it works)

<anchor-box name="ALink" controller="A" action="D" text="© 2016 Murat"></anchor-box>

Is it possible to give the inner html text manually like the following? (Needed situation - currently not works)

 <anchor-box name="ALink" controller="A" action="D">© 2016 Murat</anchor-box>
like image 690
wallace740 Avatar asked Dec 21 '25 03:12

wallace740


1 Answers

In order to achieve this, we have to use the Asyn version of Process method

    public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var content = output.GetChildContentAsync().Result.GetContent();

        var builder = new TagBuilder("a");
        builder.Attributes.Add("role", "button");
        builder.Attributes.Add("id", Name);
        builder.Attributes.Add("name", Name);
        output.Attributes.Add("data-controller", Controller);
        output.Attributes.Add("data-action", Action);

        builder.InnerHtml.Append(content);

        output.Content.SetContent(builder);

        return base.ProcessAsync(context, output);
    }

With the usage of ProcessAsync method, now I can give the inner html directly between the open-closing tags

<anchor-box name="ALink" controller="A" action="D">© 2016 Murat</anchor-box>
like image 139
wallace740 Avatar answered Dec 23 '25 17:12

wallace740