変更EditorFor変更入力

Question

の時に私は私が入力 を変更したときに、私は入力の出力を取り、それを分割し、2 EditorFor

<input type="text" value="Set Date" id="reservationtim onchange=myFunction()> 

@Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control" }, id = "startDate" }) 

@Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "form-control" } , id = "endDate" }) 

とで結果を置くデータベースからすでにその表示Editorforデータを変更したいです関数：

<script> 
    function myFunction() { 
    var date = document.getElementById("reservationtime").value; 
    var res = date.split("-"); 
    model => model.StartDate = res[0]; 
    document.getElementById("startDate") = res[0]; 
    document.getElementById("endDate") = res[1]; 
    } 
</script> 

Answer 1

要素参照自体を必要な値に設定しようとしています。むしろあなたは要素参照のvalue属性を設定する必要があります：あなたはここで、サーバ側とクライアント側のコードをミックスしようとしているよう

document.getElementById("startDate").value = res[0]; 

また、それが見えます。ドキュメントはすでにサーバーによって処理され、クライアントに返されるまで、JavaScriptは処理されません。クライアント側であれば、存在するのはDOMだけであり、サーバーが送信したHTML文書に基づいてブラウザによって作成されます。言い換えれば、あなたがEditorForまたは完全に失われたものを使用したという事実です。あなたが持っているのは、EditorForへのその呼び出しの結果（つまりHTML）だけです。

Answer 2

一部の属性が正しく指定されていないため、まずHTMLを修正する必要があります。あなたが明示的に上記の二つの編集者のためのIDを設定している理由を私は知らない

<input type="text" value="Set Date" id="reservationtime" onchange="myFunction()"> 

@Html.EditorFor(model => model.StartDate, new { @class = "form-control" }) 

@Html.EditorFor(model => model.EndDate, new { @class = "form-control" } ) 

。デフォルトではプロパティ名をIDとして使用します。だから私はそれのためのスクリプトを次のように提案します。

<script> 
     function myFunction() { 
     var date = document.getElementById("reservationtime").value; 
     var res = date.split("-"); 
     model => model.StartDate = res[0]; 
     if(res.length>1) { 
     document.getElementById("StartDate").value = res[0]; 
     document.getElementById("EndDate").value = res[1]; 
     // if you still want to set ID properties instead of using default use following 
     // document.getElementById("StartDate").value = res[0]; 
    // document.getElementById("EndDate").value = res[1]; 
    } 



     } 
    </script>