The media object component can be used to build hierarchical style lists such as blog comments or tweets. In the following example application, we'll use it to return a search result view when the user searches for employees. Our model will have a 'ReportsTo' field indicating which employee other employees report to; the media object component would be ideal to indicate this visually.

The method located in SearchController that searches for the employees and returns the results to the view is as follows:

public IActionResult SearchEmployees(string query) 
{ 
    ViewBag.SearchQuery = query; 
    var employees = GetEmployees(); 
    if (!string.IsNullOrEmpty(query)) 
    { 
        var results = employees.Where(p => p.Name.Contains(query)); 
        return View(results); 
    } 
    return View(employees); 
} 

The preceding code will retrieve a list of employees using the GetEmployees method and, if the query parameter is not empty, return employees matching the search criteria and pass all employees to the view.

The code for the GetEmployees method is as follows:

private List<EmployeeViewModel> GetEmployees() 
{ 
    var vicePresident = new EmployeeViewModel 
    { 
        Id = 2, 
        Name = "Andrew Fuller", 
        JobTitle = "Vice President, Sales", 
        ReportsTo = null 
    }; 
 
    var reportingEmployees = new List<EmployeeViewModel> 
    { 
        new EmployeeViewModel { Id = 1, Name = "Nancy Davolio",JobTitle = 
        "Sales Representative", ReportsTo = 2}, 
        new EmployeeViewModel { Id = 3, Name = "Janet Leverling", JobTitle =
        "Sales Representative", ReportsTo = 2 }, 
        new EmployeeViewModel { Id = 4, Name = "Laura Callahan", JobTitle =
        "Inside Sales Coordinator", ReportsTo = 2 } 
    }; 
 
    vicePresident.ReportingEmployees = reportingEmployees; 
    var employees = new List<EmployeeViewModel> { vicePresident }; 
 
    return employees; 
} 

The view for the employees search result uses the media object component to style the employee information and display the employee photos. The markup for the view is as follows:

@model IEnumerable<Chapter3.Models.EmployeeViewModel> 
<div class="container"> 
        <h1> 
            Employees Results <small>Results for your search term: 
            "@ViewBag.SearchQuery"</small> 
        </h1>     
    @foreach (var item in Model) 
    { 
        <div class="media"> 
            <div class="media-left"> 
                <a href="#"> 
                    <img class="media-object" src="@Url.Content("~/img 
                     /employees/" + @item.Id + ".png")" alt="@item.Name" 
                     width="64" height="64"> 
                </a> 
            </div> 
            <div class="media-body"> 
                <h4 class="media-heading">@item.Name</h4> 
                @item.About 
                @foreach (var emp in @item.ReportingEmployees) 
                { 
                    <div class="media"> 
                        <a class="media-left" href="#"> 
                            <img class="media-object" src="@Url.Content("~/img
                             /employees/" + @emp.Id + ".png")" alt="@emp.Name" 
                             width="64" height="64"> 
                        </a> 
                        <div class="media-body"> 
                            <h4 class="media-heading">@emp.Name</h4> 
                            @emp.JobTitle 
                        </div> 
                    </div> 
                } 
            </div> 
        </div> 
    } 
</div> 

The media object component is built up using a combination of elements with the class names of .media, media-heading, and media-body. The .media-object class name is used to indicate media objects such as images, video, or audio. The resulting view should look similar to the following screenshot: