如何将剃刀计数器传递给 onkeyup javascript 函数

Question

我的 .cshtml 页面上有这样的看法：

@{ var counter = 0; } 
@foreach (var item in Model){    
     @Html.TextBox("name_" + @counter, item.name, 
          new { 
               @class = "form-control", 
               @onkeyup = "myFuncWithRazorCounter('My Counter: ' + @counter)" 
          })
     { counter = counter + 1; }
}    

@section scripts
{
     <script type="text/javascript">
          function myFuncWithRazorCounter(counter){ 
               var myCounter = counter; 
               console.log(myCounter);
          }
     </script>
}

假设我的模型数是 10。

当我通过输入 name_8 的文本框 id 从 onkeyup 事件侦听器调用函数时，计数器如何通过并进入 myFuncWithRazorCounter() 函数？

我希望在控制台中看到的最终结果是：My Counter: 8

Answer 1

您将在浏览器中收到Invalid or unexpected token 错误，如果您检查正在生成的 html，那么您将看到您正在渲染

<input ... onkeyup="myFuncWithRazorCounter('My Counter: ' + @counter)" ... >

注意@counter不会被counter的实际值替换。

你可以解决这个问题

@Html.TextBox("name_" + counter, item.name, new
{
    @class = "form-control",
    @onkeyup = "myFuncWithRazorCounter(" + counter + ")",
})

请注意，@ 不是必需的。然后修改脚本为

function myFuncWithRazorCounter(counter) { 
   var myCounter = counter; 
   console.log('My Counter: ' + counter);
}

附带说明，您生成的name 属性与您的模型无关，并且在您提交表单时不会绑定到您的模型。要了解如何为集合生成表单控件，请参阅 this answer。