【问题标题】:ASP.NET MVC render partial view from type IEnumerable<cart> inside view from type IEnumerable<products>ASP.NET MVC 呈现来自 IEnumerable<cart> 类型的部分视图,来自 IEnumerable<products> 类型的内部视图
【发布时间】:2020-05-31 23:29:32
【问题描述】:

编辑:产品视图包含一些产品,所以我尝试使用每个产品的按钮将它们逐个添加到购物车中,添加的产品应显示在部分的表格中查看(购物车)工作正常,我现在正在尝试在弹出模式中呈现这个购物车,所以当我按下弹出按钮时,它应该显示我添加的产品,当我还在里面时产品视图。

我正在尝试在模态体内做这样的事情:

@Html.Partial("_ShowCart", new List<InternetApp.Models.Cart>())

但这会检索一个空列表。

所以我想要这样的东西,但我不知道如何用不同的模型做到这一点:

@Html.Partial("_ShowCart", Model)

我有 3 个模型:产品、购物车和视图模型:

public class Product
{
    public int id { get; set; }
    public String name { get; set; }
    public float price { get; set; }
    public String image { get; set; }
    public String description { get; set; }
    public int? CategoryId { get; set; }
}

public class Cart
{
    public int product_id { get; set; }
    public DateTime added_at { get; set; }
    public virtual Product product { get; set; }
}

public class ProductCart
{
    public Product Product { get; set; }
    public Cart Cart { get; set; }
}

购物车和产品每个都有控制器,我将购物车作为部分视图,采用IEnumerable&lt;Cart&gt; 和产品视图,采用IEnumerable&lt;Product&gt;

这是购物车索引操作

public ActionResult Index()
{
    List<Cart> Cart = db.Cart.Include(a => a.product).ToList();
    return PartialView("_ShowCart", Cart);
}

我不知道如何在产品内部渲染购物车,因为每个都有不同的IEnumerable 模型...

【问题讨论】:

  • 您应该将数据映射到视图模型,然后将视图模型绑定到视图。您能否准确解释您要在视图中显示的内容?如果可能,请提供您目前正在尝试的内容。
  • @StephenRaman 好的,我编辑了它,请再检查一次,当我在两个视图中循环浏览它们以列出产品时,我怎么能使用视图模型?

标签: asp.net-mvc asp.net-mvc-4 partial-views asp.net-mvc-partialview


【解决方案1】:

您的实体框架 (EF) 模型如下所示。我仅出于建议的标准化和清晰目的而进行了修改:

public class Product
{
    [Key] //This is only needed by EF if you don't call the primary key "Id".
    public int Id { get; set; }
    public String Name { get; set; }
    public float Price { get; set; }
    public String Image { get; set; }
    public String Description { get; set; }
    //Add any additional properties.
}

public class Cart
{
    [Key]
    public int Id { get; set; }
    //Add any additional properties
}

public class CartProduct
{
    [Key]
    public int Id { get; set; }
    public int CartId {get; set; } //References Id property in Cart entity.
    public int ProductId {get; set; } //References Id property in Product entity.
    public DateTime AddedAt { get; set; }

    //These are navigation properties.  
    //The foreign key attribute lets EF know what property to reference
    [ForeignKey("CartId")]
    public virtual Cart Cart { get; set; }

    [ForeignKey("ProductId")]
    public virtual Product Product { get; set; }
}

您应该创建一组单独的模型。 EF 模型应仅用于表示您的数据库表和属性。将这些模型与您的 EF 模型分开...也许是一个 ViewModel 文件夹。

    public class CartProductsViewModel
    {
        public int CartId { get; set; } //Persist the cart you are adding to.
        public IEnumerable<ProductModel> Products {get; set; } //Available products

        public class ProductModel
        {
            public int Id { get; set; }
            public String Name { get; set; }
            public float Price { get; set; }
            public String Image { get; set; }
            public String Description { get; set; }
            //Add any additional properties.
         }

    }

现在您可以拥有一个控制器和一个视图。

public ActionResult Index(int cartId) //passing cartId for cart you are working with.
{
    var viewModel = new CartProductsViwModel();

    viewModel.CartId = cartId;
    //Get available products that you can add to cart.
    viewModel.Products = db.Products //pluralized in DbSet in EF context.
                  .Select(p => new ProductModel
                     { 
                        Id = p.Id,
                        Name p.Name,
                        Price = p.Price,
                        Image = p.Image
                        Description = p.Description
                     });

    return View(viewModel);  
}

在返回中,我没有指定 viewModel 名称。仅当您遵循 MVC 指南并将视图命名为与方法调用相同的名称(在本例中为 index.cshtml)时,这才有可能。并在顶部添加以下内容:

@model CartProductsViwModel //may need to be fully qualified (add namespace).

您应该能够遍历此模型中的产品以显示在表格中。这避免了必须处理单独的产品和购物车视图。至于将产品添加到视图中,这可以在客户端完成。我建议先尝试使其正常工作,然后您可以创建一个专门针对客户端工作的新问题。

如果你真的需要一个对话框,你可以查找 JQuery 对话框。 JQuery UI dialog

然后您需要执行 ajax 调用来发布添加的产品和 cartId。该方法将是这样的。

[HttpPost]
public JsonResult AddProductToCart(int cartId, ProductModel product) {}

这也是一个单独的问题。我希望这有助于您入门。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多