CODEWITHSUNDEEP
htmlcssrazorasp.net-mvc-5
ubercellogeek
ubercellogeek

Reputation: 27

How do I customize the HTML attributes used by razor to render ModelState errors in MVC5

I'm using the Materialize CSS framework with a new MVC5 project. I am looking for a way for razor to render the model errors differently than it does out of the box. For example, the following razor produces the html output given the model error upon form submission. Note: I do already have data annotations on the view model for specifying that the FirstName field is required.

       <div class="row margin">
            <div class="input-field col s12">
                @Html.LabelFor(m => m.FirstName)
                @Html.TextBoxFor(m => m.FirstName)
            </div>
        </div>

Renders the following html upon the modelstate having an error:

       <div class="row margin">
            <div class="input-field col s12">
                <label for="FirstName">First Name</label>
                <input class="input-validation-error" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" type="text" value="">
            </div>
        </div>

What I would want is for the following html output to be the following:

       <div class="row margin">
            <div class="input-field col s12">
                <label for="FirstName" class="active" data-error="The First Name field is required.">First Name</label>
                <input class="validate invalid" id="FirstName" name="FirstName" type="text" value="">
            </div>
        </div>

I am albiet, not super experienced with MVC razor in general, so this may be a simple fix. Basically, I want three things to happen only upon model state error for this field:

  1. Assign the "active" CSS class to the label element.
  2. Add the data-error attribute to the label element with the specified modelstate error.
  3. Assign the "validate" and "invalid" CSS classes to the input element.

Any help would be much appreciated!

Upvotes: 0

Views: 469

Answers (1)

Joseph Woodward
Joseph Woodward

Reputation: 9281

Unfortunately there's no way to modify the output of HTML from the existing HTML helpers, or to extend the helpers and override them.

From here your best bet is to create your own html helpers like so:

public class LabelHelper
{
    public static string Label(this HtmlHelper html, string target, string text)
    {
        return string.Format("<label for='{0}'>{1}</label>", target, text);
    }
}

Whilst creating simple helpers can be relatively straight forward, as your HTML becomes more and more complex (and you start to interrogate a fields model state) it starts to become more complex, and whilst you can use the native TagBuilder class, I would recommend taking a look at the HtmlTags Nuget package that goes a long way to take the pain out of building HTML tags.

In addition to this, if you're going to be using your HTML helpers it might be an idea to import the namespace via your web.config file to save you from having to explicitly include the namespace in all of your views:

<system.web.webPages.razor>
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization" />
        <add namespace="System.Web.Routing" />
        <add namespace="YourWebApp" />
    </namespaces>
    </pages>
</system.web.webPages.razor>`

Upvotes: 0

Related Questions