title: How to use View Models in MVC to display multiple model in razor view?
body: <p>I have just started working with mvc after doing so much R&amp;D i started this test project but now stuck at the situation where i have no any idea how can i create a viewmodel to display data from two different models.</p>
  
  <p>model 1 </p>
  
  <pre><code> public class Product
  {
      public int ProductId { get; set; }
  
      [Required(ErrorMessage = "Enter Product name")]
      [StringLength(160)]
      public string ProductName { get; set; }
  
  
      [Required(ErrorMessage = "Enter Product Description")]
      [StringLength(500)]
      public string ProductDescription { get; set; }
  
      public Product() { this.AddDate = DateTime.Now; }
  
      public DateTime AddDate { get ; private set; }
  
      [Required(ErrorMessage = "Select Category")]
      [Display(Name="Category")]
      public string Category { get; set; }
  
      [Required(ErrorMessage = "Location")]
      public bool location { get; set; }
  }
  </code></pre>
  
  <p>Model 2</p>
  
  <pre><code>public class ProductPicture
  {
      public int id { get; set; }
      public int ProductId { get; set; }
      [Required(ErrorMessage ="Please Select Picture")]
      public string pictureurl { get; set; }
  
  }
  </code></pre>
  
  <p>by using view model i could get display if there was only single image per product but since there are multiple so how can i get the first image or list of images and show it into a razor view.</p>
  
  <p>below is my controller and view both are mess :|</p>
  
  <pre><code>public ActionResult Details(long? id)
  {
      if (id == null)
      {
          return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
      }
      ProductViewModel product = new ProductViewModel();
      Mapper.CreateMap&lt;Product, ProductViewModel&gt;().ForMember(m =&gt; m. );
  
      var pro = Mapper.Map&lt; ProductViewModel&gt;(product);
      product.ProductPictures = db.ProductPictures.Where(m =&gt; m.ProductId == id);
     // product.Products = db.Products.Where(m=&gt;m.ProductId==id);
                 //Product product = db.Products.Find(id);
      if (product == null)
      {
          return HttpNotFound();
      }
      return View(product);
  }
  </code></pre>
  
  <p>details view</p>
  
  <pre><code>@model sullivan.Models.ProductViewModel
  
  @{
      ViewBag.Title = "Details";
  }
  
  &lt;h2&gt;Details&lt;/h2&gt;
  
  &lt;div&gt;
  
  
  
          &lt;div class="col-sm-7"&gt;
              &lt;div class="product-information"&gt;
                  &lt;!--/product-information--&gt;
                  &lt;img src="images/product-details/new.jpg" class="newarrival" alt="" /&gt;
                  &lt;h2&gt;@Html.DisplayFor(model =&gt; model.ProductName)&lt;/h2&gt;
                  &lt;p&gt;
                      @Html.DisplayFor(model =&gt; model.ProductDescription)&lt;/p&gt;
                  &lt;img src="images/product-details/rating.png" alt="" /&gt;
  
  
                  &lt;a href=""&gt;&lt;img src="images/product-details/share.png" class="share img-responsive" alt="" /&gt;&lt;/a&gt;
              &lt;/div&gt;&lt;!--/product-information--&gt;
          &lt;/div&gt;
          &lt;p&gt;
              @Html.ActionLink("Edit", "Edit", new { id = Model.ProductId }) |
              @Html.ActionLink("Back to List", "Index")
          &lt;/p&gt;
  
  
  
  
  
      &lt;/div&gt;
  
      &lt;div id="similar-product" class="carousel slide" data-ride="carousel"&gt;
  
          &lt;!-- Wrapper for slides --&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                  @foreach (var Picture in Model.ProductPictures)
                  {
                      &lt;a href=""&gt;&lt;img src="~/images/wallimages/imagepath/thumb2_@Picture.pictureurl" alt=""&gt;&lt;/a&gt;
                  }
              &lt;/div&gt;
  
  
          &lt;/div&gt;
  
          &lt;!-- Controls --&gt;
          &lt;a class="left item-control" href="#similar-product" data-slide="prev"&gt;
              &lt;i class="fa fa-angle-left"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;a class="right item-control" href="#similar-product" data-slide="next"&gt;
              &lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>as in the razor view i can get list of images seperately at bottom but i just need first image and other data of product how can i achieve that?</p>