.Net Core 2.0 Drill down functionality w/ Razor Pages

Question

Currently I am learning razor pages and come from a WPF background.

I am displaying some data in a row format but want to create a drill down format such as this: http://jsfiddle.net/zey3h41o/

Where I can create summaries of top level data from one model and then create a drill down feature showing child entries of a data sturcture such as this:

List>>

And the model

    public struct HighLevelOutput
    {
    public string CorpCustomer { get; set; }
    public string Item { get; set; }
    public string ItemDescription { get; set; }
    public double SummedOrder  { get; set; }
    public double SummedForecast { get; set; }
    public int Week { get; set; }
    public double Difference { get; set; }
    public string UoM { get; set; }
    }

My Razor Page:

@page
@model DemandControlTool.Pages.CalculateLogModel
@{
ViewData["Title"] = "CalculateLog";
}

Abnormal Demand


    
        
            
            
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].CorpCustomer)
            
            
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].Item)
            
            
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedOrder)
            
            
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedForecast)
            
            
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].Difference)
            
        
    



        @foreach (var item in Model.DropDownAllOrders)
    {
        
}
    
    
            
                @Html.DisplayFor(modelItem => item.Item1.Item)
            
            
                @Html.DisplayFor(modelItem => item.Item1.ItemDescription)
            
            
                @Html.DisplayFor(modelItem => item.Item1.CorpCustomer)
            
            
                @Html.DisplayFor(modelItem => item.Item1.SummedOrder)
            
            
                @Html.DisplayFor(modelItem => item.Item1.SummedForecast)
            
            
                @Html.DisplayFor(modelItem => item.Item1.Difference)
            
        
    
        Drill Down Data
        Drill Down Data

The problem I'm having is populating the table where I can have the collapsed entries underneath each row. In the way I've been playing with it I would need to have a separate defined row for each object in the list. I'd like the body class there to have the List for each summary row.

In the example above the collapsed body only appears under the bottom row.

Updated Edit:

 @page
@model DemandControlTool.Pages.CalculateLogModel
@{
    ViewData["Title"] = "CalculateLog";
}






    
    
    Data page


    
        
            @{int counter = 0; }
            @foreach (var dataVM in Model.CollapseReport)
            {
                
                    
                        
                            
                        
                    

                    
                        
                            
                                @foreach (var item in dataVM.WeeksOfData)
    {
                            @item.Item
                            @item.ItemDescription
                            @item.CorpCustomer
                            @item.Difference
                            @item.Week

}
                            
                        
                    
                
                counter++;
            }

Mahmoud Heretani · Accepted Answer

Base on the example you have provided, I thought about a different solution for your problem, which in my opinion is simpler and fit within the web much more better, first of all I had used JQuery and Bootstrap v.4 inside my front-end code, then I have used two components which they are:

List group
Collapse

Afterwards I create a view model for my data shape, which contains a title with a list of items (I use strings for demonstration only) as following:

public class DataViewModel
{
    public string Title { get; set; }
    public IEnumerable Data { get; set; }
}

And create a Index an action as following (just to fill up some data and pass it to the view:

        public IActionResult Index()
    {
        var pageViewModel = new List()
        {
            new DataViewModel()
            {
                Title="First data tab",
                Data=new string []{"Item 1","Item 2","Item 3"}
            },
            new DataViewModel()
            {
                Title="Second data tab",
                Data=new string []{"Item 1","Item 2","Item 3"}
            }
        };
        return View(pageViewModel);
    }

Finally the view code is like the following:

@model IEnumerable
@{
    Layout = null;
}





    
    
    Data page


    
        
            @{int counter = 0; }
            @foreach (var dataVM in Model)
            {
                
                    
                        
                            
                        
                    

                    
                        
                            
                                @foreach (var item in dataVM.Data)
                                {
                                    @item

                                }
                            
                        
                    
                
                counter++;
            }

And the final result is:

Second Edition (collapsible item when the page is rendered beside display entity data side by side rather than string data):

Entity class:

public class Entity
{
    public string Name { get; set; }
    public string BriefDescription { get; set; }
    public double Price { get; set; }
}

View model class:

public class DataViewModel
{
    public string Title { get; set; }
    public IEnumerable Data { get; set; }
}

The action:

        public IActionResult Index()
    {
        var pageViewModel = new List()
        {
            new DataViewModel()
            {
                Title="First data tab",
                Data=new List()
                {
                    new Entity()
                    {
                        Name="First item",
                        BriefDescription="My description",
                        Price=1000
                    },
                    new Entity()
                    {
                        Name="Second",
                        BriefDescription="My description",
                        Price=500
                    },
                    new Entity()
                    {
                        Name="Third",
                        BriefDescription="My description",
                        Price=1000
                    }
                }
            },
            new DataViewModel()
            {
                Title="Second data tab",
                Data=new List()
                {
                    new Entity()
                    {
                        Name="First item",
                        BriefDescription="My description",
                        Price=1000
                    },
                    new Entity()
                    {
                        Name="Second",
                        BriefDescription="My description",
                        Price=500
                    },
                    new Entity()
                    {
                        Name="Third",
                        BriefDescription="My description",
                        Price=1000
                    }
                }
            }
        };
        return View(pageViewModel);
    }

And finally the razor code:

    @model IEnumerable
@{
    Layout = null;
}





    
    
    Data page


    
        
            @{int counter = 0; }
            @foreach (var dataVM in Model)
            {
                
                    
                        
                            
                        
                    

                    
                        
                            
                                @foreach (var item in dataVM.Data)
                                {
                                    @($"Name :{item.Name}, {item.BriefDescription}, {item.Price}$")
                                }
                            
                        
                    
                
                counter++;
            }

.Net Core 2.0 Drill down functionality w/ Razor Pages

Answers (1)

Related Questions