Javascript button with in For Loop in Razor view

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

Ваш цикл создает несколько копий функции с тем же именем. Последняя функция с жестко обозначенным идентификатором - результат, который вы видите.

Вы можете просто передать 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(), который будет обрабатывать все экземпляры ваших кнопок.

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