Using Multiple model in a single view ASP.NET, MVC

Question

I am devolaping a 2nd hand item selling like OLX, I have two models

1: Product_model

2: Customer_model

so i want to use the the product description and customer information in a single view. Models:

 [Table("Product")]
    public class ProductModel
    {
        [Key]
        public string ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal ProductPrice { get; set; }
        public string ProductDescription { get; set; }
        public string ProductCategory { get; set; }
        public string ProductAddress { get; set; }
        public string ProductImage1 { get; set; }
        public string ProductImage2 { get; set; }
        public string ProductImage3 { get; set; }
        public string CustomerId { get; set; }
       // public DateTime ProductSubTime { get; set; }
    }

    [Table("Customer")]
    public class CustomerModel
    {
        [Key]
        [Required(ErrorMessage = "Please provide Customer ID", 
        public string CustomerFullName { get; set; }
        public int CustomerContact { get; set; }
        public string CustomerEmail { get; set; }
        public string CustomerGender { get; set; }
        public string CustomerAddress { get; set; }
    }

My controller:

public ActionResult Index()
    {
        return View(cm.Products.ToList());
    }

My view:

@model IEnumerable<WebApplication11.Models.ProductModel>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/MyTemplate.cshtml";
}

 <div class="col-md-4"style="border: 2px solid yellow" >
                <div class="single-product-widget" style="border: 2px solid black">
                    <h2 class="product-wid-title">Recently Viewed</h2>
                    <a href="#" class="wid-view-more">View All</a>
                    @{ int i = 0;}
                    @foreach (var item in Model)
                    {
                           <div class="single-wid-product" style="border: 2px dashed black">
                           <a href="single-product.html"><img src="~/images/@item.ProductImage1" alt="No Photo" class="product-thumb"></a>
                           <h2>@Html.DisplayFor(model => item.ProductName)</h2>
                           </div>
                    }
             <div>
</div>

For understanding purpose i deleted some part of view. Please guide me accessing both models in particular view. I tried also some methods but not able to get it. Thanks in advance...

Kiarash Alinasab · Answer 1 · 2017-01-01T19:19:51.967

1

You can create a view model with 2 properties like following code

public class MyModel
{
    public List<ProductModel> Products { get; set; }
    public List<CustomerModel> Customers { get; set; }
}

In controller:

public ActionResult Index()
    {
        var model = new MyModel
        {
            Products = cm.Products.ToList(),
            Customers = cm.Customers.ToList()
        };
        return View(model);
    }

In Veiw

@foreach (var item in Model.Products)
{
   @*Write your razor code here*@
}

edited Jan 01 '17 at 19:19

answered Jan 01 '17 at 12:45

Kiarash Alinasab

794
1
4
16

Thnks!! can you please send me the coding for view, accessing both model using `@foreach loop()` – Zainudin Noori Jan 01 '17 at 15:02
@foreach (var item in Model) – Kiarash Alinasab Jan 01 '17 at 19:12
foreach (var item in Model.Products) – Kiarash Alinasab Jan 01 '17 at 19:14

score 0 · Answer 2 · answered Jan 01 '17 at 15:47

There are several options to access several models in a particular view. I assume that you just want to show some customer information in page corner or something. Your layout view may have a requirement to include this customer info (but it does not matter anyway).

Most preferable option from my point of view is to use child action.

Create CustomerController

public class CustomerController : Controller {
    [ChildActionOnly]
    public ViewResult CustomerInfo() {
        CustomerModel customer = ...
        return PartialView("_CustomerPartial", customer);
    }
}

.chstml view will have @Html.Action("CustomerInfo", "Customer") where you want customer info to be displayed.

This way you will have a separate CustomerModel creation logic.

Another option is to use ViewData or ViewBag to store secondary model information like customer info.

Controller code:

public ActionResult Index()
{
    var products = cm.Products.ToList();
    ViewBag.Customer = ... // get customer
    return View(products);
}

View code:

@model IEnumerable<WebApplication11.Models.ProductModel>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/MyTemplate.cshtml";
    var customer = (CustomerModel)ViewBag.Customer;
}

@* display customer info *@
@* either { *@
    <div>Welcome @customer.CustomerFullName. You email is @customer.CustomerEmail</div>   
@* } or { *@
    @Html.Partial("_CustomerPartial", customer)
@* } *@

@foreach(var product in Model) {
    @* display product info *@
}

Previous option can be changed in a way to use strongly typed model. It is also can be known as view model - usually a class that exists only to store necessary info for the view. In your case these are some customer and products information.

ViewModel:

public class ProductListViewModel {
    public CustomerModel Customer { get; set; }
    public IEnumerable<ProductModel> Products { get; set; }
}

Using Multiple model in a single view ASP.NET, MVC

2 Answers2