Read <input> value inside view in 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"})

do you use a viewmodel for this view? If not, you really should, because then you can switch the "manually written input" for TextBoxFor — DrCopyPaste
– DrCopyPaste, Commented Aug 7, 2014 at 12:21
ok so i'll create viewmodel with rowsnumber integer and then how to dynamicly change the table to specifed value ? — Jakub Wisniewski
– Jakub Wisniewski, Commented Aug 7, 2014 at 12:22

David · Accepted Answer · 2014-08-07 12:23:33Z

2

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
    }
});

answered Aug 7, 2014 at 12:23

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Over a year ago

@JakubWisniewski: What is the resulting client-side code? When you debug this in your browser, is the event handler attached at all? Is it an old browser and doesn't support the input event?

Jakub Wisniewski Over a year ago

Yeah. I had some minor errors in developer tolls of webbrowser :)

Collectives™ on Stack Overflow

Read <input> value inside view in MVC

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related