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.
