CODEWITHSUNDEEP
c#asp.net-mvcrazormodelviewmodel
aradhana lohan
aradhana lohan

Reputation: 27

How to use View Models in MVC to display multiple model in razor view?

I have just started working with mvc after doing so much R&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.

model 1 

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

Model 2

public class ProductPicture
{
    public int id { get; set; }
    public int ProductId { get; set; }
    [Required(ErrorMessage ="Please Select Picture")]
    public string pictureurl { get; set; }

}

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.

below is my controller and view both are mess :|

public ActionResult Details(long? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    ProductViewModel product = new ProductViewModel();
    Mapper.CreateMap<Product, ProductViewModel>().ForMember(m => m. );

    var pro = Mapper.Map< ProductViewModel>(product);
    product.ProductPictures = db.ProductPictures.Where(m => m.ProductId == id);
   // product.Products = db.Products.Where(m=>m.ProductId==id);
               //Product product = db.Products.Find(id);
    if (product == null)
    {
        return HttpNotFound();
    }
    return View(product);
}

details view

@model sullivan.Models.ProductViewModel

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>



        <div class="col-sm-7">
            <div class="product-information">
                <!--/product-information-->
                <img src="images/product-details/new.jpg" class="newarrival" alt="" />
                <h2>@Html.DisplayFor(model => model.ProductName)</h2>
                <p>
                    @Html.DisplayFor(model => model.ProductDescription)</p>
                <img src="images/product-details/rating.png" alt="" />


                <a href=""><img src="images/product-details/share.png" class="share img-responsive" alt="" /></a>
            </div><!--/product-information-->
        </div>
        <p>
            @Html.ActionLink("Edit", "Edit", new { id = Model.ProductId }) |
            @Html.ActionLink("Back to List", "Index")
        </p>





    </div>

    <div id="similar-product" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                @foreach (var Picture in Model.ProductPictures)
                {
                    <a href=""><img src="~/images/wallimages/imagepath/[email protected]" alt=""></a>
                }
            </div>


        </div>

        <!-- Controls -->
        <a class="left item-control" href="#similar-product" data-slide="prev">
            <i class="fa fa-angle-left"></i>
        </a>
        <a class="right item-control" href="#similar-product" data-slide="next">
            <i class="fa fa-angle-right"></i>
        </a>
    </div>

</div>

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?

Upvotes: 1

Views: 1183

Answers (1)

Shyju
Shyju

Reputation: 218882

Assuming you have a ProductImage property in your ProductViewModel of type string.

public class ProductViewModel
{
  public string ProductImage  { set;get;}
  //Other existing properties
}

and in your action method, you can call the First() method on the product pictures collection(if at least one exist)

var product = new ProductViewModel();
var pictures = db.ProductPictures.Where(m => m.ProductId == id);
if(pictures!=null && pictures.Any())
{
    product.ProductImage = pictures.First(x=>x.pictureurl);
}

OR If you already have a collection property in your view models to store a list of product image urls, but do not want to create a new one to store the first image, you can simply call First() method on that collection in your razor view

<h1>Product Image</h1>
@if(Model.ProductPictures.Any())
{
  <div>
     <img src="~/images/wallimages/imagepath/[email protected]().pictureurl" />
  </div>
}

Upvotes: 1

Related Questions