Read <input> value inside view in MVC - asp.net-mvc

Question

Hi i want to create table that has as many rows as user can set in input field.
how to do that instead of 5 in for loop i have value specified in input tag ?
#Using (Html.BeginForm("AddNewProces", "Admin", FormMethod.Post))
#<input type="number" value="5" min="1" name="rowsNumber" />
#<table>
#For i As Integer = 0 To 5
#<tr>
<td>Row #i</td>
</tr>
Next i
</table>
End Using
EDIT:
Ok i decided to change some things but now it still doesent work ;/ this is what i try now:
<script type="text/javascript">
$('.rowsNumber').on('input', function () {
alert("Value Changed");
});
</script>
and here is my htlm.textboxfor
#Html.TextBoxFor(Function(m) m.NumberOfRows, New With {.class = "rowsNumber"})

Answer 1

You would need to do this client-side, not server-side. The server-side code can't read the value of the input before the page has even been rendered.
So your view markup would simplify:
#Using (Html.BeginForm("AddNewProces", "Admin", FormMethod.Post))
#<input type="number" value="5" min="1" name="rowsNumber" />
#<table id="myTable">
</table>
End Using
Then you'd attach a JavaScript handler to the input to modify the table. It might have a structure that's something like this:
$('input[name="rowsNumber"]').on('input', function () {
var existingRowCount = $('#myTable tr').length;
var newRowCount = parseInt($(this).val());
if (newRowCount == existingRowCount) {
return;
}
if (newRowCount > existingRowCount) {
// append new rows to the table
}
if (newRowCount < existingRowCount) {
// remove trailing rows from the table
}
});