Question

我在剃刀视图中有以下代码，我想在每个响应旁边执行一个按钮。

点击后，我希望它将响应复制到实际响应中。

但是我收到以下错误

Microsoft JScript运行时错误：无法获取属性'foo'的值：object为null或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

您的for循环会创建具有相同名称的函数的多个副本。具有硬编码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()可以处理按钮的所有实例。

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

在Razor视图中的For循环中的Javascript按钮

1 个答案: