Styling degli helper HTML ASP.NET MVC

Question

Se ho un helper HTML in questo modo:

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

Come posso applicare una classe CSS ad esso?Devo avvolgerlo in una spanna?Oppure devo in qualche modo utilizzare la proprietà HtmlAttributes dell'helper?

Answer 1

Puoi passarlo nella chiamata TextBox come parametro.

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

Questa riga creerà una casella di testo con il valore 20 e assegnerà l'attributo class con il valore ciao.Metto il carattere @ davanti alla classe, perché class è una parola chiave riservata.Se desideri aggiungere altri attributi, separa semplicemente le coppie chiave/valore con virgole.

Answer 2

Ecco come aggiungere una classe e uno stile sullo stesso elemento...

"x" è il modello passato alla vista con una proprietà TextBoxID

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

Answer 3

Ho fatto qualche ricerca e ho trovato questo articolo che sembra avere una soluzione alla tua domanda.

Kit di strumenti di controllo Ajax con ASP.NET MVC#

fonte:jimzimmerman

LINK ARTICOLO

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

CITAZIONE

Quindi, fondamentalmente, se si inserisce il nome della classe TextBoxWatermark su qualsiasi input della casella di testo con il titolo che ti piace mostrare come filigrana in questo modo:

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

O

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

Ciò che è bello della seconda opzione è che si ottiene il vantaggio aggiuntivo di far riempire il motore Visualizza per compilare il valore della casella di testo se c'è un elemento in ViewData di ViewData.Model che ha un VAR chiamato "nome utente".

Answer 4

Usa il htmlAttributes parametro con un tipo anonimo, come tih:

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

Answer 5

l'implementazione dell'helper

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));
    }    
}

l'utilizzo nella sezione vista

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

il risultato

Answer 6

Non è necessario utilizzare lo span perché non è dinamico.

CSS:

.testClass {
color: #1600d3;
}

Visualizza (Indice):

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

se hai bisogno di opzioni dinamiche puoi usare ad esempio:

CSS:

.test class{
background: #ffffff;
}

Controller (Indice per test):

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

Visualizza (Indice):

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

Spero che sia d'aiuto.

Answer 7

È molto più lavoro?