How do I pass razor counter into onkeyup javascript function

Question

I have my view like so on my .cshtml page:

@{ 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>
}

Let's say my Model count is 10.

When I call the function from the onkeyup event listener by typing into the textbox id of name_8, how can the counter get passed through and into myFuncWithRazorCounter() function?

End result I would like to see in the console is: My Counter: 8

score 0 · Accepted Answer · answered Jun 08 '18 at 07:37

0

You will be getting a Invalid or unexpected token error in the browser, and if you inspect the html you are generating, then you will see that you are rendering

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

Note that @counter is not replaced with the actual value of counter.

You could solve this using

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

Note the @ is not required. Then modify the script to

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

As a side note, you are generating name attributes that have no relationship to your model, and will not bind to your model when you submit the form. To understand how to generate form controls for a collection, refer this answer.

answered Jun 08 '18 at 07:37

Thank you for contributing to my question. The **name_** is to identify the text box as a separate id. In the `@foreach{}` loop, there are bootstrap modals for updating. Each loop produces a new bootstrap update modal. The counter is used to separately identify. Thus, there are 10 modals and each modal has the `@Html.TextBox()` with the `@onkeyup = "myFuncWithRazorCounter(counter)"`. If we disregard how the form is submitted, when it comes to `@onkeyup = "myFuncWithRazorCounter(" + counter + ")"`, can this be done: `@onkeyup = "myFuncWithRazorCounter('My counter: ' " + counter + ")"`? Thks – Dwayne Gibbs Jun 08 '18 at 13:34
No (did you trying it?) It needs to be as I showed. But why are you polluting your markup with behavior - its the 21st century - use [Unobtrusive Javascript](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript) – Jun 08 '18 at 13:38
And to generate `form` controls for a collection, you use a `for` loop, not a `foreach` loop (refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) for an explanation – Jun 08 '18 at 13:40
After giving it a whirl, I got it working by doing a tweak. Check it out: '@onkeyup = "myFuncWithRazorCounter('My counter: " + @counter + "')"' – Dwayne Gibbs Jun 08 '18 at 13:57
Again. You do not need the leading `@`. – Jun 08 '18 at 14:01

How do I pass razor counter into onkeyup javascript function

1 Answers1