CODEWITHSUNDEEP
c#cssasp.net-mvc-3validationrazor
horgh
horgh

Reputation: 18534

Can I make mvc model validation use different error css styles for different editors?

When we use mvc model validation engine, it automatically adds certain css classes from Site.css to editors, generated by HTML helper methods; i.e.one of these for certain object:

.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

We can surely edit these styles to apply the required styling.

But is there an opportunity to tell the model validation engine, what exact style to use, depending on any user requirements, so that we could have one page with different fields, styled differently?

EDIT

Say we have the following view:

@model ModelValidation.Models.Appointment
@{
    ViewBag.Title = "Make a Booking";
}
<h2>
    Book an Appointment</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <p>
        @Html.LabelFor(m => m.ClientName, "Your name: ") @Html.EditorFor(m => m.ClientName)
        @Html.ValidationMessageFor(m => m.ClientName)
    </p>        
    <p>
        @Html.LabelFor(m => m.Date, "Appointment Date: ") @Html.EditorFor(m => m.Date)
        @Html.ValidationMessageFor(m => m.Date)
    </p>
    <p>
        @Html.EditorFor(m => m.TermsAccepted) @Html.LabelFor(m => m.TermsAccepted, "I accept the terms & conditions")
        @Html.ValidationMessageFor(m => m.TermsAccepted, null, new { @class = "other-input-validation-error" })
    </p>
    <input type="submit" value="Make Booking" />
}

With @Html.ValidationMessageFor overload we can specify the css class to style error message. But how can we specify css class for the editor?

Upvotes: 3

Views: 8108

Answers (2)

horgh
horgh

Reputation: 18534

I'm indeed waiting for other answers in impatience, but until that this is what I came up with.

There is a necessary overload for concrete helper methods like Html.TextBoxFor or Html.PasswordFor, etc. So the following example shows what I wanted:

@using (Html.BeginForm())
{
    <p>
        @{ModelState state = ViewData.ModelState["ClientName"];            
        }
        @Html.LabelFor(m => m.ClientName, "Your name: ")
        @if (state != null && state.Errors.Count > 0)
        {
            @Html.TextBoxFor(m => m.ClientName, new { @class = "other-input-validation-error" })
        }
        else
        {
            @Html.EditorFor(m => m.ClientName)
        }
        @Html.ValidationMessageFor(m => m.ClientName)
    </p>        
}

But I am still open to any other ideas how to do this. I'm very new to asp in general and may be easily missing (simply don't know) some nice feature of the technology.

EDIT

As it is said in Sanderson S. Freeman A. - Pro ASP.NET MVC 3 Framework Third Edition

We can’t use the templated helpers to generate an editor for a property if we also want to provide additional attributes, so we have used the Html.TextBoxFor helper instead and used the version that accepts an anonymous type to use for HTML attributes.

Upvotes: 1

arkoak
arkoak

Reputation: 2497

You can always use another css file included for that specific page which overrides your settings. To override the settings of the CSS generated by MVC, you can use a container ID like this

#container .mvc_css_class
{
    display: none;

}

Another option is to use element names to increase the precedence of your own css but does not work by specifying a different ID

div.mvc_css_class
{
    display: none;

}

So if you want to style a single page differently, just include your css file and set the container ID to a different value for that page, the new css settings will override based on the container .

EDIT : To have option to override styling on every page, separate settings must be used on every page. First name the form container id differently

<div id="container-homepage">
    ...... the form data with original settings ..
</div>

in your css file, use the id to apply the styles you want for the homepage

#container-homepage .mv_generated_class{ 
    color : blue;
}

Repeat the same with all the pages and classes you want to look different

Upvotes: 0

Related Questions