ViewModel을 기반으로하는 사용자 정의 편집기 템플릿 데이터 주석 속성 MVC4

Question

[필수] 특성이 정수, 두 배, 문자열, 날짜 등의 내 ViewModel 속성을 장식하는 경우 입력 텍스트 상자 뒤에 이미지 범위를 자동으로 추가하려고합니다.

예를 들어, 내 뷰 모델은

public class MyViewModel 
{ 
    [Required] 
    public string Name { get; set; } 
} 

처럼 보일 수 있습니다 내보기 같을 것이다

@Html.EditorFor(model => model.Name) 
@Html.ValidationMessageFor(model => model.Name) 

출력 내가

span.required { 
    background-image: url("required.png"); 
} 

가 할이 가능 즉, 이미지를 표시 할 몇 가지 CSS를하고자했다 뭔가

<input id="Name" class="text-box single-line" type="text" value="" name="Name" data-val-required="The Name field is required." data-val-length-max="20" data-val-length="The field Name must be a string with a maximum length of 20." data-val="true"> 
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Name"></span> 

-- Note the automatically added span 
<span class="indicator required" style="width: 11px;"></span> 

처럼 아니면 내가 내 자신의 도우미 메서드를 작성해야 할 것 이러한 유형의 기능을 구현하려면?

Answer 1

그래, 가능하지만 일반적으로 템플릿은 유형 렌더링을 사용자 정의하기 때문에 일반적으로 권장하지 않으며 다른 템플릿을 무시할 경우 걱정없이 템플릿을 만들 수 있어야합니다. 여기

http://weblogs.asp.net/imranbaloch/archive/2010/07/03/asp-net-mvc-labelfor-helper-with-htmlattributes.aspx

나 :

http://weblogs.asp.net/raduenuca/archive/2011/02/17/asp-net-mvc-display-visual-hints-for-the-required-fields-in-your-model.aspx

세 번째 옵션에서 아무것도하지 않는 것입니다

내가 대신 같은 여기에 설명 된 것과 같이, 사용자 정의 동시에, labelFor 도우미를 만들 것 MVC가 아니라 표준 MVC 유효성 검사 데이터 특성을 기반으로 표시기를 추가 할 자바 스크립트를 추가하십시오 (눈에 거슬리지 않는 유효성 검사를 사용하는 경우). 여기에 답변을 참조하십시오 : 내가 무슨 짓을

https://stackoverflow.com/a/8524547/61164

Answer 2

두 번째 컨테이너를 추가 할 jquery.validate.unobtrusive JS 파일을 수정하는 것이 었습니다, 특별히 이미지, 유효성 검사 오류가있는 경우.

var container2 = $(this).find("[data-valimg-for='" + escapeAttributeValue(inputElement[0].name) + "']"), 
     replace = $.parseJSON(container.attr("data-valimg-replace")) !== false; 

    container2.removeClass("img-validation-valid").addClass("img-validation-error"); 

그런 다음 모델에 바인딩하는 것을 잊지 마세요 : 마지막으로

error.data("unobtrusiveContainer", container2); 

, 그것은 빈 경우 (대체) 코드 블록에서 : 성공

if (replace) { 
     container.empty(); 
     container2.empty(); 
     error.removeClass("input-validation-error").appendTo(container);    
    } 
    else { 
     error.hide(); 
    } 

기억 숨기기 :

var container2 = error.data("unobtrusiveContainer"), 
     replace = $.parseJSON(container.attr("data-valimg-replace")); 

    if (container2) { 
     container2.addClass("img-validation-valid").removeClass("img-validation-error"); 
     error.removeData("unobtrusiveContainer"); 

     if (replace) { 
      container2.empty(); 
     } 
    } 

파일의 onError 및 onSuccess 함수에서 어디에 넣을 수 있는지 알아낼 수 있어야합니다.보기에

는 대한 검증 거기 각 양식에 입력에 다음 코드 줄을 추가 : 나는 단지 [Required] 속성이 테스트 한

<img class="img-validation-valid" data-valimg-replace="true" data-valimg-for="<replace with field name here, ie. Name>" src="required.png" /> 

,하지만 그것을 작동합니다. 또한 이미지뿐만 아니라 다른 물건을 생성 할 때도 사용할 수 있다고 확신합니다.