2014-01-22 1 views
1

@Html.EditorFor(m => m.SomeAttribute)을 사용할 때 표시된 스타일을 수정하려면 모델의 각 속성 데이터 유형에 대해 새 클래스를 선언하지 않고 기본 CSS 클래스를 재정의하는 방법을 알고 싶습니다. 다른 말로.MVC : 어떤 CSS 클래스가 Html.EditorFor() 메소드를 구현합니까?

나는이 일을하지 않으려 :

아시다시피
@Html.LabelFor(m => m.ddlStationId, new {@class="label"}) 
    @Html.EditorFor(m => m.ddlStationId, new { ReadMethod = "Read", ReadController = "Receiver",@class="combobox" }) 
    @Html.EditorFor(m => m.txbBrandName,new {@class="textbox"}) 

, EditorFor()는 데이터 유형에 따라 다른 행동을 가지고, 그래서이 클래스의 위치를 ​​알고 싶어요.

UIHint 클래스를 데코레이터로 사용하여 뭔가를하고 EditorTemplate을 정의했지만 기본 CSS를 재정의 할 수 없었습니다. 중요한 것은 제가 검도 UI 프레임 워크를 사용하고 있다는 것입니다. 관련성이있는 몇 가지 추가 정보.

답변

0

감사합니다. tommy! 나는 이런 식으로했지만 UIhint를 사용했다. 그래서 속성을 선언 할 때 데이터 유형에 따라 일부 데코레이터를 설정했고 CSS 스타일을 사용했다. 편집기 템플릿에

[Required] 
[Display(Name = "Nombre")] 
[UIHint("String")] 
public string txbName 
{ 
    get; 
    set; 
} 

그리고, : 예를 들어 수 있기 때문에

@model object 

@Html.TextBoxFor(model => model, new {@class="k-textbox",style="min-width:200px;" }) 

마지막으로, CSS 클래스 "K-텍스트 상자"

.controls-row .k-textbox { 
    margin: 0 auto; 
    clear: left; 
    display: inline-block; 
} 

의 정의는 I이 솔루션 역자 주 솔루션의 모든 텍스트 상자에이 마크 업을 적용합니다 ...내 특별한 경우는 내가하고 싶은 일이다 :

<div class="controls-row"> 
    @Html.LabelFor(model => model.txbName) //it shows "Nombre" 
    @Html.EditorFor(m => m.txbName) //it declares an editor for string type 
</div> 

고마워! :)

2

기본 템플릿을 덮어 쓰지 않으면 "기본"클래스가 없습니다. DataAnnotations에 따라 표시되는 값에 따라 동작이 다를 수 있지만 (문자열 서식 지정, 텍스트 입력에 날짜 표시기를 넣는 템플릿이있을 수 있음) 다음 각 항목의 출력은 MVC 전체에서 일관됩니다. 문자열 속성 용 HTML

<label for="Property">Property Value</label> 

@Html.LabelFor(x=>x.Property) 

출력 HTML에서

@Html.EditorFor(x=>x.SomeStringProperty) 

출력

<input type="text" id="SomeStringProperty" name="SomeStringProperty" value=""/> 

마지막 부울 속성

HTML이 주어

<input type="checkbox" id="SomeBoolProperty" name="SomeBoolProperty"/> 

에서

@Html.EditorFor(x=>x.SomeBoolProperty) 

출력은 다음 스타일 시트에, 당신은 클래스 나 ID를 기반으로하지 최상위 HTML 요소에 대한 클래스를 작성해야합니다. 이러한 예는이 기본 MVC 템플릿과 함께 제공되는 기본 스타일 시트를 보면, 당신은 아마 내가 위에서 게시 한 것과 유사한 일을 볼 수

<style> 
    <!--apply to all labels --> 
    label { position: absolute; text-align:right; width:130px; } 
    <!--apply to all labels with class check--> 
    label.check { font-weight:bold;padding-left:10px } 
    <!-- apply to all input and textarea tags--> 
    input, textarea { margin-left: 140px; } 
    <!-- apply to all input with class special--> 
    input.special { font-weight: bold } 
</style> 

수 있습니다. 이러한 클래스는 사용자 정의 클래스로 편집 할 수 있습니다.

관련 문제