Passing data (list) from view to controller with TextBox

Question

I'm using ASP MVC4 with razor and I'm stuck to return some infos from my view to my controller in a list with the below elements... I use the TextBox to be able to run my js function... I use the following (updatesum()) javascript to dynamically calculate in the field the sum of the archer's score in my view:

<td> 
    @Html.TextBox("suma["+@i+"]", Model[i].ArchScore1,  new{ @onchange = "updatesum()"})
    @Html.ValidationMessageFor(x => x[i].ArchScore1)
</td> 
<td>
    @Html.TextBox("sumb["+@i+"]", Model[i].ArchScore2, new { @onchange = "updatesum()" })
    @Html.ValidationMessageFor(x => x[i].ArchScore2)
</td>
<td> 
    @Html.TextBox("sumt["+@i+"]", Model[i].ArchTot`enter code here`alScore, new { @onchange = "updatesum()" })
    @Html.TextBoxFor(x=>x[i].ArchTotalScore)
    @Html.ValidationMessageFor(x => x[i].ArchTotalScore)
</td> 

<script type="text/javascript">
    function updatesum() {
        for (i = 0; i < 15; i++) {
            var sua = "suma_" + i + "_";
            var sub = "sumb_" + i + "_";
            var sut = "sumt_" + i + "_";
            suma = document.getElementById(sua).value;
            sumb = document.getElementById(sub).value;
            sum = (suma - 0) + (sumb - 0);
            document.getElementById(sut).value = sum;
        }   
    }        
</script>

Do you know if it is feasible to add the result of this javascript function into the TextBoxFor?

Here is the code of my after the modifications suggested:

<td> 

                    @Html.TextBoxFor(m => m[i].ArchScore1, new{ @class = "score" })
                    @Html.ValidationMessageFor(x => x[i].ArchScore1)
                </td> 
                <td>>
                    @Html.TextBoxFor(m => m[i].ArchScore2, new{ @class = "score" })
                    @Html.ValidationMessageFor(x => x[i].ArchScore2)
                </td>
                <td>
                    @Html.TextBoxFor(m => m[i].ArchTotalScore, new{ @class = "score" })
                    @Html.ValidationMessageFor(x => x[i].ArchTotalScore
                </td> 
            </tr>
        }

    </table>
    <p>
        <input type="submit" value="Save" />
    </p>
}

<script type='text/javascript'> 
              $('.score').change(function () {
                    var inputs = $(this).closest('tr').find('input');
                    inputs.eq(2).val(new Number(inputs.eq(0).val()) + new Number(inputs.eq(1).val()));
                });


</script>

The 3rd textbox is still not populated.

Why are your creating your controls with no relationship at all to your model and would never bind to your model when you submit! - @Html.TextBox("suma["+@i+"]", Model[i].ArchScore1) should be @Html.TextBoxFor(m => m[i].ArchScore1) — user3559349
– user3559349, Commented Jun 24, 2015 at 8:00
And what exactly are you trying to total? - do you want a total for each row and a grand total? — user3559349
– user3559349, Commented Jun 24, 2015 at 8:08
Actually, the user put a number in score 1 and score 2 and the sum of the 2 is automatically calculated and filled in Total. — David E
– David E, Commented Jun 24, 2015 at 8:49
But you have 4 textboxes per row (in the 3rd column you have 2 textboxes) Is that correct? And do you want a grand total as well? — user3559349
– user3559349, Commented Jun 24, 2015 at 8:52

score 1 · Accepted Answer · 2015-06-24 09:56:47Z

1

You can use the following script to update the rows subtotal. Give the textboxes a class name (say class="score")

$('.score').change(function() {
  var inputs = $(this).closest('tr').find('input');
  inputs.eq(2).val(new Number(inputs.eq(0).val()) + new Number(inputs.eq(1).val()));
});

Howver you have multiple other errors in your code. Firstly your manually overriding the names of the inputs so when you post it will not bind to your model. Your need to replace

@Html.TextBox("suma["+@i+"]", Model[i].ArchScore1)

with

@Html.TextBoxFor(m => m[i].ArchScore1, new { @class = "score" })

and ditto for the other textboxes

Your textbox for the totals are should not be textboxes (or if they are then they should be disabled) so they do not post back. The calculations MUST be done again on the server when you submit if you need to save them

edited Jun 24, 2015 at 9:56

answered Jun 24, 2015 at 9:39

user3559349

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

9 Comments

David E Over a year ago

Thanks for you help. However, I don't really how I can integrate this jquery script into my code....

user3559349 Over a year ago

What part don't you understand? Just delete your existing function updatesum() { ... } script and replace it with the script in my answer. If its at the bottom of the page (immediately before the closing </body> tag then it will work fine. If not, then you will need wrap it inside $(document).ready()

user3559349 Over a year ago

I have also created this fiddle to show you how it works

David E Over a year ago

Thanks. I actually replace my updatesum() script with your script. I put the script at the bottom of my _layout.cshtml page before the </body> but the script does not run, text is shown instead... (sorry for my stupid questions... :( )

user3559349 Over a year ago

Look at the fiddle I prepared for you. I dont understand what you mean by "text is shown instead". Is it inside the <script type="text/javascript"> tags? And its a script specific to the view so it should be in the view, not the layout

|

Collectives™ on Stack Overflow

Passing data (list) from view to controller with TextBox

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related