c# - 如何在另一个 View 的列表中显示用户点击的产品？

Question

我在我的 webbapplication 上使用带有 Entity Framework 的 MVC3 Viewmodel 模式。

我的索引 View 是带有图像、价格和描述等的产品列表。

带有我上面提到的信息的产品位于带有“购买”按钮的 div 框中。



我将使用 2 个 View ，一个是显示所有产品的索引 View ，另一个是显示购买按钮单击的产品的 View 。

我想要实现的是，当用户单击购买按钮时，产品应该存储在另一个 View 中，即购物车 View 并显示出来。

我对如何开始该部分的编码有疑问。

产品的索引 View 已经完成，现在它的购买按钮功能还剩下要做，但我不知道如何开始。

这是我的索引 Controller :

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 索引中，我使用我的存储库来获取产品，然后我将产品中的数据绑定(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 获取产品。因此，当有人按下 temp "x"Actionlink 时，我会收到产品。我所知道的是，需要类似的东西来实现我想要做的事情，但在那之后我不知道该做什么以及我应该以什么样的结构去做。

非常感谢任何形式的帮助!

短场景:

查看索引我看到 5 种产品，我选择购买 3 种产品，所以我点击了三个“购买”按钮。现在我单击导航菜单上的“购物车”。新 View 弹出，我看到了我点击购买的三个产品。

Answer 1

我会使用 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 体验。如果您有任何其他问题，请告诉我。