asp.net mvc hinzufügen css zu editorfor?

Question

Ich möchte den Stil der "Editor für" Textbox von MVC ändern, insbesondere möchte ich die Textbox größer machen.

Ich habe versucht, css ein paar Möglichkeiten, ohne Erfolg.

einschließlich:

<td class="myCss"><%=Html.EditorFor(x => x.NickName)%></td> 

und

<td class="myCss"><%=Html.EditorFor(x => x.NickName, new { @class = "myCss" })%></td> 

Hilfe pls!

Answer 1

Versuchen Sie, diese

<%= Html.TextBoxFor(x => x.NickName, new { @class = "myCss" })%> 

oder

<%= Html.TextAreaFor(x => x.NickName, new { cols = "40%", @class = "myCss" })%> 

Jetzt können Sie Ihre Attribute definieren, weil MVC weiß, welche Art (TextArea-) zu verwenden.

Answer 2

Robh,

ist es schwierig, aus Ihrer Frage wissen, ob Sie sich für eine ‚allgemeine‘ oder spezifische Lösung in Ihrem Projekt suchen. als solche werde ich die generische - arbeiten einmal, funktioniert überall Lösung.

Dies erfordert ein paar Schritte (Konvention über Konfiguration). im Grunde ist hier, was erforderlich ist:

• neuen Ordner unter erstellen 'Aufrufe-> shared genannt Editor Vorlagen'
• erstellen Sie eine neue usercotrol (ascx) -Dateien unter diesem genannten 'string.ascx'

jetzt, dass ascx Datei definieren gemäß:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %> 
<div class="editor-label"> 
    <%= Html.LabelFor(model => model) %> 
</div> 
<div class="new-editor-field"> 
    <%= Html.TextBoxFor(model => model) %> 
    <%= Html.ValidationMessageFor(model => model) %> 
</div> 

dies wird n make alle 'string' basierten EditorFor() -Aufrufe verwenden diese 'Vorlage'. Machen Sie einfach das Feld 'new-editor-field' für den gewünschten css-Stil für dieses Feld. Natürlich, kochen Sie nach Ihrer eigenen Anforderung (dh Sie wollen nicht die LabelFor Tat etc ..)

hoffe, dass dies hilft - tho ich muss sagen, dies ist nur eine von ein paar Möglichkeiten, dies zu tun (aber ist meine bevorzugte Art).

genießen

jim

Answer 3

Platz Ergebnis EditorFor in einem div mit einigem Klassenattribut auf, und innerhalb Stildefinition für diese Klasse verwenden! Wichtige Richtlinie zu zwingen, innerhalb dieses div gewünschter Werte zu etwas akzeptieren .

Answer 4

die Sie interessieren,

https://stackoverflow.com/a/4249988/505474

von oben Link kopiert,

@model DateTime? 

@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" }) 

Es funktioniert für mich ...

Answer 5

Vielmehr Ihr Eingabefeld als erforderlich, die Klasse direkt angewandt hat, können Sie die folgende verwenden:

<div class="editor-field myCss"> 
    @Html.EditorFor(model => model.Nickname) 
</div> 

was dazu führt, etwa die folgenden HTML

<div class="editor-field myCss"> 
    <input class="text-box single-line" data-val="true" id="Nickname" name="Nickname" type="text" value=""> 
</div> 

Dann nur die CSS-Regel verwenden um angemessen zu stylen

.myCss input.text-box {font-size: 2em;}