Save data by row

Question

I have a table with inputs inside the table. At the last column of each row have save buttons. Each time user click the save button, it will save the respective column. Here is my code:

   <form action="@Url.Action("UpdateStaff", "Staff")" id="frmUpdateStaff" method="post">
    <div class="table-responsive">

        <table class="table table-hover table-sm table-striped">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        StaffNo
                    </th>
                    <th>
                        Shift
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
                @if (Model.Count() > 0)
                {
                    var i = 0;

                    foreach (var item in Model)
                    {
                        i += 1;
                        <tr>
                            <td>@i</td>
                            <td>
                                @Html.DisplayFor(modelItem => item.StaffNo)
                            </td>
                            <td>
                                <select class="form-control input-sm" id="StaffShift" name="StaffShift" value="@item.StaffShift">
                                    <option value="0" @(item.StaffShift== HMS.Domains.StaffShift.Morning? "selected" : "")>Morning</option>
                                    @*<option value="1" @(item.StaffShift== HMS.Domains.StaffShift.Evening? "selected" : "")>Evening</option>*@

                                </select>
                            </td>

                            <td>
                                <input type="text" class="form-control input-sm" name="StaffNo" id="StaffNo" value=@item.StaffNo>
                                <button type='submit' class='btn btn-primary btn-xs' data-toggle="tooltip" title="Save"><span class="glyphicon glyphicon-floppy-disk"></span></button>

                            </td>
                        </tr>
                    }
                }
                else
                {
                    <tr>
                        <td colspan="12"><div align="center">No records found</div></td>
                    </tr>
                }
            </tbody>
        </table>

    </div>
</form>

I created input named StaffNo to store the primary key of the model. When the user click save button, it should send the respective StaffNo. It actually show the correct value in the view. But when I save the row, the StaffNo always have value 1 in the controller. It actually take the the first row of data.

You view does not make much sense. You have one form and each submit button will post back all the form controls, but because they are all named the same, only the first one will be bound to the property. — , Jan 10 '18 at 02:13
Its not really clear what your trying to achieve and the UI is bad. A user might select options from 2 or more dropdownlists and then click an entirely different submit button and have no idea that nothing is being saved. You either generate a view to edit all items and post back the whole collection at once (refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) for an example), or you have a view to edit just one item and post back that one item — , Jan 10 '18 at 02:18
I want to send it by row. If save button clicked on third row, only third row data will be saved without affecting other rows. — yusry, Jan 10 '18 at 02:22
And why in the world would you want to degrade performance by generating all that extra html that is not needed. — , Jan 10 '18 at 02:25
I only want to change not more than two data, so if i dont want to create a new page just to edit two data. so by directly save the data in the list, its easier and faster for the user — yusry, Jan 10 '18 at 02:32
No its not. And your code will never work. It cannot bind correctly, you cannot get any client side validation, and you will not bind correctly if the view need to be returned because `ModelState` is invalid. You need to rethink all this. And what do you mean _change not more than two_ - your current code only allows you to submit one — , Jan 10 '18 at 02:43
I will create a new view for editing. Thanks for your suggestion — yusry, Jan 10 '18 at 02:55
As an alternative you could have a (single) modal popup form and click on an row to display the form (and set its properties based on the row you clicked) - for an example, refer [this fiddle](http://jsfiddle.net/9madrh7g/2/) — , Jan 10 '18 at 03:17

progrAmmar · Answer 1 · 2018-01-11T00:31:27.010

0

From what I understand is that you are trying to save a collection of records within an MVC Model.

Try naming your controls like following:

<input type="hidden" class="form-control input-sm" name="StaffNo[@i]" id="StaffNo" value=@item.StaffNo>

and then submit it to the controller.

edited Jan 11 '18 at 00:31

answered Jan 10 '18 at 01:44

progrAmmar

2,606
4
29
58

if i use this, `name="StaffNo[@i]"` it shows value 0. if i use this, `name="StaffNo[]"` it shows value 1. both code doesnt work – yusry Jan 10 '18 at 02:11
My Mistake, the StaffNo should be a hidden input field, also you have to make sure that the StaffNo field is being transferred to the View from your controller. If StaffNo is not set it will give you default value – progrAmmar Jan 11 '18 at 00:30

Save data by row

1 Answers1