A challenge to convert a WebForms application to Blazor is to resolve all PostBack elements of the WebForms using concepts of Single Page Applications.
The answer to this question is simple: Blazor Components.
After I had written the article Blazor: Is It Javascript’s Beginning of the End?, I received lots of complaints from the Javascript lovers (like me). Because I use the word WebForms in this article, it won't be a surprise if some Haters show up.
It is essential to say that if you are a new developer or have never seen ASP.NET CORE before, I suggest you read my article .NET CORE for .NET Developers first.

The Blazor

Blazor is a new Microsoft technology to create frontend using ASP.NET CORE and C#, instead of Javascript.
There are two types of Blazor applications: One that runs at the server-side called Blazor Server App, and it uses SignalR to communicate between client/server.
Blazor - More Than A Deluxe WebForms
The other type of Blazor application is Blazor Web Assembly, still in a preview version.
In that case, the application runs at the web browser, even C# DLLs.
Blazor - More Than A Deluxe WebForms
Blazor is considered Microsoft’s SPA (Single Page Application) that could fight and replace popular technologies like Angular, Vue, React, and other Javascript frameworks.

Blazor: MMVV – Model View View Model

The concepts and design patterns of MVVM are not actual.
I have been using MVVM since Silverlight, KnockoutIS, AngularJS until now in Angular, Vue, and also Xamarin Forms.
The MVVM listens to all changes that are made in a View or a Model (Javascript/C#).
If any state changes, all references in a View or a Model are updated.
Blazor - More Than A Deluxe WebForms
If you have been developing in Angular/AngularJs, imagine the variable above @currentCount like this {{ @currentCount }}.

Blazor: POC – Proof of Concept

Even Blazor uses ASP.NET CORE and Razor Views. It is reasonable to do a POC to learn more about the workflow/behavior of some things like passing parameters between components.
In the WebForms application that I am using to convert to Blazor of course there are lots of TextBox and DropDownList components.
I have decided to create all these components in Blazor with the same names, properties, and events as WebForms.
So, I created some fields and features,
Blazor - More Than A Deluxe WebForms
  • When filling the Password MaxLength TextBox field, it will limit (in characters) the Password Textbox field.
  • When leaving blank the Token TextBox field, it will be marked in a red line an invalid one.
  • When clicking the Select Three button, it will select the item 3 on the ItemsList DropDownList field.
  • When clicking the Disable Week Day button, it will disable the Week Days DropDownList field.
  • When clicking the Include Options button, it will include one more option on the Dynamic Options DropDownList field.
  • The Labels at the bottom will be updated when any field changed.
The usability of these components in the Razor Views are,
TextBox String
  1. <div class="col-md-4 mb-3">
  2. <label>User:</label>
  3. <TextBox Id="tbxUser"
  4. CssClass="teste"
  5. @bind-Text="@user"></TextBox>
  6. </div>
TextBox Number
  1. <div class="col-md-4 mb-3">
  2. <label>Password MaxLength:</label>
  3. <TextBox Id="tbxMax"
  4. @bind-Text="@max"
  5. TextMode="TextBoxMode.Number"></TextBox>
  6. </div>
TextBox Password
  1. <div class="col-md-4 mb-3">
  2. <label>Password:</label>
  3. <TextBox Id="tbxPassword"
  4. @bind-Text="@password"
  5. MaxLength="@max"
  6. TextMode="TextBoxMode.Password"></TextBox>
  7. </div>
TextBox Multiline
  1. <div class="col-md-12 mb-3">
  2. <label>Token:</label>
  3. <TextBox Id="tbxToken"
  4. @bind-Text="@token"
  5. TextMode="TextBoxMode.MultiLine"
  6. Required="true"
  7. Rows="5"></TextBox>
  8. </div>
In the case of the DropDownList, there are two ways to use it: one is declaring all DropDownListItem as options. A second way is to provide a DataSource.
  1. <div class="row">
  2. <div class="col-md-4 mb-3">
  3. <label>Week Days:</label>
  4. <DropDownList Id="ddlWeekDays"
  5. @bind-SelectedValue="@weekDay">
  6. <DropDownListItem Text="Sunday" Value="1"></DropDownListItem>
  7. <DropDownListItem Text="Monday"></DropDownListItem>
  8. <DropDownListItem Text="Tusday" Selected="true"></DropDownListItem>
  9. <DropDownListItem Text="Wednesday"></DropDownListItem>
  10. <DropDownListItem Text="Thursday"></DropDownListItem>
  11. <DropDownListItem Text="Friday"></DropDownListItem>
  12. <DropDownListItem Text="Saturday"></DropDownListItem>
  13. </DropDownList>
  14. </div>
  15. </div>
  17. <div class="row">
  18. <div class="col-md-4 mb-3">
  19. <label>Items List:</label>
  20. <DropDownList Id="ddlItemsList"
  21. DataSource="@items"
  22. @bind-SelectedValue="@item"></DropDownList>
  23. </div>
  24. </div>

Blazor: The Components – Model

One of the things that are also similar between Blazor and WebForms is the “code-behind”.
It is not mandatory but is similar.
I created the following architecture and heritance for the components,
Blazor - More Than A Deluxe WebForms
The TextBox.razor file is for HTML like INPUT tags, and this is a class that has a parent one called TextBoxComponent, which contains properties for text fields.
  1. public class TextBoxComponent : ControlComponent
  2. {
  3. public TextBoxComponent()
  4. {
  5. MaxLength = "500";
  6. }
  8. [Parameter]
  9. public bool Required { get; set; }
  11. [Parameter]
  12. public string Text { get; set; }
  14. [Parameter]
  15. public string MaxLength { get; set; }
  17. [Parameter]
  18. public string Rows { get; set; }
  20. [Parameter]
  21. public TextBoxMode TextMode { get; set; }
  23. [Parameter]
  24. public EventCallback<string> TextChanged { get; set; }
  26. [Parameter]
  27. public EventCallback<string> MaxLengthChanged { get; set; }
  29. [Parameter]
  30. public EventCallback<string> TextValueChanged { get; set; }
  32. protected async Task OnChangeAsync(
  33. ChangeEventArgs e)
  34. {
  35. Text = e.Value as string;
  36. IsValid = !(Required && string.IsNullOrEmpty(Text));
  38. await TextChanged.InvokeAsync(Text);
  39. await TextValueChanged.InvokeAsync(Text);
  40. }
  41. }
The Parameter attribute in component property means that it will be available to pass a value in other components like the sample below,
  1. <TextBox Id="tbxUser" CssClass="teste" @bind-Text="@user"></TextBox>
The TextBoxComponent has a parent called ControlCompont, which contains properties for all types of fields like Id and CssClass,
  1. public class ControlComponent : ComponentBase
  2. {
  3. public ControlComponent()
  4. {
  5. IsValid = true;
  6. }
  8. [Parameter]
  9. public string Id { get; set; }
  11. [Parameter]
  12. public string CssClass { get; set; }
  14. [Parameter]
  15. public bool Disabled { get; set; }
  17. [Parameter]
  18. public bool IsValid { get; set; }
  20. public string ValidCssClass => IsValid ? "" : "is-invalid";
  22. public string AllCssClass => $"form-control {CssClass ?? ""} {ValidCssClass}";
  24. public void ToggleDisabled()
  25. {
  26. Disabled = !Disabled;
  27. }
  28. }

Blazor: The Components – View

The TextBox component view is pretty simple,
  1. @inherits TextBoxComponent
  3. @if (TextMode == TextBoxMode.MultiLine)
  4. {
  5. <textarea id="@(Id ?? "tbx1")"
  6. class="@AllCssClass"
  7. maxlength="@MaxLength"
  8. rows="@Rows"
  9. disabled="@Disabled"
  10. required="@Required"
  11. @onchange="OnChangeAsync">@Text</textarea>
  12. }
  13. else
  14. {
  15. <input type="@TextMode.ToString().ToLower()"
  16. id="@(Id ?? "tbx1")"
  17. class="@AllCssClass"
  18. value="@Text"
  19. maxlength="@MaxLength"
  20. disabled="@Disabled"
  21. required="@Required"
  22. @onchange="OnChangeAsync" />
  23. }
As you can see above, all the HTML INPUT/TEXTAREA attributes use C# properties.
One attribute calls for our attention, I am talking about the @onchange attribute that contains a reference for an asynchronous C# method.
  1. protected async Task OnChangeAsync(
  2. ChangeEventArgs e)
  3. {
  4. Text = e.Value as string;
  5. IsValid = !(Required && string.IsNullOrEmpty(Text));
  7. await TextChanged.InvokeAsync(Text);
  8. await TextValueChanged.InvokeAsync(Text);
  9. }
When the input value changes, Blazor fires an event and calls the OnChangeAsync method.
When this happens, all references of Text are updated, even labels, other inputs, or a C# model.
This concept is called Two-Way-Binding. I mean that when you modify a property in a component, the same is updated outside.
That is possible because the TextChanged property called inside the OnChangeAsync method.
The rule to create that binding is: Create an EventCallback property, named with PropertyName + Changed, and put a Parameter attribute on it.
  1. [Parameter]
  2. public EventCallback<string> TextChanged { get; set; }
After that, call that property at any moment in your C# component.

Blazor: DropDownList and DropDownListItem

One of the differences between the TextBox and DropDownList component is the DataSource property that receives a list of items used in a Foreach statement.
  1. @inherits DropDownListComponent
  3. <select @onchange="OnChangeAsync"
  4. id="@Id"
  5. class="@AllCssClass"
  6. disabled="@Disabled">
  7. @foreach (var data in DataSource)
  8. {
  9. var value = data.Value ?? data.Text;
  10. <option value="@value" selected="@(value == SelectedValue)">@data.Text</option>
  11. }
  12. </select>
  14. <CascadingValue Value=this>
  15. @ChildContent
  16. </CascadingValue>
Another difference is that DropDownList can receive DropDownListItem components as child ones.
  1. <div class="row">
  2. <div class="col-md-4 mb-3">
  3. <label>Week Days:</label>
  4. <DropDownList Id="ddlWeekDays"
  5. @bind-SelectedValue="@weekDay">
  6. <DropDownListItem Text="Sunday" Value="1"></DropDownListItem>
  7. <DropDownListItem Text="Monday"></DropDownListItem>
  8. <DropDownListItem Text="Tusday" Selected="true"></DropDownListItem>
  9. <DropDownListItem Text="Wednesday"></DropDownListItem>
  10. <DropDownListItem Text="Thursday"></DropDownListItem>
  11. <DropDownListItem Text="Friday"></DropDownListItem>
  12. <DropDownListItem Text="Saturday"></DropDownListItem>
  13. </DropDownList>
  14. </div>
  15. </div>
ChildContent works like a @Body in a Razor View, so you must use it somewhere in your child component.
  1. [Parameter]
  2. public RenderFragment ChildContent { get; set; }
  1. <CascadingValue Value=this>
  2. @ChildContent
  3. </CascadingValue>
The DropDownListItem component has a reference of its parent DropDownList, and when it renders, it inserts a new option in the parent’s DataSource property.
  1. public class DropDownListItemComponent : ComponentBase
  2. {
  3. [Parameter]
  4. public string Text { get; set; }
  6. [Parameter]
  7. public string Value { get; set; }
  9. [Parameter]
  10. public bool Selected { get; set; }
  12. [CascadingParameter]
  13. public DropDownListComponent ParentDropDownList { get; set; }
  15. protected override void OnInitialized()
  16. {
  17. ParentDropDownList?.AddItem(this);
  19. base.OnInitialized();
  20. }
  21. }
  23. internal void AddItem(
  24. DropDownListItemComponent item)
  25. {
  26. DataSource.Add(new Models.Item
  27. {
  28. Text = item.Text,
  29. Value = item.Value ?? item.Text
  30. });
  32. if (item.Selected)
  33. {
  34. SelectedValue = item.Value ?? item.Text;
  35. SelectedValueChanged.InvokeAsync(SelectedValue).GetAwaiter();
  36. }
  37. }
You can download the full source code in my Github.

Blazor: Remarks

In a Blazor application,
The _Imports.razor file works like the Views/web.config in an MVC application.
The Startup.cs file contains all configuration to make Blazor and ASP.NET work.
  1. public void ConfigureServices(IServiceCollection services)
  2. {
  3. services.AddRazorPages();
  4. services.AddServerSideBlazor(); // here
  5. services.AddSingleton<WeatherForecastService>();
  6. }
  8. public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  9. {
  10. if (env.IsDevelopment())
  11. {
  12. app.UseDeveloperExceptionPage();
  13. }
  14. else
  15. {
  16. app.UseExceptionHandler("/Error");
  17. }
  19. app.UseStaticFiles();
  21. app.UseRouting();
  23. app.UseEndpoints(endpoints =>
  24. {
  25. endpoints.MapBlazorHub(); // here
  26. endpoints.MapFallbackToPage("/_Host"); // here
  27. });
  28. }
The Visual Studio nests Razor components and their classes to make it easy to maintain the source code.
Blazor - More Than A Deluxe WebForms
The Tag Helpers and Razor Views still work, because Blazor is an ASP.NET Core application.
At least, all Blazor magic only works with the Pages/_Host.cshtml file that calls the App.razor component, which references the blazor.server.js script file, responsible for the SignalR stuff.
As I said, this article is about Blazor Server, and it is more potent than I had imagined. I think it will become accessible, even more, when Microsoft launches the Blazor Web Assembly version.
And about you? Have you used Blazor before?
Thank you for reading it 🙂