Return a viewmodel with IEnumerable's to view and use razor to loop variables into the same row

Question

In a razor view, how can I loop through different IEnumerables in a ViewModel and display their variables as columns in the same row?

I Return an instance of a viewmodel which is populated with IEnumerables of different models to a mvc view like so:

Viewmodel:

namespace example.ViewModels
{

    public class ClaimModel
    {
        public IEnumerable Claims { get; set; }
        public IEnumerable Members { get; set; }
        public IEnumerable IDs { get; set; }

    }
}

My controller which return the view looks like this:

namespace example.Controllers
{
    public class OfficeManagerController : Controller
    {
        private Entities db = new Entities(); //This is my database

        public ActionResult Index()
        {
            IEnumerable member = db.Members.OrderByDescending(b => b.ClaimID);
            IEnumerable claim = db.Claims.OrderByDescending(b => b.ClaimID);
            IEnumerable id = db.IDs;
            ClaimModel model = new ClaimModel { IDs = id, Members = member, Claims = claim };

            return View(model);
        }
    }
}

Here is a snippet of my razor view where i loop through one of the IEnumerables in my viewmodel called Members:

@model example.ViewModels.ClaimModel


    
        
            Claim ID:
        
        
            Member Name:
        
        
            Member ID:
        

    

    @foreach (var item in Model.Members)
    {

        
            @Html.DisplayFor(modelItem => item.ClaimID)
        
        
            @Html.DisplayFor(modelItem => item.Name)
        
        
            @Html.DisplayFor(modelItem => item.MemberID)
        

    }

This is a regular way of looping through one of the IEnumerables. Of course I don't need a ViewModel to accomplish this because I might as well just pass my Members IEnumerable straight into my view.

Now what logic do I have to apply in order to display data from the three different IEnumerables into columns of the same row? I imagine its possible with razor.

I need something like this:

@model example.ViewModels.ClaimModel


    
        
            Member Name:
    
    
        Claim Name:
    
    
        ID Name:
    


@foreach (var item in Model.Members)
{
    
        @Html.DisplayFor(modelItem => item.Name)
    
}
@foreach (var item in Model.Claims)
{
    
        @Html.DisplayFor(modelItem => item.Name)
    
}
@foreach (var item in Model.IDs)
{
    
        @Html.DisplayFor(modelItem => item.Name)
    
}

However this will not insert my variables into the same rows but will stack all the members names next to one another and so on.

I am adding here thanks to comment below that every Claim has a Member and an ID. Claim has a primary key called ClaimID and Member and ID are related to it with foreign keys called ClaimID.

Shyju · Accepted Answer

Assuming all three collections has same item count and you want to show the nth item in all the lists on the nth row of the table in 3 columns, this should work.


    @{ var rowCounter = 0;}
    @foreach (var item in Model.Members)
    {
        
        rowCounter++;
    }

            
                 @item.Name
            
            
                @if (Model.Claims.Count()>= rowCounter)
                {
                    @Model.Claims[rowCounter].Name
                }    
            
                
                @if (Model.IDs.Count()>= rowCounter)
                {
                    @Model.IDs[rowCounter].Name
                }

While this solve your problem, I strongly suggest you change your approach. You should do a join in your controller and send a list of items with all these 3 properties and do a simple loop and display in your razor view.

So create a view model to represent your grid data

public class ClaimRecord
{
  public string ClaimName {set;get;}
  public string MemberName {set;get;}
  public int Id {set;get;}
}

and in your action method, join the three data sets and project the needed results a collection of this class and send to the view

var list = new List();
//to do: Add items to the list here 
// I don't know the relation between these 3 data sets. So i can't tell yo how to do that.
// But basically, if you have forign key relationship or so, you need to do a join
return View(list);

and in your view

@model List

@foreach(var item in Model)
{
  
}

     @item.Id
     @item.ClaimName
     @item.MemberName

EDIT : As per the comment.

Claim has a primary key called ClaimID and Member and ID are related to it with foreign keys called ClaimID.

You can do a join with your LINQ expression.

var list = (from a in db.Claims
    join b in db.Members on a.ClaimID equals b.ClaimID 
    join c in db.IDs on a.ClaimID equals c.ClaimID 
    select new ClaimRecord {
                            Id = a.ClaimID,  //Update these as needed
                            MemberName = b.MemberName,
                            ClaimName = a.ClaimName }).ToList();

return View(list);

Please update the projection part with your property names.(My code assumes that Member table/Entity has a MemberName column/property and Claim table has a ClaimName property. Update that part according to your needs.

Return a viewmodel with IEnumerable's to view and use razor to loop variables into the same row

Answers (1)

Related Questions

Return a viewmodel with IEnumerable&#39;s to view and use razor to loop variables into the same row

Answers (1)

Related Questions

Return a viewmodel with IEnumerable's to view and use razor to loop variables into the same row