Html.TextBox mit CSS-Klasse angegebenen Konflikten mit Formularüberprüfung css (Eingabe-Validierungs-Fehler)

Question

Interessante Situation. Ich habe eine Html.TextBox(), die ich aus einer Sicht wie folgt angezeigt:

<%= Html.TextBox("title", Model.Title, new { @class = "txt" }) %> 

In meinem Controller, ich habe die folgende, etwas vereinfacht, Validierung auf den Titel. Nehmen Sie für Argumente an, dass es den Fehler findet, und die Ansicht mit der Modestate-Fehlerinformation erneut rendert.

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult EditBook(string title) { 
    Model = new Book(ControllerContext.RequestContext); 
    if (String.IsNullOrEmpty(title)) 
    { 
     title = String.Empty; 
     ModelState.AddModelError("title", "* Title is a required"); 
     modelState.SetModelValue("title", ValueProvider["title"]); 
    } 
    else { // show confirmation } 

    if (!ModelState.IsValid) 
    { 
     return View("EditBook", Model); 
    } 
} 

Wenn die Seite neu gerendert, hat mein HTML-Textfeld korrekt die Input-Validierung-Fehlerklasse attached to it ... Aber es ist nutzlos, da es die erste Klasse ist angebracht! Ich brauche es, um alle vorhandenen Stile in meinem Textfeld zu überschreiben. Die HTML-Ausgabe wird wie folgt:

<input type="text" name="title" id="title" class="input-validation-error txt"/> 

Nehmen wir die folgende CSS-Stile definiert:

input.txt { border: 1px; color: #000 } 
.input-validation-error { border: 2px solid #fff } 

Das Problem ist, meine ursprüngliche CSS-Klasse „txt“ hat Vorrang, und verhindert, dass ich in der Lage, um das Fehlertextfeld korrekt zu formatieren.

Irgendwelche Gedanken?

Answer 1

Anstatt sich auf das Framework zu verlassen, um Stile überhaupt zu rendern, ging ich mit einem Ansatz, bei dem ich meine eigenen CSS-Klassen anwenden konnte, während ich noch einen Großteil der Html.ValidationMessage() - Infrastruktur verwendete.

etwa wie folgt aussieht:

<% bool emailError = !String.IsNullOrEmpty(Html.ValidationMessage("email")); %> 
<div id="EmailMod" class="module <%= emailError ? "error" : String.Empty %>"> 
    <label class="text_right">Email address</label> 
    <div class="input"> 
     <input type="text" id="Email" name="Email" class="input" tabindex="1" /> 
     <p id="EmailRequired" class="required <%= emailError ? "" : "hide" %>">* Please enter a valid email address.</p> 
    </div> 
</div> 

Answer 2

Dies ist mehr eine CSS-Frage als ASP.NET MVC-spezifisch. Sie sollten sich den Abschnitt Cascading order der CSS spec ansehen.

, die mit im Auge, können Sie die Priorität Ihrer Stile ändern, indem es zwicken wie folgt:

input.txt { border: 1px; color: #000 } 
input.input-validation-error { border: 2px solid #fff } 

Mit dem Zusatz des Elements in der Eingangs-Validierung-Fehlerklasse, die Spezifität der zwei Stile wären gleich. Dies führt dazu, dass die Deklarationsreihenfolge der Stile verwendet wird, um die Vorrangstellung zu bestimmen (in diesem Fall sagt die Spezifikation, dass die letzte Deklaration gewonnen hat).

Beachten Sie, dass das obige Beispiel nur eine Möglichkeit ist, den Vorrang zu steuern ... es könnte einen besseren Weg geben, aber ich bin kein CSS-Experte. Sie können eine bessere/aufschlussreichere Antwort erhalten, wenn Sie eine CSS-Frage mit CSS-Tags erneut stellen.

PS. Die Reihenfolge, in der die Klassennamen für das Element deklariert werden, ist für die Bestimmung der Priorität irrelevant.

Answer 3

Wenn Sie den! Wichtig Modifikator hinzufügen, sollte es mit diesem Problem helfen.

.input-validation-error { border: 2px solid #fff !important; } 

Auch modifizieren, was @DSO etwas gesagt, ich bin ziemlich sicher, dass Sie auch diese könnten versuchen:

input.txt { border: 1px; color: #000 } 
input.txt.input-validation-error { border: 2px solid #fff } 

Wie ich schon sagte, ich bin mir ziemlich sicher, Sie können das tun, wenn Sie habe etwas mit zwei CSS-Klassen.