CODEWITHSUNDEEP
cssattributesasp.net-core-mvcasp.net-core-tag-helpers
user8532173
user8532173

Reputation:

How do I get HTML attribute's value by TagHelper?

I have a simple ASP.NET Core 2.1 tag helper, that adds style attribute if does not exist yet:

[HtmlTargetElement(Attributes = "yellow")] //contains "yellow" attribute
    public class YellowTagHelper : TagHelper
    {
       public override void Process(TagHelperContext context, TagHelperOutput output)
       {
            if (!output.Attributes.ContainsName("style"))
            {
                output.Attributes.SetAttribute("style", "color: yellow;");
            }
            else
            {
                //how to add 'color: yellow;' value, if 'style' attribute exists already?
                //or how to retrieve existing 'style' value? then I will be able to create new one
            }
       }
   }

And using it as follows:

<div class="element1" id="el1id" runat="server" yellow>
        TEST el1 //here is fine
    </div>
    <div class="element2" id="el2id" runat="server" style="background-color: pink" yellow>
        TEST el2 //here I want to add 'color: yellow;'
    </div>

And I am stuck with finding solution how to update style attribute's value with my tag helper.

Upvotes: 0

Views: 2674

Answers (2)

user8532173
user8532173

Reputation:

Ok, I found what I was looking for. Solution based on >>THIS<< answer, includesalready taking color from DB:

[HtmlTargetElement(Attributes = "yellow")] //contains "yellow" attribute
    public class YellowTagHelper : TagHelper
    {
        private ApplicationDbContext _context;

        public YellowTagHelper(ApplicationDbContext ctx)
        {
            _context = ctx;
        }
       public override void Process(TagHelperContext context, TagHelperOutput output)
       {
            var colors = _context.ColorPanels.FirstOrDefault(); //context
            var colorStyle = "color:" + colors.Element3BackgroundColor; //new color
            if (!output.Attributes.ContainsName("style"))
            {
                output.Attributes.SetAttribute("style", colorStyle);
            }
            else
            {
                var currentAttribute = output.Attributes.FirstOrDefault(attribute => attribute.Name == "style"); //get value of 'style'
                string newAttributeValue = $"{currentAttribute.Value.ToString() + "; " + colorStyle}"; //combine style values
                output.Attributes.Remove(currentAttribute); //remove old attribute
                output.Attributes.SetAttribute("style", newAttributeValue); //add merged attribute values
            }
        }
   }

Upvotes: 1

wandos
wandos

Reputation: 1619

Create a service

public class ColorService
{

    public ColorService()
    {
    }

    public string GetColor()
    {
        // Add your logic here
        return "Yellow";
    }
}

And in you view, just inject it

@inject ColorService ColorService;

And later in the view:

<div class="element2" id="el2id" runat="server" style="background-color: @ColorService.GetColor()" yellow>
    TEST el2 //here I want to add 'color: yellow;'
</div>

You can refer to this answer for more details in case you need to add Db context into your service ASP.NET Core 2.1 insert CSS in layout based on data in DB

Upvotes: 0

Related Questions