Question

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

我的索引视图是包含图像，价格和描述等的产品列表。

具有上述信息的产品位于div框中，并带有一个“购买”按钮。

divbox

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

我想要实现的是当用户点击“购买”按钮时，产品应存储在购物车视图的另一个视图中并显示。

我在如何开始编写该部分时遇到了问题。

带有产品的索引视图已经完成，现在它的购买按钮功能还可以，但我不知道如何开始。

这是我的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索引中，我正在使用我的存储库获取产品，然后我将产品中的数据绑定到我的ViewModel，因此我可以在视图中使用ViewModel。这就是我如何在我的视图中显示所有产品。

这是我的索引视图：

    @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，因此我可以使用控制器中的ID从数据库中获取数据。但是我仍然不知道我怎么能这样做所以当有人点击购买按钮我将ID存储在哪里？以及如何使用它以便我可以实现我想要的目标？

现在我一直在尝试在我的IndexController中执行以下操作：

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


            return View();
        }

我在这里做的是我通过id获得产品。因此，当有人按下临时“x”Actionlink时，我会收到该产品。我所知道的是，需要这样的东西来实现我想要做的事情，但之后我不知道该做什么以及我应该采用什么样的结构。

任何形式的帮助都很受欢迎！

短情景：

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

Answer 1

我会使用ajax将其添加到购物车中，如下所示：

行动看起来像这样：

    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
                }
            });
    }
});

您需要添加到视图中的一小部分是：

<input type="button" value="Läs mer" class="button" id="button@(item.ProductId)" data-productID='@item.ProductId' />

如果您不熟悉JQuery，我建议您花几秒钟时间查看它，因为这会大大提升您的MVC体验。如果您有任何其他问题，请与我们联系。

如何在另一个视图的列表中显示用户点击的产品？

1 个答案: