Contextual experiences in UI

February 18, 2022 The Editorial Board- Teamware Solutions

Image courtesy- pxhere

DynamicContent in .NET 6

Imagine you stating to the computer on what you need as app and the computer amazingly gives you back a near real version of what you had asked. Many developers dream of this almost daily. Though, at some level this might throw us developers out of jobs but we still dream of that power to make wish.

One of the pains that every dev’s encounter is the sticky wicket of frontend. Getting it right is difficult most of the time and even more for backend developers. The problem compounds in nature when the purpose for which frontend is being developed is high-fidelity prototype. i.e., a working prototype that is used to communicate the idea of software being built and might not be useful for the subsequent build phases. In such early stages you have to develop alternatives and lot of switch..case or if..elseconstructs appear on the page.

In .NET6, particularly the ASP.NET framework introduction of DynamicComponent addresses this whitespace. Besides the understanding we have as a new Blazor component; Put simply one of the earliest understandings we have about this component beyond some framework definition is –

Strongly typed user control component with reflection capabilities.

.NET aficionados will remember the ASP.NET UserControl, DynamicComponent treads the same concept but punches an additional level of dynamism, and probably that is why it is named DynamicComponent. Let us put this in perspective by creating a new blazor component project in .NET6.

Let us start by populating the following content in Index.cshtml –

This is our root page which is hosting a dropdown that lets you choose the type of technology audit you request to your Technology CoE. Focus on the value for each option. It is a type and not literal. It uses the standard C# 6 operator nameof to deduct the type’s name. Parameter to that is a class name which at compile time is resolved to fully qualified name.

On the face value this does not do much until we do this –

Here AlphaProduct.Shared is our namespace that hosts the class definition (razon files) for DefaultDepth, EnterpriseArchitecture, ProductLineArchitecture, ApplicationDesign, ComponentDesign.

We will have to use the neededAuditDepth, otherwise it is just a glorious variable with no further scope (pun intended).

Thus, becoming –

The razor file is a simple and straight forward razor file that renders the HTML markup of the page with appropriate controls as needed for that specific view.

Content here is standard HTML which can have its own code.

In the world where we had to do this in UserControl or using some other partial layout strategy we would have to use an outline like this –

This kind of code also breaks the promise that typically modern web application put on the table – “View does not contain business logic”. Here if you see the view has business logic.

This component also helps us implement the design pattern of contextual experience for the same feature and thus making the view agnostic to the feature.

By using the DynamicContent we retain the promise and make code more