I am using MVC3 Viewmodel pattern with Entity Framework on my webbapplication.

My Index View is list of products with image, price and description and etc.

Products with the information I mentioned above is in div boxes with a button that says "buy".

I will be working with 2 views one that is the Index View that will display all the products and the other view that will display the products that got clicked by the buy button.

What I am trying to achieve is when a user click on buy button the products should get stored in the other view that is cart view and be displayed.

I have problems on how to begin the coding for that part.

The index View with products is done and now its the buy button function left to do but I have no idea how to start.

This is my IndexController:

private readonly HomeRepository repository = new HomeRepository();

public ActionResult Index()
{
    var Productlist = repository.GetAllProducts();

    var model = new HomeIndexViewModel()
    {
        Productlist = new List<ProductsViewModel>()
    };

    foreach (var Product in Productlist)
    {
        FillProductToModel(model, Product);
    }

    return View(model);

}

private void FillProductToModel(HomeIndexViewModel model, ProductImages productimage)
{
    var productViewModel = new ProductsViewModel
    {

        Description = productimage.Products.Description,
        ProductId = productimage.Products.Id,
        price = productimage.Products.Price,
        Name = productimage.Products.Name,
        Image = productimage.ImageUrl,
    };
    model.Productlist.Add(productViewModel);
}

In my ActionResult Index I am using my repository to get the products and then I am binding the data from the products to my ViewModel so I can use the ViewModel inside my view. Thats how I am displaying all the products in my View.

This is my Index View:

    @model Avan.ViewModels.HomeIndexViewModel

         @foreach (var item in Model.Productlist)
                    {
                     <div id="productholder@(item.ProductId)" class="productholder">  
                     <img src="@Html.DisplayFor(modelItem => item.Image)" alt="" />
                     <div class="productinfo">
                     <h2>@Html.DisplayFor(modelItem => item.Name)</h2> 
                     <p>@Html.DisplayFor(modelItem => item.Description)</p>    
                     @Html.Hidden("ProductId", item.ProductId, new { @id = "ProductId" }) 
</div>
                     <div class="productprice">     
                     <h2>@Html.DisplayFor(modelItem => item.price)</h2>
                     <input type="button" value="Läs mer" class="button" id="button@(item.ProductId)">  
                     @Html.ActionLink("x", "Cart", new { id = item.ProductId })  // <- temp its going to be a button                   
                    </div>                                   
                    </div>

             }

Since I can get the product ID per product I can use the ID in my controller to get the data from the database. But I still I have no idea how I can do that so when somebody click on the buy button I store the ID where? and how do I use it so I can achieve what I want to do?

Right now I have been trying to do following thing in my IndexController:

public ActionResult cart(int id)
        {
            var SelectedProducts = repository.GetProductByID(id);


            return View();
        }

What I did here is that I get the product by the id. So when someone press on the temp "x" Actionlink I will recieve the product. All I know is that something like that is needed to achieve what im trying to do but after that I have no idea what to do and in what kind of structure I should do it.

Any kind of help is appreciated alot!

Short Scenario:

looking at the Index I see 5 products, I choose to buy 3 products so I click on three "Buy" buttons. Now I click on the "Cart" that is located on the nav menu. New View pops up and I see the three products that I clicked to buy.