2012-02-20 18 views
13

Uso ASP.NET MVC 3. Para mis formularios, alineo el texto de la etiqueta a la derecha. Además, hay dos puntos entre la etiqueta y el campo de entrada.Texto de la etiqueta Postfix con dos puntos

Firstname: [   ] 
    Last: [   ] 

puedo insertar automáticamente este colon usando CSS o algún código C# en MVC 3?

Lo mejor que se me ocurrió hasta ahora es utilizar el atributo [Display(Name="Firstname:")], pero esto tiene el efecto secundario de que también incluye este de colon en los mensajes de validación:

[Required] 
[Display(Name = "Firstname:")] 
[StringLength(100, ErrorMessage = "The {0} must be at least {2} character long.", MinimumLength = 1)] 
public string Firstname { get; set; } 

La otra alternativa era usar el LabelFor() sobrecarga del método, pero esto me obliga a especificar el texto de la etiqueta dos veces (una vez en el modelo y, una vez en el archivo cshtml):

<div> 
    <div class="editor-label">@Html.LabelFor(x => x.Firstname, "Firstname:")</div> 
    <div class="editor-field">@Html.TextBoxFor(x => x.Firstname)</div> 
</div> 

mejor sugerencia?

Respuesta

27

A través de CSS, puede agregar dos puntos a través de la pseudoclase after. Puede encontrar más información sobre esta pseudo clase here.

.editor-label > label:after { 
    content: ": " 
} 

Ejemplo de trabajo: http://jsfiddle.net/fJQDZ/

Tenga en cuenta que la clase de pseudo after no está disponible en Internet Explorer 7.

+0

Gracias, pero también es posible verificar si la longitud del contenido es mayor que cero. –

+1

No es posible hacerlo solo con CSS. Puede usar javascript para agregar una clase a un elemento si la longitud es mayor que cero. Y luego apunte esos elementos usando el mismo CSS en esta respuesta; p.ej. '.editor-label> .has-content: after {...}' –

+0

¡Gracias, eso funcionará! –

Cuestiones relacionadas