How to create profile like page with multiple tabs?

[MikeAlhayek]

I want to create a profile like page with

1. Header: which should up on all tabs
2. Navigation: which should up on all the tabs
3. Content: the content of the tab

When a user click on a tab, a request is sent to the server to render the corresponding content along with the Header and Navigation.
The output will look like this

What is the best way to go about creating a client profile?

To start, I created a ClientDisplayDriver like so

   public class ClientDisplayDriver : DisplayDriver<Client>
    {
        private readonly IStringLocalizer<ClientDisplayDriver> _s;

        public ClientDisplayDriver(IStringLocalizer<ClientDisplayDriver> s)
        {
            _s = s;
        }

        protected ShapeResult GetProfileHeader(Client client)
        {
            var header = View("Client_Profile_Header", new ClientProfileHeader()
            {
                Name = Str.Merge(client.FirstName, client.LastName),
            }).Location("Header: 1");

            return header;
        }

        protected ShapeResult GetProfileNavigationItem(string title, int position, string actionName, string icon = null)
        {
            var item = View("Client_Profile_Navigation", new ClientProfileMenuItem
            {
                ActionName = actionName,
                Title = _s[title],
            }).Location($"Navigation: {position}");

            return item;
        }

        public override Task<IDisplayResult> DisplayAsync(Client model, BuildDisplayContext context)
        {

            // Header
            var header = GetProfileHeader(model);

            // add Navigation Item
            var overviewTab = GetProfileNavigationItem("Overview", 1, nameof(ProfileController.Index));

            // Add Overview tab Content
            var content = View("Client_Profile_OverviewTab", new ClientOverviewViewModel()
            {
                FirstName = model.FirstName,
                LastName = model.LastName,
                Gender = model.Gender,
            }).Location("Content: 1");

            IDisplayResult result = Combine(header, overviewTab, content);

            return Task.FromResult(result);
        }
    }

I also create all the needed views to render the Header, Navigation and the Content zones.

In my ProfileController I create Overview tab which uses the above driver to a create all the needed shape results.

public class ProfileController : Controller, IUpdateModel
{
    private readonly IDisplayManager<Client> _clientDisplayManager;

    public ProfileController(IDisplayManager<Client> clientDisplayManager)
    {
        _clientDisplayManager = clientDisplayManager;
    }

    public async Task<IActionResult> Overview(Guid id)
    {
        // This will come from the DB
        Client client = new Clients()
        {
            FirstName = "John",
            LastName = "Do",
        };

        var shape = await _clientDisplayManager.BuildDisplayAsync(client, this);

        return View(shape);
    }
    
    public async Task<IActionResult> Addresses(Guid id)
    {
        // using the given id to find all corresponding addresses
        // generate a shape and pass it to the view

        return View();
    }
}

The above code is working and is rendering correctly. However, I now want to add Addresses tab to the profile. In order for this to work, I somehow need to call create the navigation shape and the header shape from _clientDisplayManager.BuildDisplayAsync(client, this); in addition to a shape-results for the address content and addresses tab.

Question, how can I combine the shape results from 2 or more driver into the final shape being passed to the view?

[MikeAlhayek]

With a first attempt, I though each tab would be generated using a different driver. Each driver will need to create a profile header, page tabs, and tab content. Eventually, I'll create a base driver that would generate the header and the tabs to reuse my code.

If this a bad approach? if so, what would be the right approach?
Assuming this is not a bad approach, I created a display driver "the code isn't clean, it'll get cleaned up once it is working".

public class DisplayBiometricDriver : DisplayDriver<Biometric>
{
    private IEnumerable<IClientProfileNaviationItem> _naviationItems;

    public DisplayBiometricDriver(IEnumerable<IClientProfileNaviationItem> naviationItems)
    {
        _naviationItems = naviationItems;
    }

    public override Task<IDisplayResult> DisplayAsync(Biometric biometric, BuildDisplayContext context)
    {
        if(context.DisplayType == "List")
        {
            return await DisplayContentListAsync(biometric, context);
        }

        return Task.FromResult<IDisplayResult>(Initialize<DisplayBiometricViewModel>(viewModel =>
        {
            viewModel.Id = biometric.Id;
            viewModel.IsActive = biometric.IsActive;
            viewModel.MeasuredAt = biometric.MeasuredAt;
            viewModel.Weight = biometric.Weight;
        })).Location("Rows:1");
    }


    private async Task<IDisplayResult> DisplayContentListAsync(Biometric biometric, BuildDisplayContext context)
    {
            context.Shape.Metadata.Wrappers.Add("Client_Profile_Wrapper");

        var pager = await GetPagerAsync(context);

        var client = await GetClientAsync(biometric.ClientId);

        // This will be pulled from a db, hard code for now...
        var biometrics = await GetBiometricsAsync();

        var pagedList = biometrics.ToPagedList(1, pager.PageSize);

        var pagerResult = (await New.Pager(pager)).TotalItemCount(pagedList.TotalItemCount).RouteData(new RouteData());

        var viewModel = new ListBiometricViewModel()
        {
            Records = biometrics,
            Context = context,
            Pager = pagerResult
        };

        List<IDisplayResult> results = new List<IDisplayResult>();

        // create a profile header
          var header = View("Client_Profile_Header", new ClientProfileHeader()
          {
              Name = client.FirstName + " " + client.LastName,
          }).Location("Header:1");

        results.Add(header);

        // create tab links, research a better way to add the tabs on the profile
        foreach (var naviationItem in _naviationItems)
        {
            var item = naviationItem.Item.Clone();
            item.Parameters.Add("id", client.Id);
            // Add tab
            results.Add(View("Client_Profile_Navigation", item).Location($"Navigation: {naviationItem.Position}"));
        }

    // Create a shape result with the viewModel and set it to the TabContent zone
        var tabContent = View(nameof(ListBiometricViewModel), viewModel).Location("TabContent:1");
        results.Add(tabContent);

        return Combine(results);
    }

    private Task<List<Biometric>> GetBiometricsAsync()
    {
        var models = new List<ClientBiometric>()
        {
           new Biometric()
           {
                Weight = 200,
                IsActive = true,
                Id = Guid.NewGuid(),
                MeasuredAt = DateTime.Now,
           },
           new Biometric()
           {
                Weight = 150,
                IsActive = true,
                Id = Guid.NewGuid(),
                MeasuredAt = DateTime.Now,
           },
        };

        return Task.FromResult(models);
    }
    private Task<Client> GetClientAsync(Guid id)
    {
        // This will be pulled from a db, hard code for now...
        var client = new Client()
        {
            Id = biometric.Id,
            FirstName = "John",
            LastName = "Do",
        };

        return Task.FromResult(client);
    }

    private async Task<Pager> GetPagerAsync(BuildDisplayContext context)
    {
        var settings = await _siteService.GetSiteSettingsAsync();
        var pagerParameters = new ClientPagerParameters();
        await context.Updater.TryUpdateModelAsync(pagerParameters);

        var pager = new Pager(pagerParameters, settings.PageSize);

        return pager;
    }
}

The controller looks like this

public class BiometricsTabController
{
    private readonly IDisplayManager<ClientBiometric> _displayManager; 

    public BiometricsTabController(IDisplayManager<ClientBiometric> _displayManager)
    {
        _displayManager = _displayManager
    }

    public async Task<IActionResult> Index(Guid id)
    {
        // a dummy model just to pass the ClientId to the driver
        var model = new Biometric()
        {
            ClientId = id,
        };

        var shape = await _displayManager.BuildDisplayAsync(model, this, "List");

        return View(shape);
    }
}

The ~/Views/BiometricsTab/Index.cshtml view contains @await DisplayAsync(Model)

The ~/Views/ListBiometricViewModel.cshtml view contains the following

@model ShapeViewModel<ListBiometricViewModel>
@inject OrchardCore.DisplayManagement.IDisplayManager<ClientBiometric> _displayManager;
@{
    bool hasRecords = Model.Value.Records != null && Model.Value.Records.Any();
}

<div class="card bg-light mb-3">
    <div class="card-header bg-secondary text-white">@ViewBag.PageTitle</div>
    <div class="card-body p-0">

        @if (!hasRecords)
        {
            <div class="alert alert-warning text-center offset-md-2 col-md-8 mt-3 mb-3" role="alert">@T["There are no records in the database"]</div>
        }
        else
        {
            <div class="table-responsive-md">
                <table class="table table-sm table-striped">
                    <tbody>
                        @foreach (var record in Model.Value.Records)
                        {
                            var shape = await _displayManager.BuildDisplayAsync(record, Model.Value.Context.Updater, "Summary", Model.Value.Context.GroupId);

                            @await DisplayAsync(shape)
                        }
                    </tbody>
                </table>
            </div>
        }
    </div>

    @if (hasRecords && Model.Value.Pager != null)
    {
        <div class="card-footer">
            @await DisplayAsync(Model.Value.Pager)
        </div>
    }
</div>

The ~/Views/ClientBiometric.Summary.cshtml view contains @await DisplayAsync(Model.Content)

The ~/Views/DisplayBiometricSummaryViewModel.cshtml view contains

@model DisplayBiometricSummaryViewModel

<tr>
    <td></td>
    <td>@Model.Weight</td>
    <td>@Model.MeasuredAt</td>
    <td>@Model.IsActive</td>
</tr>

Finally the Client_Profile_wrapper.cshtml view contains the following

<div class="card text-center">
    <div class="card-header pb-0">

        @if (Model.Header != null)
        {
            @await DisplayAsync(Model.Header)
        }

        @if (Model.Navigation != null)
        {
            <ul class="nav nav-tabs card-header-tabs">
                @await DisplayAsync(Model.Navigation)
            </ul>
        }
    </div>

    @if (Model.TabContent != null)
    {
        <div class="card-body">
            @await DisplayAsync(Model.TabContent)
        </div>
    }
</div>

Everything seems to be rendering correctly. But, before I spend the time cleaning it up. Is there a better approach to this? I believe there is at least a better way to handle navigation by using Navigation Providers "some how". Any help on how to make this better?

[jtkech]

@CrestApps

About local navigation using TABs see my answer in #8237

See also the docs about groupings using TABs / CARDs / COLUMNs, e.g. to see how to define a location string for a given zone, position, tab name, and so on

https://docs.orchardcore.net/en/dev/docs/reference/core/Placement/#supported-groupings