Page 50 - MSDN Magazine, March 2019

Cutting EdgE DINO ESPOSITO Hierarchical Blazor Components
As the latest framework to join the single-page application (SPA) party, Blazor had the opportunity to build on the best character- istics of other frameworks, such as Angular and React. While the core concept behind Blazor is to leverage C# and Razor to build SPA applications, one aspect clearly inspired by other frameworks is the use of components.
Blazor components are written using the Razor language, in much the same way that MVC views are built, and this is where things get really interesting for developers. In ASP.NET Core you can reach unprecedented levels of expressivity through new language artifacts called tag helpers. A tag helper is a C# class instructed to parse a given markup tree to turn it into valid HTML5. All of the branches you may face while creating a complex, made-to-measure chunk of HTML are handled in code, and all that developers write in text files is plain markup. With tag helpers the amount of code snippets decreases significantly. Tag helpers are great, but still pres- ent some programming wrinkles that Blazor components brilliantly iron out. In this article, I’ll build a new Blazor component that presents a modal dialog box through the services of the Bootstrap 4 framework. In doing so, I’ll deal with Blazor-templated compo- nents and cascading parameters.
Figure 1 The Bootstrap Markup for Modal Dialogs
Wrinkles of Tag Helpers
In my book, “Programming ASP.NET Core” (Microsoft Press, 2018), I present a sample tag helper that does nearly the same job discussed earlier. It turns some ad hoc non-HTML markup into Bootstrap-specific markup for modal dialog boxes (see bit.ly/2RxmWJS).
Any transformation between the input markup and the desired output is performed via C# code. A tag helper, in fact, is a plain C# class that inherits from the base class TagHelper and overrides a single method. The problem is that the transformation and mark- up composition must be expressed in code. While this adds a lot of flexibility, any change also requires a compile step. In particular, you need to use C# code to describe a DIV tree with all of its sets of attributes and child elements.
In Blazor, things come much easier as you don’t need to resort to tag helpers in order to create a friendlier markup syntax for sophisticated elements, such as a Bootstrap modal dialog box. Let’s see how to create a modal component in Blazor.
Modal Dialog Boxes
The idea is to set up a Blazor reusable component that wraps the Bootstrap modal dialog component. Figure 1 presents the famil- iar HTML5 markup tree required for Bootstrap (both 3.x and 4.x versions) to work.
No Web developer is happy to reiterate that chunk of markup over and over again across multiple views and pages. Most of the markup is pure layout and the only variable information is the text to display and perhaps some style and buttons. Here’s a more expressive markup that’s easier to remember:
<Modal>
<Toggle class="btn"> Open </Toggle> <Content>
<HeaderTemplate> ... </HeaderTemplate> <BodyTemplate> ... </BodyTemplate> <FooterTemplate> ... </FooterTemplate>
</Content> </Modal>
The constituent elements of a modal component are imme- diately visible in the more expressive markup code. The markup includes a wrapper Modal element with two child subtrees: one for the toggle button and one for the actual content.
According to the Bootstrap syntax of modals, any dialog needs a trigger to be displayed. Typically, the trigger is a button element decorated with a pair of data-toggle and data-target attributes. The modal, however, can also be triggered via JavaScript. The Toggle sub-component just serves as the container for the trigger markup. The Content sub-component, instead, wraps the entire content of the dialog and is split in three segments: header, body and footer.
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal"> Open modal
</button>
<div class="modal">
<div class="modal-dialog">
<div class="modal-content"> <div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span> </button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p> </div>
<div class="modal-footer"> <button type="button"
class="btn btn-secondary"
data-dismiss="modal">Close</button> </div>
</div> </div>
</div>
Code download available at bit.ly/2FdGZat.
44 msdn magazine