자바 스크립트를 사용하여 Textbox의 가치를 얻는 방법

Question

나는 이렇게 렌더링하는 부분보기가 있는데, 자바 스크립트를 사용하여 유효성을 검사하기 위해 textbox 값에 액세스하고 싶지만, 첫 번째 행 값과 값은 @ Html.TextBoxFor (X => X [i]를 .WorkStart 값입니다. 나는 자바 스크립트를 사용하여 시작 시간과 종료 시간 값을 확인해야합니다.

이

<table class="table table-bordered table-striped"> 
     <thead> 
      <tr> 
       <th>&nbsp;</th> 
       <th>Weekdays</th> 
       <th>Start Time</th> 
       <th>End Time</th> 
       <th>Duration</th> 
      </tr> 
     </thead> 
     <tbody> 
      @for (int i = 0; i < Model.Count(); i++) 
      { 
       <tr> 
        <td> 
         @Html.CheckBoxFor(x => x[i].IsWorkDay) 
        </td> 
        <td> 
         @Html.DisplayFor(x => x[i].DayName) 
         @Html.HiddenFor(x => x[i].DayName) @Html.HiddenFor(x => x[i].Day) 
         @Html.HiddenFor(x => x[i].PracticeStaffId) 
         @Html.HiddenFor(x => x[i].LocationId) 
        </td> 
        <td> 
         @*<div class="controls input-group date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii"> 
           <span class="input-group-addon add-on"> 
            <i class="icon-th fa fa-clock-o"></i> 
           </span> 
           @Html.TextBoxFor(x => x[i].WorkStart, new { name = "WorkStart" + i + "", onchange = "onStartChange()", @readonly = "readonly", @class = "form-control timepicker" }) 

          </div>*@ 

         <div class="input-group date time-datetimepicker" > 
          @Html.TextBoxFor(x => x[i].WorkStart, "{0:HH:mm:ss}", new { name = "WorkStart" + i + "", @id = "WorkStarttime", @onchange ="onStartChange(this.value)", @readonly = "readonly", @class = "form-control timepicker" }) 
          <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-time"></span> 
          </span> 
         </div> 

        </td> 
        <td> 
         @*<div class="controls input-group date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii"> 
           <span class="input-group-addon add-on"><i class="icon-th fa fa-clock-o"></i></span> 
           @Html.TextBoxFor(x => x[i].WorkEnd, new { name = "WorkEnd" + i + "", onchange = "onEndChange()", @readonly = "readonly", @class = "form-control timepicker" }) 
          </div>*@ 

         <div class="input-group date time-datetimepicker"> 
          @Html.TextBoxFor(x => x[i].WorkEnd, "{0:HH:mm:ss}", new { name = "WorkEnd" + i + "", @id="WorkEndtime",@onchange = "onEndChange(this.event)", @readonly = "readonly", @class = "form-control timepicker" }) 
          <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-time"></span> 
          </span> 
         </div> 
        </td> 
        <td><span id="span-@i"> @Html.DisplayFor(x => x[i].Duration)</span></td> 
       </tr> 

      } 
     </tbody> 
    </table> 

Answer 1

@Html.TextBoxFor(x => x[i].WorkStart, "{0:HH:mm:ss}", new { 
    name = "WorkStart" + i + "", @id = "WorkStarttime", 
    @onchange ="onStartChange(this.value)", @readonly = "readonly", 
    @class = "form-control timepicker" 
}) 

의 사용은 잘못된 HTML을 생성 귀하의 생성 중복 때문에 id 특성을 사용하여 결과적으로 id 선택기를 사용하여 값을 가져올 수 없습니다. id 셀렉터는 id="WorkStarttime"을 사용하여 첫 번째 컨트롤의 값을 반환하기 때문에 셀렉터를 사용할 수 없습니다.

또한 name = "WorkStart" + i + ""을 사용하는 것은 무의미합니다 (생성 된 html을 검사하는 경우 이름이 변경된 경우 모델 바인딩이 실패하므로 여전히 "name="[0].WorkStart"이 표시됩니다). 마지막으로, 동작으로 마크 업을 오염시키지 말고 대신 Unobtrusive Javascript을 사용하십시오.

로보기는 일이, id="_0__WorkStart"로 id="_1__WorkStart" 등 선택 편리하지 않은를 입력 generatates

@Html.TextBoxFor(x => x[i].WorkStart, "{0:HH:mm:ss}", new { 
    @readonly = "readonly", @class = "form-control timepicker workstart" 
}) 
@Html.TextBoxFor(x => x[i].WorkEnd, "{0:HH:mm:ss}", new { 
    @readonly = "readonly", @class = "form-control timepicker workend" 
}) 

(추가 클래스 이름을주의)해야한다. 대신 클래스 이름

// To handle the change event of all elements with class="workstart" 
$('.workstart').change(function() { 
    var start = $(this).val(); 
    var end = $(this).closest('tr').find('.workend').val(); 
    // compare the values 
} 

사이드 노트를 기반으로 상대 선택기 사용 : 오히려 자신의 스크립트에서 값을 비교하는, 당신은 foolproof[GreaterThat("WorkStart")]이 public DateTime WorkEnd { get; set; }에 적용되는 예를 들어 당신이 모델의 특성 (적용 조건부 검증 속성을 사용하는 것이 좋습니다 속성)을 사용하면 클라이언트 및 서버 측 유효성 검사를 즉시 수행 할 수 있습니다.