Sending collection of items in ASP.NET MVC

Question

Hello all!

I've got two classes in my MVC project Order and Product.

Because Product can be ordered many times and Order can have many products I've got third entity which is OrderedProduct. It joins those two entities in many-to-many relation.

Now what I'm trying to do is to let user to make an order by putting products from the drop down list to the box and then to save my order. Also client have to fill some fileds in the Order entity such as Address data etc. All I want is to have it all on one single page. User can add as many items from dropdown as he like, then he can add whole order.

To make it easier to visualize look at this picture:

Now the problem is how to implement such behaviour in my MVC app. Should I build a ViewModel that combines Order class and list of Product or use partial view for Product classes?

Also which is my main problem, how can I (in elegant way) retrieve the full list of chosen products or at least product id's in the controller after POST request? In this case how can I specify that what I'm sending is a collection of ids? It's simple to add one object, but what about whole collection?

This is the place when I do not fully understand asp.net MVC, so please give me some bright ideas ;) Greetings to you all, thanks in advice for all your answers!

Answer 1

The desired interface seems a bit confusing to me but here's how you can handle these things.. modify to your desire. I'm going to assume OrderedProduct is an object for ordering that contains a Product ID and a quantity and that you want to be able to modify them all at the same time.

Make Order your ViewModel. Given that it has a List<OrderedProduct> property called OrderedProducts:
Create a small editor control with a ViewModel of OrderedProduct. No form, just a textbox/dropdown/whatever bound to the product name property and a textbox bound to the product quantity. Important: put this control in views/shared/EditorTemplates and call it OrderedProduct.ascx.

Give your Order object a property called NewOrderedProduct of type OrderedProduct. In the form for the Order view do: <%=Html.EditorFor(m=>m.OrderedProducts)%> this will give you an editable list current items in the order.
After that do: <%= Html.EditorFor(m=> m.NewOrderedProduct) %> this is where you can add new items.
Have the [POST] action take a type of Order.

Now when it submits if the NewOrderedProduct property is valid you can add it to the OrderedProducts list and redisplay. You can add as many as you want this way and they will all autobind.

Have a separate submit button in the form for submitting the order. Check for the existence of that button's name in the [POST] and submit all at one time.

This gets you a straight HTML working version. From there you can Ajaxify it if you want.

Edit
Updated to reflect the function of the OrderedProduct object and correct the type the post accepts