How can I display the clicked products by user on a list in another view?
- by Avar
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.
