How should the list of objects (part of the larger model) with the Add and Remove buttons in MVC be updated using AJAX calls?

Question

The situation is as follows:

• I have a ViewModel that has a property that List<Product> , where Product is a class, with properties Property1 , Property2 and Property3 .
• I need to display the ViewModel, and I want to display the List<Product> in the HTML table, each row of which has a Delete button for this row.

• Under the above HTML table there should be two buttons:

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

  3.2 " Use default product list " - The list must be loaded by calling AJAX on the GetDefaultProduct() action

• By clicking the Delete , Add or Use the default list of products , do not publish the entire page
• The model also contains some other lists of elements - for example: List<Sales> , List<Orders> , etc. I hope I can use the list solution again for these lists.

Is there a way to do this using ASP.NET MVC? If so, what is the best way to do this using ASP.NET MVC?

I did this with the jQuery template, and I was able to implement this with simple operations, but I have to do it in ASP MVC solution, and I'm still trying to understand this technology. I read about the Editor template, RenderAction , Async action and partial views, and I'm trying to make a solution with them, and I will post it if it works.

Thanks in advance for any suggestions or comments!

UPDATE

The solution lies (as Darin pointed out) in Steve Sanderson's blog post . However, he assumes that the reader is aware of how the list of objects should be displayed in CRUD-friendly indexed form.

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

Once you are done with this, you can go to Sanderson's blog. By the way, take a good look at the BeginCollectionItem custom HTML helper - its implementation is not trivial, as you might think. The demonstration project is a look at sore eyes - it is simple and understandable. The proposed solution uses several calls to jQuery.ajax() (for the Add link), but simply because of the laid-back need.

PS: It’s a little disappointing to read an explicit article from one of the ASP.NET developers to find out if there is an implicit CoC (Convention Configuration) in the model binding by default - it just knows how to work with lists, but no ready HTML -a helper (or something similar) does not allow you to do this.

Personally, I believe that CRUD-friendly rendering of List<object> is a very common scenario, and not an edge case, so it will be easier to use it as part of the ASP.NET MVC hardware.

Answer 1

I would recommend you read the following blog post . This will definitely put you on the right track for implementing a script for editing a list of variable lengths.

Answer 2

This is a very easy way to do this if you want to use jQuery.

ASP.Net MVC 3 JQGrid

Answer 3

Save some pain and download Telerik Extensions for ASP.Net MVC . This is open source (although there is a paid option).

Grid control (perhaps in conjunction with the Window control) will provide you with all the necessary user interface features and many online examples.

I recently worked a lot with the wizard user interface, and Telerik was a huge help.

Answer 4

This may not be the answer you are looking for, but hey, try creating a standard typed view for the model using the following 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 that will handle edit / update / details will accept the identifier of the object as a parameter. These are the paricualr other methods of your controller that will handle editing / adding / previewing your element