Styling-HTML-Helfer ASP.NET MVC

Question

Wenn ich einen HTML-Helfer wie diesen habe:

Name:<br />
<%=Html.TextBox("txtName",20) %><br />

Wie wende ich eine CSS-Klasse darauf an?Muss ich es in eine Spanne einwickeln?Oder muss ich irgendwie die HtmlAttributes-Eigenschaft des Helfers nutzen?

Answer 1

Sie können es als Parameter an den TextBox-Aufruf übergeben.

Name:<br/>    
<%= Html.TextBox("txtName", "20", new { @class = "hello" }) %>

Diese Zeile erstellt ein Textfeld mit dem Wert 20 und weist das Klassenattribut mit dem Wert hello zu.Ich habe das @-Zeichen vor die Klasse gesetzt, da „class“ ein reserviertes Schlüsselwort ist.Wenn Sie weitere Attribute hinzufügen möchten, trennen Sie einfach die Schlüssel/Wert-Paare durch Kommas.

Answer 2

So fügen Sie eine Klasse und einen Stil zum selben Element hinzu ...

„x“ ist das Modell, das mit der Eigenschaft TextBoxID an die Ansicht übergeben wird

@Html.TextBoxFor(x => x.TextBoxID, new { @class = "SearchBarSelect", style = "width: 20px; background-color: green;" })

Answer 3

Ich habe etwas recherchiert und bin auf diesen Artikel gestoßen, der eine Lösung für Ihre Frage zu bieten scheint.

Ajax Control Toolkit mit ASP.NET MVC#

Quelle:Jimzimmerman

ARTIKELLINK

http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330

ZITAT

Wenn Sie also den Klassennamen Textboxwatermark auf einen Textbox -Eingang mit dem Titel einfügen, den Sie gerne als Wasserzeichen wie folgt anzeigen möchten:

<input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" />

oder

<%= Html.TextBox("username", new { @class = "TextboxWatermark", @title = "Must be at least 6 chars" }) %>

Was an der zweiten Option schön ist, ist, dass Sie den zusätzlichen Vorteil von der Ansichtsmotor erhalten, um den Wert des Textfelds auszufüllen, wenn ein Element in ViewData des ViewData.model mit einem VAR mit dem Namen "Benutzername" vorhanden ist.

Answer 4

Benutzen Sie die htmlAttributes Parameter mit einem anonymen Typ, wie tihs:

<%=Html.TextBox("txtName","20", new { @class = "test"}) %>

Answer 5

die Hilfsimplementierung

public static class LabelExtensioncs
{
    public static MvcHtmlString Alarm(this HtmlHelper helper, string target, string text)
    {
        return MvcHtmlString.Create(string.Format("<p class='alert' style='background-color: #b8f89d;border-radius: 5px;width: 100%;'><b>{0}</b><br /><i>{1}</i></p>", target, text));
    }    
}

die Verwendung im Ansichtsbereich

@Html.Alarm("Title", "please unsure your card no is invisible in your authorized information")

das Ergebnis

Answer 6

Es ist nicht erforderlich, span zu verwenden, da es nicht dynamisch ist.

CSS:

.testClass {
color: #1600d3;
}

Ansicht (Index):

@Html.TextBox("expression", "Text to show.", new { @class = "testClass" })

Wenn Sie dynamische Optionen benötigen, können Sie zum Beispiel Folgendes verwenden:

CSS:

.test class{
background: #ffffff;
}

Controller (Index für Test):

[HttpGet]
public ActionResult Index()
{
ViewBag.vbColor = "#000000";
return View();
}

Ansicht (Index):

<div>
<span>
@Html.TextBox("expression", "Text to show.", new 
{ @class = "testClass", @style="color: " + 
@ViewBag.vbColor })
</span>
</div>

Ich hoffe es hilft.

Answer 7

Ist es so viel mehr Arbeit?