我在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/

10-11 23:22
查看更多