Aspnetcore: HTMLHelper default css class names

[bigcitydev]

I want to change default css class names to support bootstrap 4.

4819

Please look on the bottom of the issue for context and explanation

I could not believe the values were hardcoded, but after 3.0 upgrade they remove the possibility to even change them.

Is there any workaround without using tag helpers ?

(Please dont tell me to use css rules for the default classes)

[alexandrejobin]

With Core 2.2, we were able to override the default styling of the error messages by doing the following in the Startup.cs file:

public class Startup
{
    private readonly IConfiguration configuration;
    private readonly IHostingEnvironment hostingEnvironment;

    public Startup(IConfiguration configuration, IHostingEnvironment hostingEnvironment)
    {
        //logger.LogInformation("Application starting.");

        this.configuration = configuration;
        this.hostingEnvironment = hostingEnvironment;

        ChangeDefaultValidationClassesForBootstrap4ValidationClasses();
    }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.Configure<CookiePolicyOptions>(options =>
        {
            // This lambda determines whether user consent for non-essential cookies is needed for a given request.
            options.CheckConsentNeeded = context => true;
            options.MinimumSameSitePolicy = SameSiteMode.None;
        });

        services
            .AddMvc()
            .SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app)
    {
        if (hostingEnvironment.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            app.UseHsts();
        }

        app.UseStaticFiles();
        app.UseCookiePolicy();
        app.UseMvc();
    }

    /// <summary>
    /// Change from default validation CSS classes to 'Bootstrap 4' validation classes.
    /// In particular it changes values of a bunch of static readonly variables in HtmlHelper class.
    /// </summary>
    private void ChangeDefaultValidationClassesForBootstrap4ValidationClasses()
    {
        SetPublicFieldValue<HtmlHelper>(nameof(HtmlHelper.ValidationInputCssClassName), "is-invalid");
        SetPublicFieldValue<HtmlHelper>(nameof(HtmlHelper.ValidationInputValidCssClassName), "is-valid");
        SetPublicFieldValue<HtmlHelper>(nameof(HtmlHelper.ValidationMessageCssClassName), "invalid-feedback");
        SetPublicFieldValue<HtmlHelper>(nameof(HtmlHelper.ValidationMessageValidCssClassName), "valid-feedback");
        SetPublicFieldValue<HtmlHelper>(nameof(HtmlHelper.ValidationSummaryCssClassName), "validation-summary-errors alert alert-danger");
        SetPublicFieldValue<HtmlHelper>(nameof(HtmlHelper.ValidationSummaryValidCssClassName), "validation-summary-valid alert alert-success");
    }

    private static void SetPublicFieldValue<T>(string fieldName, object fieldValue)
    {
        FieldInfo fieldInfo = typeof(T).GetField(fieldName, BindingFlags.Public | BindingFlags.Static);

        if (fieldInfo == null)
        {
            throw new NullReferenceException(string.Format("Static field '{0}' not found in '{1}' class", fieldName, nameof(T)));
        }

        fieldInfo.SetValue(null, fieldValue);
    }
}

I don't remember where I took this sample code but it worked flawlessly until I upgrade my project to Core 3.0 where I get the error message:

System.FieldAccessException: 'Cannot set initonly static field 'ValidationInputValidCssClassName' after type 'Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper' is initialized.'

We should be able to set the css class dynamically so we can support what ever css framework that we want.

[mkArtakMSFT]

Thanks for contacting us.
This is indeed not possible at the moment. We will look into this later during 5.0 timeframe.

[bigcitydev]

@mkArtakMSFT

Why is not possible for example to remove the readonly from the css class strings?

So we can use 3.1 release with the workaround.

Net Core is all about cross platform and then you can't even switch CSS frameworks if you are not a rocket scientist.

For me this is a fat bug :-)

In my opinion not acceptable for Long Term Support Release.

[ctolkien]

Seeing as the other thread was closed due to "not enough community involvement", allow me to add a useless comment to signify that this is a big and consistent pain point with using MVC.

[pellesantiago]

Indeed, i will like to set my own css classes for validation.
Please fix it. Remove the readonly and the workaround will keep working as net 2.2.
Thank you

[FWest98]

I would really like this feature as well. I found a temporary work-around, by making a custom HtmlGenerator and let the DI system inject that version in the html builders, instead of the DefaultHtmlGenerator. This way, you can replace the "incorrect" classes by your own custom ones.
For an example, I created a gist: https://gist.github.com/FWest98/9141b3c2f260bee0e46058897d2017d2 I also included a piece of code to update the jQuery ubobtrusive validation library as well.

[mkArtakMSFT]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[REscobar]

I agree with the request, remembering to add a taghelper to every single input is quite painful.

I am using Bootstrap 4 and would like to set the validation class to something else other than the current.

Is there any workarround to not add an aditional tag to every single input, like create an _Input_ tag helper that would check the model state and add the correct class?

[FWest98]

The workaround I linked above (https://gist.github.com/FWest98/9141b3c2f260bee0e46058897d2017d2) replaces the classes that are added, such that you can modify the exact classes you want for validation success and fail. The gist contains fixes for both the frontend jQ validation code, as well as the backend model state code.

[REscobar]

@FWest98 Somehow I missed your previous post with the workaround, your workarround fits like a glove, thanks