aides Styling HTML ASP.NET MVC

Question

Si j'ai une aide HTML comme ceci:

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

Comment appliquer une classe CSS à elle? Dois-je envelopper dans une durée? Ou dois-je utiliser en quelque sorte la propriété HtmlAttributes de l'assistant?

Answer 1

Vous pouvez le passer dans l'appel TextBox en tant que paramètre.

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

Cette ligne crée une zone de texte avec la valeur 20 et attribue l'attribut de classe avec la valeur hello. J'ai placé le caractère @ devant la classe, car class est un mot-clé réservé. Si vous souhaitez ajouter d'autres attributs, séparez simplement les paires clé/valeur par des virgules.

Answer 2

Utilisez le paramètre htmlAttributes avec un type anonyme, comme tihs:

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

Answer 3

Je l'ai fait quelques recherches et suis tombé sur cet article qui semble avoir une solution à votre question.

Ajax Control Toolkit avec ASP.NET MVC#

source: jimzimmerman

ARTICLE LINK

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

QUOTE

Donc, fondamentalement, si vous mettez le nom de classe TextboxWatermark sur une entrée de zone de texte avec le titre que vous aimez montrer que le filigrane comme ceci:

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

ou

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

Ce qui est bien à propos de la deuxième option est que vous obtenez l'avantage supplémentaire de obtenir le View Engine pour remplir la valeur de la zone de texte s'il y a un élément dans ViewData du ViewData.Model qui a un var nommé 'nom d'utilisateur'.

Answer 4

Est-ce que beaucoup plus de travail?

Answer 5

Voici comment ajouter une classe et un style sur le même élément ...

« x » étant le modèle passé à la vue d'une propriété de TextBoxID

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