2017-10-10 7 views
0

Zuvor habe ich ein eigenes Formular mit HTML und CSS erstellt. Ich habe CSS-Klassen und IDs kombiniert, um den gewünschten Stil zu erstellen. Aus Gründen der Zweckdienlichkeit & ein Vorschlag von einem Lynda.com-Video Ich wollte die Referenzbibliotheken nutzen, um eine clientseitige Formularvalidierung (mit der jQuery Validate-Bibliothek) zu ermöglichen. Jetzt versuche ich, meine Klassen und IDs auf die automatisch generierten Labels und Eingabefelder anzuwenden, aber die CSS wird kaum angezeigt.Anwenden von CSS auf Rasierhelfer

Meine Frage ist: Wie würde ich Klassen und IDs auf diesen Code anwenden, so dass die Eingabefelder und ihre Titel genau wie die div-Elemente angezeigt werden, die ich zuvor verwendet habe.

Zurück Code

<div class="text" id="name">Name</div> 
<div id="name_input">@Html.TextBox("Name", null, new { @class = "textbox" }) 
</div> <br /> 

Automatisch generierte Code & mein Versuch, CSS hinzufügen

<!-- Name --> 
<div class="form-group"> 
    @Html.LabelFor(model => model.Name, htmlAttributes: new {@class = "text" }) 
    <div class="col-md-10"> 
    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "textbox", @id = "input_name"}}) 
    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger"}) 
    </div> 
</div> 
+0

Es wäre besser, die CSS anstelle des Rasierers zu ändern. Versuchen Sie, CSS-Selektoren nach Klasse zu erstellen und verwenden Sie keine ID wie input_name. Weil @ Html.EditorFor (model => model.Name, erstellt seine eigene ID und wenn Sie die ID explizit mit htmlAttributes ändern .. Das Eingabefeld wird die serverseitige Validierung verpassen. –

+0

Dies erwies sich als die bessere Option. Viel schneller und viel mehr Flexibilität.Kann Ihnen nicht die richtige Antwort geben, da dies ein Kommentar ist: / –

Antwort

-1

Antwort von Rohilas Behera

Es wäre besser, die CSS zu ändern anstelle des Rasierers. Versuchen Sie, CSS-Selektoren nach Klasse zu erstellen und verwenden Sie keine ID wie input_name. Denn @Html.EditorFor(model => model.Name, erstellt seine eigene ID und wenn Sie die ID explizit mit htmlAttributes ändern .. Das Eingabefeld wird die serverseitige Validierung verpassen.