How to display List and Details on the same view in MVC 5

Question

0.00/5 (No votes)

See more:

Hello Everyone,

I want to be able to display List and detail on the same view, i am using a viewmodel that combines the properties of the two views/models, i am using tab control, i want to be able to display detail view on the first tab and list and list on the second tab. i have tried this:

C#

var detailsList = (from c in db.Customers
           join a in db.Addresses
               on c.ClientId equals a.CustomerId

           where c.RowId == id
           select new ManageViewModel
           {
               ClientType = c.ClientType,
               ClientId = c.ClientId,                                  
               Email = c.Email,
              
           }).FirstOrDefault();

var model = new DetailsListViewModel();
if (detailsList != null)
{
model.Customer = new Customer { ClientType = detailsList.ClientType };
model.Customer = new Customer { ClientId = detailsList.ClientId };                
model.Customer = new Customer { Email = detailsList.Email };

//Address starts here
model.Addresses = new List<Address>();               
model.Addresses.Add(new Address { CustomerId = detailsList.ClientId });
model.Addresses.Add(new Address { AddressLine1 = detailsList.AddressLine1 });
model.Addresses.Add(new Address { AddressLine2 = detailsList.AddressLine2 });

}



var ct = TempData["ClientType"] = detailsList.ClientType;
return View(model);

View for client details:

HTML

<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Customer.ClientType)
</dt>

<dd>
@Html.DisplayFor(model => model.Customer.ClientType)
</dd>

<dt>
@Html.DisplayNameFor(model => model.Customer.ClientId)
</dt>

<dd>
@Html.DisplayFor(model => model.Customer.ClientId)
</dd>

<dt>
@Html.DisplayNameFor(model => model.Customer.Email)
</dt>

<dd>
@Html.DisplayFor(model => model.Customer.Email)
</dd>


</dl>

View for Addresses:

HTML

<table>
<tr>
<th>ClientId</th>
<th>AddressLine1</th>
<th>AddressLine2</th>

</tr>
@foreach(var item in Model.Addresses)
{
<tr>
<td>@item.CustomerId</td>
<td>@item.AddressLine1</td>
<td>@item.AddressLine2</td>                                                      
</tr>
}
</table>

Classes and ViewModel:

C#

public class DetailsListViewModel
{

public Customer Customer { get; set; }
public List<Address> Addresses { get; set; }
}

public class Customer
{

public string ClientType { get; set; }
public string ClientId { get; set; }
public string Email { get; set; }
}

public class Address
{

public string CustomerId { get; set; }
public string AddressLine1 { get; set; }
public string AddressLine2 { get; set; }
}

I want to be able to display this on the same view, i dont know how this can be possible, i will appreciate any assistance. thanks

Posted 25-Nov-15 5:02am

Uwakpeter

Updated 27-Nov-15 0:08am

v3

Add a Solution

Comments

F-ES Sitecore 25-Nov-15 11:19am

You're not using a view model, you're using an anonymous type which is not supposed to be passed outside the function that created it, you're going to struggle to get this method to work. Instead use a concrete class for your viewmodel, making a new one that contains the properties you need if you have to.

google "mvc two models in a single view" and you'll find lots of articles that show how to do this.

Uwakpeter 25-Nov-15 13:56pm

I know how to display multiple model in one view using ViewModel, where i am having issue is displaying List requires @model IEnumerable<viewmodelname> to run while displaying Details require @model ViewModelName to run, how do i use: @model ViewModelName and @model IEnumerable<viewmodelname> in one view

Krunal Rohit 25-Nov-15 12:18pm

Well, you need to create the ViewModel for showing the both models in a single view.

-KR

Uwakpeter 25-Nov-15 13:56pm

I know how to display multiple model in one view using ViewModel, where i am having issue is displaying List requires @model IEnumerable<viewmodelname> to run while displaying Details require @model ViewModelName to run, how do i use: @model ViewModelName and @model IEnumerable<viewmodelname> in one view

Krunal Rohit 25-Nov-15 23:41pm

You can combine both the objects in another model and use it later.

-KR

Uwakpeter 25-Nov-15 13:55pm

I know how to display multiple model in one view using ViewModel, where i am having issue is displaying List requires @model IEnumerable<viewmodelname> to run while displaying Details require @model ViewModelName to run, how do i use: @model ViewModelName and @model IEnumerable<viewmodelname> in one view

3 solutions

Solution 1

Customer Model

C#

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }

    public string Group { get; set; }
    public string Type { get; set; }

    public string Contact { get; set; }

    public virtual Address Address { get; set; }
}

Address Model

C#

public class Address
{
    public int ID { get; set; }

    public string AddressLine1 { get; set; }
    public string AddressLine2 { get; set; }
    public string State { get; set; }
    public string City { get; set; }

    public int CustomerId { get; set; }
}

ViewModel By joining these two

C#

public class ViewModelClient
{

    public string Name { get; set; }

    public string Group { get; set; }
    public string Type { get; set; }

    public string Contact { get; set; }

    public string AddressLine1 { get; set; }
    public string AddressLine2 { get; set; }
    public string State { get; set; }
    public string City { get; set; }

}

Controller Method

C#

public ActionResult Index(int id)
{
    ViewModelClient Cliensinfo = (from c in db.Customers
                                  join a in db.Addresses on
                                  c.Id equals a.CustomerId
                                  where c.Id == id
                                  select new ViewModelClient
                                  {
                                    Name=c.Name,
                                    Group=c.Group,
                                    Contact=c.Contact,
                                    Type=c.Type,
                                    AddressLine1=a.AddressLine1,
                                    AddressLine2=a.AddressLine2,
                                    State=a.State,
                                    City=a.City


                                  }).FirstOrDefault();


    return View(Cliensinfo);
}

And The view

Razor

@model WebApplicationCodePro.Models.ViewModelClient
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

Posted 25-Nov-15 7:22am

Anisuzzaman Sumon

Comments

Uwakpeter 25-Nov-15 13:55pm

I know how to display multiple model in one view using ViewModel, where i am having issue is displaying List requires @model IEnumerable<viewmodelname> to run while displaying Details require @model ViewModelName to run, how do i use: @model ViewModelName and @model IEnumerable<viewmodelname> in one view

Solution 2

Okay, your model structure would be something like this-

C#

public class ClientDetail
{
    public int Id { get; set; }
    public string Name { get; set; }
    // your other properties
}

public class AddressDetail
{
    public int Id { get; set; }
    public string AddressLine1 { get; set; }
    // your other properties
}

public class ClientViewModel
{
    public ClientDetail _ClientDetail { get;set; }
    public List<clientdetail> _ClientDetails { get; set; }

    public ClientDetail _AddressDetail { get;set; }
    public List<addressdetail> _AddressDetails { get; set; }
}</addressdetail></clientdetail>

Now, use the ClientViewModel for displaying both the data, i.e object and collection.

-KR

Posted 25-Nov-15 17:42pm

Krunal Rohit

Comments

Uwakpeter 26-Nov-15 2:09am

Please how do i use the ClientViewModel in the controller action following this your example?

F-ES Sitecore 26-Nov-15 4:11am

Create a new instance of it, populate the customer details, then populate the address details. If you have a one to many relationship between customer and address then google for how you use hierarchical data with EF. That will return a Customer object with an Address collection rather than doing it the way you are currently.

Uwakpeter 26-Nov-15 4:17am

if i had wanted to display them on different views, i wouldnt have issues, my issue here is that a view can only accept only one @model directive, to display list of records i will need @model IEnumerable<viewmodelname>, while Details will require @model ViewModelName

F-ES Sitecore 26-Nov-15 4:33am

Look at the solution I added

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Accepted Answer · 2015-11-25T22:34:00

Solution 3

Model

C#

public class Customer
{
    public string Name { get; set; }
}

public class Address
{
    public string AddressLine1{ get; set; }
}

public class CustomerModel
{
    public Customer Customer { get; set; }
    public List<Address> Addresses { get; set; }
}

Controller

C#

public ActionResult Index()
{
    CustomerModel model = new CustomerModel();
    model.Customer = new Customer { Name = "John" };
    model.Addresses = new List<Address>();

    model.Addresses.Add(new Address { AddressLine1 = "123 Fake Street" });
    model.Addresses.Add(new Address { AddressLine1 = "22b Baker Street" });

    return View(model);
}

View

Razor

@model TestMvc.Models.CustomerModel

<p>
    @Model.Customer.Name
</p>

<table>
    @foreach(var address in Model.Addresses)
    { 
    <tr>
        <td>@address.AddressLine1</td>
    </tr>
    }
</table>

Posted 25-Nov-15 22:34pm

F-ES Sitecore

Comments

Uwakpeter 26-Nov-15 10:33am

Thanks for your much assistance,i have tried this, model only has values for addresses, customer records are null at the point of returning the values to view, and also, addresses come as count, each count has only one value for a particular record while the rest properties will be null and so on, so in the display it appears in steps like stair case. i will appreciate if you could still assist. Thanks

F-ES Sitecore 26-Nov-15 11:40am

You'll need to update your original question with the code you have so far.

Uwakpeter 27-Nov-15 6:10am

Hello sir, i have updated the original question with the code i have so far based on this your example, i will appreciate if you could help me look at it. Thanks

F-ES Sitecore 27-Nov-15 6:20am

if (detailsList != null)
{
model.Customer = new Customer { ClientType = detailsList.ClientType, ClientId = detailsList.ClientId, Email = detailsList.Email };

//Address starts here
model.Addresses = new List<Address>();
model.Addresses.Add(new Address { CustomerId = detailsList.ClientId, AddressLine1 = detailsList.AddressLine1, AddressLine2 = detailsList.AddressLine2 });

}

Uwakpeter 27-Nov-15 7:09am

Thanks, that works for me, but the addresses is displaying one step below each other, how do i display each address per row?

F-ES Sitecore 27-Nov-15 7:12am

Just update the view as needed;

<td>@address.AddressLine1, @address.City, ...</td>

Uwakpeter 27-Nov-15 7:27am

just tried that, it displays all in one column, and also picks only one address, i want it to pick all the addresses where address.customerId = customer.ClientId

F-ES Sitecore 27-Nov-15 7:36am

You are selecting all data as rows and for each row creating one customer with one address. What you need to do is select the customers, and create a Customer object for each one, and then select all addresses for that customer and loop around adding one address object per address to the existing Customer.

If you have your table relations set up and your EF properly configured you should be able to query for customers and each customer will have an Addresses collection you can loop through. As I said elsewhere, google for getting hierarchical data using entity framework for examples.