asp mvc 使用视图模型在视图中列出产品详细信息

Question

我正在尝试在视图中列出单个产品的详细信息。产品规格动态变化，因为规格是在 table 中按行添加的，这意味着我们可以为每个产品添加大量规格（就像在电子商务网站中所做的那样）。现在我可以使用 ViewBag 来满足要求，但我决定使用 ViewModel 作为更好的做法。

型号class:

// Product:
public partial class ProductTable
{
    public ProductTable()
    {
        this.SpecificationsTable = new HashSet<SpecificationsTable>();
    }

    public int ProductID { get; set; }
    public string Title { get; set; }
    public string SmallDescription { get; set; }
    public string FullDescription { get; set; }

    public virtual ICollection<SpecificationsTable> SpecificationsTable { get; set; }
    }

//Specifications:
public partial class SpecificationsTable
{
    public int SpecificationsID { get; set; }
    public string SpecificationName { get; set; }
    public string SpecificationValue { get; set; }
    public Nullable<int> ProductID { get; set; }
    public virtual ProductTable ProductTable { get; set; }
}

ViewModel:

public class DetailsViewModel
{
    public int ProductID { get; set; }
    public string Title { get; set; }
    public string SmallDescription { get; set; }
    public string FullDescription { get; set; }
    public string SpecificationName { get; set; }
    public string SpecificationValue { get; set; }
}

动作方法

public ActionResult ProductDetails(int id)
{
    var details = (from c in dbo.ProductTable
                   join s in dbo.SpecificationsTable 
                   on c.ProductID equals s.ProductID
                   where c.ProductID == id
                   select new DetailViewModel
                   {
                       Title = c.Title,
                       SmallDescription = c.SmallDescription,
                       FullDescription = c.FullDescription
                   }).ToList();

     // To remove repeated product title , small and full description
     var distinctItems = details.GroupBy(x => x.ProductID).Select(y => y.First());

     // To show product title, small and full description for this product

     ViewBag.ProductDetails = distinctItems;

     var specifications = (from c in dbo.ProductTable
                             join s in dbo.SpecificationsTable 
                             on c.ProductID equals s.ProductID
                             where c.ProductID == id
                             select new DetailViewModel
                             {
                                 SpecificationName = s.SpecificationName,
                                 SpecificationValue = s.SpecificationValue
                             }).ToList();

    // To show list of specifications for this product
    ViewBag.Specifcations = specifications;
    return View();
}

视图中的预期输出：

详情：

Title: New Samsung offer

SmallDescription : Something small 

FullDescription : Something full

规格：

Mobile Name :Samsung

Model : 2015

Price : 70 $

Color:  White

我正在使用数据库优先方法，我正在尝试学习如何在这里使用视图模型。

Answer 1

Viewmodels 确实是解决问题的方法。我不会详细说明什么是视图模型，因为您已经在代码中声明了一些视图模型，所以我假设您已经知道它们的用途和功能。然而——为了完整起见——viewmodels 只代表你想要显示在视图中的数据；假设视图显示员工的名字和姓氏，当您只真正需要它的两个属性时，没有理由发回 Employee 对象。

根据上面提供的简短视图模型定义，要 return 视图模型而不是将 returned 对象附加到 ViewBag，您只需创建一个 class将仅保存您希望在视图中显示的数据。因此，根据您的 "expected output in view"，您的视图模型看起来类似于：

public class YourViewModel 
{
    public string Title { get; set; }
    public string SmallDescription { get; set; }
    public string FullDescription { get; set; }
    public string MobileName { get; set; }
    public int ModelYear { get; set; }
    public decimal Price { get; set; }
    public string Color { get; set; }
}

实例化并填充视图模型后，将其传递给视图：

var yourViewModel = new YourViewModel();
//populate it and pass it to the view
return View(yourViewModel);

在视图的顶部，将 @model 变量声明为 YourViewModel:

类型

@model YourViewModel

..你可以开始了。所以如果你想在视图中打印出手机名称：

@Model.MobileName

请记住，虽然每个视图只能有一个 @model，但您仍然可以有多个视图模型。这可以通过创建一个父视图模型来保存所有与视图相关的视图模型并将其设置为 @model 而不是：

public class ParentViewModel
{
    //all the viewmodels which are relevant to your view
    public DetailsViewModel DetailsViewModel { get; set; }
    public YourViewModel YourViewModel { get; set; }
    //...etc        
}

实例化并填充视图模型后，将其传递给视图：

var parentViewModel = new ParentViewModel();
var yourViewModel = new YourViewModel();
//populate it and attach it to the parent viewmodel
parentViewModel.YourViewModel = yourViewModel;
return View(parentViewModel);

这一次，在视图的顶部，将 @model 变量声明为 ParentViewModel 类型：

@model ParentViewModel

..你可以开始了。使用相同的示例，如果您想在视图中打印出手机名称：

@Model.YourViewModel.MobileName

请记住，我并没有真正关注您如何构建视图模型，而是解释了如何将一个（或多个）视图模型传递回您的视图并使用它们而不是 ViewBag（根据你的问题）。对于您的视图模型应该如何实际填充和看起来像，是要走的路。

Answer 2

您当前的视图模型没有反映您要在视图中显示的内容，这是每个产品的多个规范，因此您需要一个集合属性。将您的视图模型更改为

public class SpecificationVM
{
  public string Name { get; set; }
  public string Value { get; set; }
}
public class ProductVM
{
  public string Title { get; set; }
  public string SmallDescription { get; set; }
  public string FullDescription { get; set; }
  IEnumerable<SpecificationVM> Specifications { get; set; }
}

然后在控制器中，使用

填充您的视图模型

public ActionResult ProductDetails(int id)
{
  var product = db.ProductTable.Where(p => p.ProductID == id).FirstOrDefault();
  // note you may need to add .Include("SpecificationsTable") in the above
  if (product == null)
  { 
    return new HttpNotFoundResult();
  }
  ProductVM model = new ProductVM()
  {
    Title = product.Title,
    SmallDescription = product.SmallDescription,
    FullDescription = product.FullDescription,
    Specifications = product.SpecificationsTable.Select(s => new SpecificationVM()
    {
      Name = s.SpecificationName,
      Value = s.SpecificationValue
    })
  };
  return View(model);
}

然后在视图中

@model yourAssembly.ProductVM
<h2>Details</h2>
@Html.DisplayNameFor(m => m.Title)
@Html.DisplayFor(m => m.Title)
.... // ditto for SmallDescription and FullDescription 
<h2>Specifications</h2>
@foreach(var item in Model.Specifications)
{
  @Html.DisplayFor(m => item.Name)
  @Html.DisplayFor(m => item.Value)
}

asp mvc 使用视图模型在视图中列出产品详细信息

asp mvc list product details in view using View Model

asp.net-mvc

viewmodel

asp.net-mvc-4

asp.net-mvc-viewmodel