CODEWITHSUNDEEP
c#asp.netasp.net-mvcasp.net-mvc-4
loveforfire33
loveforfire33

Reputation: 1110

Display objects in a grid MVC

Im trying to learn MVC and im not even sure how to start approaching this, and cant seem to google anything relevant.

I basically have a list of objects that i would like to display in a grid. with each cell of the grid containing the data of the entire object. (The objects are friends of a user, with just an image and a username in the object)

I can make them display in a single column using a foreach loop. But this is obviously not ideal as it makes a long thin list of usernames and images.

Could someone point me to a guide that does something similar, or even just give me a heads up on what to search for incase there is some terminology im missing while trying to search for a solution.

Thanks

Upvotes: 2

Views: 1970

Answers (1)

hutchonoid
hutchonoid

Reputation: 33306

In your action, you return a model that contains a representation of your tabular data.

First create your models User and Friend objects:

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Friend> Friends { get; set; }
}

public class Friend
{
    public int Id { get; set; }
    public string UserName { get; set; }
    public string ImageUrl { get; set; }
}

Then create your action, I will just use an index one here for demo purposes. This will build up your User objects in a List and return them to the view:

public ActionResult Index()
{
        var model = new List<User> { new User { Id = 1, Name = "name", 
        Friends = new List<Friend> { new Friend { Id = 1, UserName = "name", ImageUrl = "a.jpg" } }, 

        new User { Id = 2 Name = "name2",  
        Friends = new List<Friend> { new Friend { Id = 1, UserName = "name", ImageUrl = "b.jpg" } }
            };
            return View(model);
    }

Then in your view do the following:

@model List<User>

 <table>
 <tr>
   <th>Id</th>
   <th>Name</th>
   <th>Friends</th>
 </tr>
 @foreach(var user in Model)
 {
   <tr>
      <td>@product.Id.ToString()</td>
      <td>@product.Name</td>
      <td>@foreach(var friend in user.Friends)
         {
             @friend.UserName <br/>
             <img src="@friend.ImageUrl" /> <br/>
         }
      </td>
   </tr>
 }
 </table>

The above simply says the model is a List of User objects and then a foreach loop to write them out. As the Friend objects are nested you can do a for loop within your user loop.

The html of the friends loop can be configured to any desired output. You could implement a hover-over div to compress it like this.

     <td>
            <a>Show friends!</a>
         @foreach(var friend in user.Friends)
         {
             <div>
             @friend.UserName <br/>
             <img src="@friend.ImageUrl" /> <br/>
             </div>
         }
      </td>

Then add the css for it as follows:

div {
    display: none;
}

a:hover + div {
    display: block;
}

Please forgive any typos, I am not at a PC.

Upvotes: 2

Related Questions