In ASP.Net MVC you can display lists of data either as a grid with paging, just as in ASP.Net, or, as I prefer most often, using Infinite Scrolling.
Editing and item or adding an item to the list needs a different approach in Infinite Scrolling as opposed to the paging grid: after adding or updating, you do not want the user to have to scroll back to the original location of the record inside the grid.
Let’s have a look at how Infinite Scrolling can be implemented:
$.get("/More/Items/" + page /* + other options, such as sort order */ , function(data) { if (data != "") { $("#myList").append(data); } } );
So we need a controller method returning a partial view filled with the data model of the list.
To support adding a newly created record, or displayed an updated record in the list, we split the list’s partial view into an enumeration part and an item part
List.ascx:
<table><thead><tr><th>.....</th></tr></thead><tbody> <% foreach(var item in Model.Items) { Html.RenderPartial("ListItem", item); } %> </tbody></table>
The ListItem.ascx then contains the record inside a <tr>:
<tr><td>.....</td>....</tr>
Easy.
Next. we want to support adding and editing records. Personally I prefer jQuery UI’s $.dialog() to open a form for editing the record, and upon closing the dialog, the data is stored using an Ajax or Web service request, and finally the list item is updated:
var tbl = $("#myTable tbody"); $.get('Ajax/GetInsertedRecord?id=' + data.Id function (data) { tbl.prepend(data); // insert as first record in list } );
where data is the record returned from the Ajax call to insert the data.
Analogously for updating the edited record, use
var tr = hl.parent().parent(); // retrieve the <tr> of the Edit button $.get('Ajax/GetUpdatedRecord?id=' + data.Id, function (data) { tr.replaceWith(data); } );
This in-place adding and updating just require 2 controller methods, and the record partial view extracted from the original list view! Both controller methods return the same partial view as the one referenced in the list partial view.