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 –
|
@page “/”
<h1> Technology audit request </h1>
<aside> <p> Let us know what level of depth would you like to cover in the project’s technology audit? </p> <select> <option value=”@nameof(DefaultDepth)”>Pick the depth of coverage you want</option> <option value=”@nameof(EnterpriseArchitecture)”>Enterprise Architectural</option> <option value=”@nameof(ProductLineArchitecture)”>Product Line Architectural</option> <option value=”@nameof(ApplicationDesign)”>Technial design</option> <option value=”@nameof(ComponentDesign)”>Component design and use</option> </select> </aside>
|
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 –
|
<select @onchange=”OnAuditDepthCoverageChange”> … </select>
@code { Type neededAuditDepth = typeof(AlphaProduct.Prototype.Shared.DefaultDepth);
public void OnAuditDepthCoverageChange(ChangeEventArgs cea) { neededAuditDepth = Type.GetType($”AlphaProduct.Prototype.Shared.{cea.Value}”); } }
|
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).
|
<main> <DynamicComponent Type=”neededAuditDepth” /> </main>
|
Thus, becoming –
|
@page “/”
<h1> Technology audit request </h1>
<aside> <p> Let us know what level of depth would you like to cover in the project’s technology audit? </p> <select> … </select> </aside>
<main> <DynamicComponent Type=”neededAuditDepth” /> </main>
@code { Type neededAuditDepth = typeof(AlphaProduct.Prototype.Shared.DefaultDepth);
public void OnAuditDepthCoverageChange(ChangeEventArgs cea) { … } }
|
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.
|
<b> Product Line Architecture </b>
<p> Please provide us some head start details to initiate the assessment </p>
<form …> … </form>
|
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 –
|
@if (@model.neededAuditDepth = ”..”) { @Html.Partial(…) } else if (@model.neededAuditDepth = “..“) { @Html.Partial(…) } …
|
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
