Binding viewmodels and inserting getting the data into a controller

I have come up against a road block while trying to learn mvc. I am taking the mvvm approach as I think this suits me.

If you think of a website that allows a customer to order products.

My database contains 3 tables

dbo.Product
ProductID
ProductName

db.Order
OrderID
OrderDate
ProductOrderID

db.OrderProducts
OrderID
ProductID
QuantityOrdered

I use the entity framwork. Would I than create 2 viewmodels

OrderViewModel that looks something like

 public class OrderViewModel   
 {      
   public Order Order { get; set; }
  开发者_如何学Go public List<ProductOrderViewModel> AddedProducts { get; set; }  
 }

and than a second one something like this.

public class ProductOrderViewModel    
{        
 public int OrderID { get; set; 
 public List<Product> Products { get; set; }        
 public int QuantityOrdered { get; set; } 
}

I want to use jquery to do as much clientside loads as possible as I want to remove as many calls back to the server as possible so I was thinking

1. Create a view which is strongly typed to the OrderViewModel lets call it CreateOrder
2. Create a partial view that is based on my ProductOrderViewModel using a dropdown list to bind the available productname and productID 3.I then load the partial view into the view.
3. Create 2 hidden fields within my CreateOrder view bound to ProductID and QuantityOrdered
4. Using jquery pass the value from the selected product dropdown and the quantity textbox into the hidden fields using a button separating each item id and quantity with a simple "," after which I add clear these values ready for the next item to be added.

Then I use automapper with my controller to map the viewmodels which thn allows me to insert the order into my entity framework.

Is this the normal way to do things or am I completely off track?

I'll take the opposite approach from jfar since I don't mind working in Javascript. Check out Knockout.JS. It's an MVVM (silverlight/wpf style bindings) implementation in the browser. The shopping cart example should give you a good starting point. I tend to use this approach for any client-side edits that involve list manipulation or calculated fields. It also works well for when a user needs to be able to edit multiple items at once.

If you don't go with this approach, I have a suggestion to add to your solution. Instead of comma separated values in hidden fields, use JQuery's .data() API or a global variable* to pass your values as JSON. The last thing a maintainer wants to see are ambiguous arrays or .split(',')s in code. I'm dealing with code that looks like that right now and it's not pretty.

*You can hang namespaces off the JQuery object:

$.my_stuff = $.my_stuff || {};
$.my_stuff.foo = { id : 1, quantity: 42 };

Edit: here's how to use Knockout with MVC. I think the JSON model binding is supported out of the box in MVC3, but I'm not 100% certain since I'm still using 2.0.

1 sounds more straight forward and is less javascript code.

I love jquery and javascript but write as little of it as possible. C# and VisualStudio are very strong development tools compared to VS's javascript editor and Firebug or whatever.

Also automapper is best used to go from Domain/Model/BusinessObject ( whatever we call them these days ;) ) and not the other direction.

Store them in a hidden form field.