How can a list of objects (a part of a bigger Model) with with Add and Delete buttons in MVC be updated with AJAX calls?

Question

The situation is as follows:

1. I have a ViewModel that has a property that's a List<Product>, where Product is a class with let's say properties Property1, Property2 and Property3.
2. I have to render the ViewModel and I wish to render the List<Product> in an HTML table each row of which has a "Delete" button for that row.

3. Underneath the afore-mentioned HTML table, there should be 2 buttons:

   3.1 "Add" - used to add a new empty Product to the list

   3.2 "Use default product list" - the List has to be loaded via an AJAX call to the GetDefaultProduct() action of the controller

4. Clicking on a "Delete", "Add" or "Use default product list" button should not post the entire page
5. The model contains some other lists of items as well - for the sake of example: List<Sales>, List<Orders> and so on. I'm hoping I can re-use the solution for the List for those lists as well.

Is there a way to do this with ASP.NET MVC? If yes, what is the best way to do it with ASP.NET MVC?

I did this with jQuery templating and I managed to implement this with simple operations, but I have to do it in an ASP MVC solution and I'm still trying to get the hang of the technology. I've been reading about the Editor template, RenderAction, Async action and partial views and I'm trying to compose a solution with them and I'll post it if it works.

Thanks in advance for any suggestions and comments!

UPDATE

The solution lies (as Darin pointed out) in Steve Sanderson's blog post. However, it assumes that the reader is aware of under-the-covers way of how a List of objects should be rendered in a CRUD-friendly, indexed manner.

So, in order to help anyone who wants to have an indexed list of omplex objects, I suggest reading mr. Haacked's blog post: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx.

After you are done with it, you can move on to Sanderson's blog. By the way, take a good look at the BeginCollectionItem custom HTML helper - its implementation isn't a trivial one as one might think. The demo project is a sight for sore eyes - it's spot on and easy to understand. The proposed solution DOES use some jQuery.ajax() calls (for the Add link), but just out of bare necessity.

PS: It's a bit frustrating that one has to read an explicit article from one of the developers of ASP.NET in order to find out that there's an implicit CoC (Convention-over-Configuration) in the default model binder - it just knows how to work with Lists, but no out-of-the-box HTML helper (or anything similar) doesn't let you in on this.

Personally I think that CRUD-friendly rendering of List<object> is a very common scenario, not an edge case so it should be simpler to use and a part of the ASP.NET MVC out-of-the-box machinery.

Answer 1

I would recommend you reading the following blog post. It would definitely put you on the right track for implementing an editing scenario of a variable length list.

Answer 2

This is a very easy way of doing it if you want to do using Jquery.

ASP.Net MVC 3 JQGrid

Answer 3

Save yourself some pain and download the Telerik Extensions for ASP.Net MVC. It's open source ( though there's a paid option).

The Grid control (possibly in conjunction with the Window control) will give you all the UI functionality you need and there's plenty of online examples.

I've been doing a lot of master-detail UI work recently and Telerik's been an immense help.

Answer 4

Maybe this is not the answer you are looking for, but hey, try to create a default typed edit view for a model using folowing settings:

this will generate the folowing code for view (assuming Razor engine):

    @model IEnumerable<MvcApplication2.Models.User>

@{
    View.Title = "GetData";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>GetData</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th></th>
        <th>
            Name
        </th>
        <th>
            Description
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
        <td>
            @item.Name
        </td>
        <td>
            @item.Description
        </td>
    </tr>
}

</table>

The code wich will handle edit/update/details will accept Id of the entity as a parameter. These are paricualr other methods of your controller which will handle editting/adding/previewing of you item