2011-10-11 2 views
0

사용자가 시간 값을 입력 할 수있는 양식이 있습니다 (예 : 작업 수행에 소비 된 시간). 비즈니스 요구 사항은 hh : mm 형식 또는 십진 형식으로 시간을 입력해야한다는 것입니다. 두 경우 모두 잠재적으로 합계 표시, 다른 입력에 대한 유효성 검사 등 클라이언트 측 javascript가 표시 될 수 있습니다.ASP.Net MVC에서 사용자 입력 서식 시간 지정

예를 들어 한 사용자는 "8:30"을 입력 할 수 있습니다. 8 시간 30 분 동안 다른 사람은 "8.5"를 입력하여 같은 것을 의미 할 수 있습니다. 폼/유효성 검사 복제본을 최소한으로 유지할 수있는 무언가를 찾고 있습니다.

모델 및보기에서이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

답변

2

두 형식을 모두 허용하는 정규식은 그렇게 복잡하지는 않습니다. 나는 자바 스크립트를 통해 간단한 검증 클라이언트 측을 수행 할 것이다. 그 외에도 비즈니스 오브젝트 레벨에서 비즈니스 유효성 검증을 추가 할 수 있습니다.

0

jQuery를 사용하여 입력란의 시간을 올바른 형식으로 변경하는 슬라이더를 만들었습니다. 내 View File, Create.aspx에서 다음 jquery 함수를 본문의 시작 부분에 배치하십시오.

<script> 
$(function() { 
    $("#slider").slider({ 
     value: 9, 
     min: 0, 
     max: 1440, 
     step: 15, 
     slide: function (event, ui) { 
      var hours = Math.floor(ui.value/60); 
      var minutes = ui.value - (hours * 60); 
      var ampm = "AM"; 

      if (hours == 12) { ampm = "PM"; } 
      else if (hours == 0) { hours = 12; ampm = "AM"; } 
      else if (hours > 12) { hours = hours - 12; ampm = "PM"; } 

      if (hours < 10) hours = '0' + hours; 
      if (minutes < 10) minutes = '0' + minutes; 
      $("#work_StartTime").val(hours + ':' + minutes + ' ' + ampm); 
     } 
    }); 
}); 

</script> 

다음에 동일한 페이지의 본문에서 시간 입력을 위해 입력란 근처에 div를 놓습니다. 해당 div에 슬라이더가 표시됩니다.

<div class="editor-field"> 
    <%: Html.EditorFor(model => model.work.StartTime)%> 
     <div id="slider"></div> 
      <%: Html.ValidationMessageFor(model => model.work.StartTime)%> 
     </div> 

이렇게하면 슬라이더가 생깁니다. 위의 자바 스크립트 코드에서 단계를 변경합니다 : 15, 15 분으로 증가합니다. 이것은 분명히 클라이언트 측 유효성 검사입니다. 물론 서버 측 유효성 검사도 구현해야합니다.

관련 문제