ayudantes HTML Styling ASP.NET MVC

Question

Si tengo un asistente de HTML así:

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

¿Cómo solicito una clase CSS a ella? ¿Tengo que envolverlo en un lapso de tiempo? ¿O necesito utilizar de algún modo la propiedad HtmlAttributes del helper?

Answer 1

Puede pasarlo a la llamada de TextBox como parámetro.

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

Esta línea creará un cuadro de texto con el valor 20 y asignará el atributo de clase con el valor hola. Pongo el carácter @ al frente de la clase, porque la clase es una palabra clave reservada. Si desea agregar otros atributos, simplemente separe los pares clave/valor con comas.

Answer 2

utilizar el parámetro htmlAttributes con un tipo anónimo, como tihs:

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

Answer 3

hice algunas investigaciones y me encontré con este artículo que parece tener una solución a su pregunta.

Ajax Control Toolkit con ASP.NET MVC#

fuente: jimzimmerman

ARTÍCULO ENLACE

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

CITA

Así que, básicamente, si se pone el nombre de clase TextboxWatermark en cualquier entrada de texto con el título que desee mostrar como el marca de agua como esto:

<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" }) %> 

Lo que es agradable sobre la segunda opción es que obtienes el beneficio adicional de obteniendo el motor de vista para completar el valor del cuadro de texto si hay un elemento en ViewData del ViewData.Model que tiene una var llamada 'nombre de usuario'.

Answer 4

es lo que mucho más trabajo?

Answer 5

Esto es cómo agregar una clase y un estilo en el mismo elemento ...

"x" es el modelo aprobado a la vista con una propiedad de TextBoxID

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