For Loop in RazorビューでのJavascriptボタン

Question

私はすべてのレスポンスの横にあるボタンを動作させたいという私の剃刀の中に次のコードを書いてください。

クリックすると、実際の応答に応答をコピーします。

しかし、私はあなたがループのため

Microsoft JScript runtime error: Unable to get value of the property 'foo': object is null or undefined.

@for (int i = 0; i < Model.Responses.Count(); i++) 
    { 
     <div class="col-md-4"> 
       @Html.LabelFor(x => Model.Responses[i].Response, htmlAttributes: new { @class = "control-label"}) 
       @Html.DisplayFor(x => Model.Responses[i].Response) 
     </div> 

     <input type="button" name="set_Value" id="@i" value="Copy Response to Actual Response" class="btn btn-success" dataset-foo="@Model.Responses[i].Response" onclick="setVale(this)" /> 

     <div class="col-md-4"> 
       @Html.LabelFor(x => Model.Responses[i].ActualResponse, htmlAttributes: new { @class = "control-label"}) 
       @Html.TextAreaFor(x => Model.Responses[i].ActualResponse, htmlAttributes: new { @class = "from-control", @id = "actualResponse-" + i, rows = 5, columns = 40}) 
     </div> 

     <script type="text/javascript"> 
       function setValue(btn) 
       { 
        var id = btn.id; 
        var value = btn.value; 
        var foo = btn.dataset.foo; 
        document.getElementById('actualResponse-' + id).value = foo 
       } 
     </script> 

     } 

Answer 1

次のエラーを取得するには、同じ名前の関数の複数のコピーを作成します。ハードコーディングされたidを持つ最後の関数は、あなたが見る結果です。

クリックハンドラーにthisを渡すことができます。

<input type="button" name="set_Value" 
     value="Copy Response to Actual Response" class="btn btn-success" 
     id = "@i" 
     data-foo = "@foo" 
     onclick="setVale(this)" /> 

その後、RazorとJavaScriptの混乱を防ぐことができます。また、forループから関数を取り出して、ボタンのすべてのインスタンスを処理するsetValue()を1つだけ持ちます。

function setValue(btn) { 
    var id = btn.id; 
    var value = btn.value; 
    var foo = btn.dataset.foo; 
}