フォームを転記する前に入力した値のビューを更新する方法MVC/C＃

Question

開始日と終了日の単純なビューがありますが、開始日が等しい場合は「半日」チェックボックスを表示します終了日まで

これは私がこれまでに試したことですが、ページの読み込み時にのみリフレッシュされるため、ビューをリフレッシュしないため、開始日が終了日と等しいかどうかを確認することができません。チェックボックスの表示と非表示を切り替える最も良い方法は何ですか？

@Html.FormEditorFor(x => x.StartDate) 
    @Html.FormEditorFor(x => x.EndDate) 
    if (Model.StartDate == Model.EndDate) 
    { 
     @Html.FormEditorFor(x => x.IsHalfDay, inputClass: "col-sm-1") 
    } 
    @Html.FormDropdownFor(x => x.HalfDayAP, ampmDropdown, inputClass: "col-sm-1") 
    @Html.FormEditorFor(x => x.ReasonForLeave) 

Answer 1

あなたがリクエストしたとおり、これは次のように実行できます。

ステップ1：

<script type="text/javascript" src="<jQuery version you include in your project>.js"> 

プロジェクトにjQueryライブラリを含めるステップ2：

@Html.FormEditorFor(x => x.StartDate) 
    @Html.FormEditorFor(x => x.EndDate) 
    <span id="IsHalfDay" style="display:@(Model.StartDate == Model.EndDate ? "block" : "none")"> 
    @Html.FormEditorFor(x => x.IsHalfDay, inputClass: "col-sm-1") 
    </span> 

    @Html.FormDropdownFor(x => x.HalfDayAP, ampmDropdown, inputClass: "col-sm-1") 
    @Html.FormEditorFor(x => x.ReasonForLeave) 

ステップ3：あなたのビュー

上 書き込み、次のスクリプトブロックを以下のようにHTMLを変更

<script type="text/javascript"> 
$(function(){ 

     $("input[name=StartDate],input[name=EndDate]").change(function(){ 
      if($("input[name=StartDate]").val() == $("input[name=StartDate]").val()) 
      { 
       $("#IsHalfDay").show(); 
      } 
      else 
      { 
       $("#IsHalfDay").hide(); 
       $("input[name=IsHalfDay]").removeAttr("checked"); 
      } 
     }); 
}); 
</script> 

Answer 2

部分ビューを更新する代わりにjavascriptを使用できます。

あなたが使用できる良いjs libがあります。非常に簡単 それをチェックアウト：http://momentjs.com/docs/#/displaying/difference/

あなたのための別の答えがあります。 Updating PartialView mvc 4