How can style be applied to tag helpers in a ASP.NET Core Razor view?

In a standard ASP.NET Core application say I have the following:

Model.cs

[Display(Name = "Foo")]
public string Foo { get;set; }

[Display(Name = "Bar")]
public string Bar{ get;set; }

Index.cshtml

    <div class="form-group">
        <div class="form-row">
            <div class="form-group col-sm-3">
                <label asp-for="Foo"></label><br />
                <label>@Model.Foo</label>
            </div>

            <div class="form-group col-sm-3">
                <label asp-for="Bar"></label><br />
                <label>@Model.Bar</label>
            </div>
        </div>
    </div>

Within site.css I have tried both of the following

label.bluetext{
    color: #3064b8; 
}

and

.bluetext{
    color: #3064b8; 
}

while applying the style like so

<label class="bluetext">@Model.Foo</label>

but I can't seem to get this to work with Razor tag helpers.

1 answer

  • answered 2019-07-11 01:59 Xing Zou

    You could press F12 to open DevTools and check whether the custom styles are applied successfully in the Sources Tab -> css folder -> site.css.

    enter image description here

    If not, clear cache and reload the page.

    Try to use asp-append-version="true" in your reference. It will append a version as a query string parameter which changes when the file is modified.

     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
    

    You could also direcly add styles in Index.cshtml to make it

    <style>
       label.bluetext {
          color:#3064b8;
       }
    </style>