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（）函数传递？

最终结果我想在控制台中看到：我的计数器：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。

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

1 个答案: