2012-02-20 5 views
13

ASP.NET MVC 3을 사용합니다. 양식의 경우 텍스트의 오른쪽에 맞 춥니 다. 또한 레이블과 입력 필드 사이에 콜론이 있습니다.콜론이 붙은 Postfix 레이블 텍스트

Firstname: [   ] 
    Last: [   ] 

나는 자동으로 CSS 또는 MVC 3에서 약간의 C# 코드를 사용하여이 대장을 삽입 할 수 있습니까?

지금까지 해낸 가장 좋은 것은 [Display(Name="Firstname:")] 속성을 사용하는 것입니다,하지만이 또한 확인 메시지에서이 대장 등의 부작용이 있습니다

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

다른 대안이를 사용하는 것이었다을 LabelFor() 메서드 오버로드는, 그러나 이것은 (한 번 모델에 한 번 cshtml 파일)를 두 번 레이블 텍스트를 지정하는 저를 강제로 :

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

더 좋은 제안을?

답변

27

CSS를 통해 after 가상 클래스를 통해 콜론을 추가 할 수 있습니다. 이 의사 클래스 here에 대한 자세한 정보를 찾을 수 있습니다.

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

근무 예 : http://jsfiddle.net/fJQDZ/

after 의사 클래스는 IE7에서을 사용할 수 없습니다.

+0

감사합니다.하지만 콘텐츠 길이가 0보다 큰지 확인할 수도 있습니다. –

+1

CSS만으로는 그렇게 할 수 없습니다. 길이가 0보다 큰 경우 자바 스크립트를 사용하여 요소에 클래스를 추가 할 수 있습니다. 그런 다음이 답변에서 동일한 CSS를 사용하여 해당 요소를 타겟팅하십시오. 예 : '.editor-label> .has-content : after {...}' –

+0

고마워, 그게 효과가있다! –