How does ViewModel work in MVC

Question

I really can't get my head around how to use ViewModel's in MVC. Say I have two simple domain models:

public class Customer
{
    public int Id { get; set; }
    public string CustomerName { get; set; }
}

 public class Order
{
    public int Id { get; set; }
    public string ProductName { get; set; }
}

And now my goal would be to create a ViewModel that displays (combines) the CustomerName and ProductName to display to a view. I'm confused what to include in the ViewModel to accomplish this. Do I use the same property names as my domain models like so?

public class MyViewModel
{
    public string CustomerName { get; set; }
    public string ProductName { get; set; }
}

How does the ViewModel know that the properties come from two different classes? Or am I forming my ViewModel incorrectly?

Answer 1

As i can see it you have a bigger design problem here.

Lets say you need to show on the UI only the CustomerName and ProductName. Well then just add those two on to your ViewModel class and you`re good to go, exactly how you described it.

public class MyViewModel
{
    public string CustomerName { get; set; }
    public string ProductName { get; set; }
}

Getting the data in two variables is not a problem:

Customer customer = service.GetCustomer();
Product product = service.GetProduct()

And now that you have everything you need you can just set the data and pass it to the view.

MyViewModel viewModel = new MyViewModel();
viewModel.CustomerName = customer.CustomerName;
viewModel.ProductName = product.ProductName;

It always depends on what you need to show on the UI and only send what you need and nothing more. You do not need to have exactly one Model that you pass all over the place in your application, Business, DataAccess, UI. You can have something custom if you really need it.

Answer 2

You would have to set this up yourself in the ViewModel, as a template it could look something like:

public class MyViewModel
{
    public string CustomerName { get; set; }
    public string ProductName { get; set; }

    public void GetCustomerName(int customerId) 
    {
       CustomerName = CustomerServiceLayer.GetCustomerName(customerId);
       // CustomerService Layer (I.e. a repository that contains this info;
    }

    public void GetProductName(int productId) 
    {
       ProductName = ProductServiceLayer.GetProductName(productId); 
       // ProductService Layer (I.e. a repository that contains this info;
    }

}

You would then have two other Service Layers (ProductServiceLayer and CustomerServiceLayer) that speak to the database/repository to obtain the information you want. That information is then returned to the view (via your ViewModel) and displayed to the user.

Alternatively you could pass a Customer and a Product object directly into your ViewModel (via a constructor).

public class MyViewModel 
{
    public Customer MyCustomer { get; set; }
    public Product MyProduct { get; set; }

    public MyViewModel(ICustomer customer, IProduct product) 
    {
       MyCustomer = customer;
       MyProduct = product;
    }
}

The downfall here would be that you expose your entire Customer and Product classes in the View.