Editable "GridView" like control in ASP.NET MVC

Question

I'm trying to build a Editable GridView like control (Order column) with this code in the view:

<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Order
        </th>
        <th>
            <img alt="Save order" src="<%= Url.Content("~/Content/minisave.png") %>" />
        </th>
        <th></th>
    </tr>

<% foreach (var item in Model) { %>

    <tr>
        <td>
            <%= Html.Encode(item.Name) %>
        </td>
        <td colspan="2">
            <%= Html.TextBox("Order", item.Order, new { size = "3" }) %>
        </td>
        <td>
            <%= Html.ActionLink("Edit", "Edit", new { id=item.id }) %> |
            <%= Html.ActionLink("Details", "Details", new { id=item.id })%>
        </td>
    </tr>

<% } %>

</table>

The result table look like:

The questions are: How I receive this data in my controller? I need a form tag around the table? How I know which Order value belongs to which record?

A couple extra questions: If you see the code I add the size attribute to the input tab but when the browser renders it, the input is larger, how can I fix it?

Thanks for your help!

Answer 1

I've done this before. I did it by having the ID as part of the name, and a form around the entire table. That way the controller pulled all the data from all the rows and updated it all at once like a spreadsheet.

That works well for a unit of work, where you edit the page and save it, though of course you'd need to consider how to cope with your locking strategy, be it optimistic or pessimistic.

However, these days a better alternative might be to use ajax to submit specific values, somewhat like Google Spreadsheet, maybe?