MVC4, C#, retrieve data from two tables in one View

Question

I'm new to MVC and I use MVC4 and I'm new to C#. I want to retrieve data from two tables: tblProduct and tblCategory in one View. In that View I want to get from tblCategory the column "Name" and from tblProduct all the columns.

I've defined my tables in code first in class tables.cs:

public class tblCategory 
{
        //Primary Key
        [Key]
        [ScaffoldColumn(false)]
        public int CategoryId { get; set; }

        [MaxLength(160)]
        public string Name { get; set; }
        etc...
}

public class tblProduct {
        //Primary Key
        [Key]
        [ScaffoldColumn(false)]
        public int ProductId { get; set; }

        //Foreign Key
        public int CategoryId { get; set; }
        [ForeignKey("CategoryId")]
        public virtual tblCategory tblCategorys { get; set; }

        [MaxLength(500)]
        public string MainImageFileName { get; set; }
        [MaxLength(160)]
        public string Name { get; set; }

        ect...
}

My model class, bar.cs:

Namespace xx.Models
    public class bar {
        public tblProduct product { get; set; }
        public tblCategory category { get; set; }
    }

How do I define the Index class in the Controller right? So that I can send data from model bar into the View.

public ActionResult Index(){
  //How to define this?
}

And how should build up the View? @model xx.Models.bar

But I want to use a Foreach loop in my View for all the columns from tblProduct. And one column from tblCategory.

Can somebody help me with this? Thanks!

Answer 1

Your Index action should build an instance of your bar class

public ActionResult Index(){
    var b = new bar();
    b.product = some loading code;
    b.category= some loading code;
    return View(b);
}

your Index.cshtml need to expect an instance of that same model

@model ProjectName.xx.Models.bar

<div class="editor-label">
    @Html.LabelFor(model => model.category.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.category.Name)
    @Html.ValidationMessageFor(model => model.category.Name)
</div>

@* just duplicate this once for each property you want from product *@
<div class="editor-label">
    @Html.LabelFor(model => model.product.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.product.Name)
    @Html.ValidationMessageFor(model => model.product.Name)
</div>

i wouldn't use a for loop on the properties in product, because then you need reflection, and i doubt that page will function very fast.

Answer 2

I think both of this classes should be model cause clearly they are representation of tables in database. However class Bar i think it's not. I think your structure should be organized like this: product(model class), category(model class) = bar(model collection class). So instead of adding both classes as properties of class Bar you should define dictionary that will contain those class but tie those class with common interface ie IViewModel.

public interface IViewModel{
  string name {get;set;}
}
public class TblProduct: IVievModel{
 /// your code
}
public class TblCategory: IVievModel{
 /// your code
}
public class Bar{
 private Dictionary<string, IViewModel> viewModels = new Dictionary<string,IViewModel>();
}

Now in your ActionResult method you will just add those two classes to dictionary and return this class Bar to your view.