Javascript按钮与在For循环中的剃刀视图

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)" /> 

然后你就可以停止剃刀和JavaScript的那个丑陋的混合。并且从for循环中取出函数，所以你只有一个setValue()它将处理你的按钮的所有实例。

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