我在Webb应用程序上使用带有 Entity Framework 的MVC3 Viewmodel模式。
我的索引 View 是带有图像,价格和描述等的产品列表。
具有我上面提到的信息的产品位于div框中,带有一个表示“购买”的按钮。
我将使用2个 View ,其中一个是显示所有产品的索引 View ,另一个是显示通过“购买”按钮单击的产品的 View 。
我要达到的目的是,当用户单击“购买”按钮时,产品应存储在购物车 View 的另一个 View 中并显示出来。
我对如何开始该部分的编码有疑问。
带有产品的索引 View 已经完成,现在它的“购买”按钮功能仍然可以执行,但是我不知道如何开始。
这是我的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);
}
在我的ActionResult Index中,我使用存储库来获取产品,然后将产品中的数据绑定(bind)到ViewModel,以便可以在 View 中使用ViewModel。那就是我在 View 中显示所有产品的方式。
这是我的索引 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>
}
因为我可以获得每个产品的产品ID,所以可以使用 Controller 中的ID从数据库中获取数据。但是我仍然不知道该怎么做,所以当有人单击“购买”按钮时,我会将ID存储在哪里?以及如何使用它可以实现我想做的事情?
现在,我一直在尝试在IndexController中执行以下操作:
public ActionResult cart(int id)
{
var SelectedProducts = repository.GetProductByID(id);
return View();
}
我在这里所做的是通过ID获得产品。因此,当有人按下临时“x” Actionlink时,我将收到该产品。我所知道的是,需要类似的东西来实现我想做的事情,但是在那之后,我不知道该怎么做以及应该以哪种结构进行。
任何帮助都非常感谢!
简短场景:
看一下索引,我看到有5种产品,我选择购买3种产品,所以我单击三个“购买”按钮。现在,我单击导航菜单上的“购物车”。弹出“新 View ”,我看到了我单击购买的三种产品。
最佳答案
我会使用ajax将它添加到购物车上,执行单独的操作,如下所示:
Action 看起来像这样:
public ActionResult AddToCart(int productID)
{
List<int> cart = (List<int>)Session["cart"];
if (cart == null){
cart = new List<int>();
}
cart.Add(productID);
return new JsonResult() { Data = new { Status = "Success" } };
}
您的Javascript如下所示:
$(function(){ // after page load
$(".button").live("click", function(){ // add a listener to the buttons
var $this = $(this), // record which button has been pressed
productID= $this.data('productID'); // Get the product ID from the button
$.ajax({ // initiate a ajax request
url: '/controller/AddToCart', // to this address
type: "post", // of type post
cache: false, // don't cache any results
data: {id: productID}, // post the product id
success: function (data) { // on success
data = eval(data); // get the data if you want it
$this.addClass('productSelected'); // add a class that shows that the button was updated
},
error: function (result) { // on error
$(".validation-summary-errors").append("<li>Error connecting to server.</li>"); // this tells the world that there was an error in the ajax request
}
});
}
});
您需要添加到 View 中的一点点是:
<input type="button" value="Läs mer" class="button" id="button@(item.ProductId)" data-productID='@item.ProductId' />
如果您不熟悉JQuery,建议您花几秒钟的时间对其进行检查,因为它将大大提高您的MVC体验。如果您还有其他问题,请告诉我。
关于c# - 如何在另一个 View 中的列表上显示用户单击的产品?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13145951/