Blazor FAQ - Components

SCSS, also known as Sassy CSS, is a CSS advancement that includes advanced features. It is more expressive, loads faster, uses fewer lines of code, and encourages proper rule nesting. It has all of the features of CSS and more, making it a good choice for developers to use. It is an SASS-specific file, similar to CSS, but with improved formatting.

Blazor considers each .razor file as a new component. The component class is usually written in the form of a Razor markup page. So, you can create a new component and reuse it across the application. In the following example, a Blazor component is created in the Components folder and used in the Index.razor page.

[BlazorComponent.razor]

<h1>@blazorHeader</h1>

    <div class="card card-body" style="width: 18rem;">
        <h5><b>@pageName</b></h5>
        <p>@pageDescription</p>
    </div>

    @code {
        private string blazorHeader = "Blazor App!";
        private string pageName = "Blazor Page";
        private string pageDescription = "Blazor component is created";
    }

[Index.razor]

@page "/"
@using BlazorApp1.Components

<BlazorComponent></BlazorComponent>

Please refer to this documentation for more information.

You can use data-annotation to apply the regular expression for limiting the characters and numbers in blazor app.

In the following code, allow the char and numbers in textbox component. The RegularExpression attribute validates that the property value matches a specified regular expression.

<EditForm Model="@model" OnValidSubmit="handleSubmit">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <InputText @bind-Value="@model.Name"></InputText>
    <ValidationMessage For="()=>model.Name"></ValidationMessage>
    <button type="submit">submit</button>
</EditForm>

@code {

    private Countries model = new Countries();

    public class Countries
    {
        [Required]
        [RegularExpression(@"^[a-zA-Z0-9 ]+$", ErrorMessage = "Special characters are not accepted.")]
        public string Name { get; set; }
    }

In Razor,  `@` symbol is used to transition from HTML to C#. To escape an ‘@‘ symbol in razor markup, use two ‘@’ symbols.

<div>@@FirstName</div>

Reference link: https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-3.1#razor-syntax

The RenderTreeBuilder class will let you create required content or component in dynamic manner at runtime. In the following code example, the Input TextBox Component has been created at runtime through button click.

<div id="component-container">
    @DynamicRender
</div>

<button @onclick="RenderComponent">Render TextBox</button>

@code {
    private RenderFragment DynamicRender { get; set; }

    private RenderFragment CreateComponent() => builder =>
    {
        builder.OpenComponent(0, typeof(InputText));
        builder.AddAttribute(1, "Placeholder", "Enter your text");
        builder.CloseComponent();
    };

    private void RenderComponent()
    {
        DynamicRender = CreateComponent();
    }
}

Override the ShouldRender method  to suppress UI rendering. If the implementation returns true, the UI is refreshed. Initial rendering cannot be prevented using this method.

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    private int currentCount = 0;
    private bool shouldRender = true;
 
    private void IncrementCount()
    {
        shouldRender = false;
        currentCount++;
    }
 
    protected override bool ShouldRender()
    {
        return shouldRender;
    }
}

More information about suppressing UI rendering can be found here.

Components should be disposed properly to avoid memory leak and allow proper garbage collection.  Managed resources used by the application will be disposed by the Blazor framework itself.

If a component implements IDisposable, the Dispose method will be called when the component is removed from the UI. You can use Dispose method to release unmanaged resources, unhook events, dispose DotNetObjectReference instances to avoid memory leak.

Refer to the following code sample.

@implements IDisposable
@inject IJSRuntime jsRuntime
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code { 
 
    DotNetObjectReference<HelloClass> dotNetObject { get; set; }
 
    protected override void OnInitialized()
    {
        dotNetObject = DotNetObjectReference.Create<HelloClass>(new HelloClass());
    }
 
    async Task IncrementCount()
    {
        await jsRuntime.InvokeVoidAsync("MyJavaScriptFunction", new object[] { dotNetObject });
    }
 
    void IDisposable.Dispose()
    {
        dotNetObject?.Dispose();
    }
}
 
@code{
 
    public class HelloClass
    {
        [JSInvokable]
        public void CustomMethod() { }
    }
}

More information about component disposal can be found here.

String values are normally converted in DOM text notes. To render encode string values as raw HTML you need to wrap the string value in a MarkupString. This will encode the given string value HTML/SVG and place it in the given location.

Refer to the following code sample.

@((MarkupString)RawString)
 
@code {
    public string RawString = "<span style='color:red'>Blazor is awesome</span>";
}

You can get the event using IDisposable interface to invoke the Dispose event on each page navigation or on closing a page. Find the code example for your reference.

@page "/"

@implements IDisposable;

<h1>Hello, world!</h1>

Welcome to your new app.

@code {

    public void Dispose()
    {

    }
}

Blazor applications are based on components. A component in Blazor is an element of UI, such as a page, input, and dialogs. The component class is usually written in the form of a Razor markup page with a .razor file extension. Components in Blazor are formally referred to as Razor components.

You can render the component at runtime using RenderFragment. The RenderFragment class allows you create the required content or component in a dynamic manner at runtime. In the following code example, the Input text Component is created at runtime on button click.

<div id="component-container">
    @DynamicRender
</div>

<button @onclick="RenderComponent">Dynamic Component</button>

@code {

    private RenderFragment DynamicRender { get; set; }

    private RenderFragment CreateComponent() => builder =>
    {
        builder.OpenComponent(0, typeof(TextBox));
        builder.AddAttribute(1, "Title", "Enter your text");
        builder.CloseComponent();
    };
}

[TextBox.razor]

<input placeholder="@Title" />

@code {

    [Parameter]
    public string Title { get; set; }
}

You can create custom components in Blazor and reuse them across the application. You can also create a razor component in a shared or custom folder, and define it. Then, the custom component like HTML tag (FileName) can be used in the application.

[HeaderComponent.razor]

@using System.Globalization

<h1 style="font-weight:@fontweight !important">@_headingText</h1>

<form>
<div>
     <input type="checkbox" id="fontweight"
               @bind="bold" />
      <label class="form-check-label"
               for="italicsCheck">Use Bold</label>
</div>

<button type="button" class="btn btn-primary" @onclick="UpdateHeading">
        Update Font</button>
</form>

@code {
    private static TextInfo _tinfo = CultureInfo.CurrentCulture.TextInfo;
    private string _headingText =
        _tinfo.ToTitleCase("welcome to blazor!");
    private string _headingFontStyle = "normal";
    private bool bold = false;
    private int fontweight = 500;
    public void UpdateHeading()
    {
        //weight = 900;
        fontweight = bold ? 900 : 500;
    }
}

 //parent component

[index.razor]

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<HeaderComponent />

In the above example, the header component is used in the index page. Similarly, the component can be shared across the application as a HTML tag to improve code reusability.

The @key directive is important when creating components dynamically by iterating list/IEnumerable. Adding the @key will ensure proper change detection and UI update in the collection of components.

Reference link: https://blazor-university.com/components/render-trees/optimising-using-key/

To create a reference for dynamically generated components in Blazor, use the dictionary to create the reference for dynamically created elements at runtime.

[index.razor]

@page "/"

@foreach (var id in identifiers)
{
    <button @ref="myComponents[id]" @onclick="onclick">@id</button>
}

@code {
    private List<string> identifiers = new List<string> { "Button1", "Button2", "Button3" };
    private Dictionary<string, ElementReference> myComponents = new Dictionary<string, ElementReference>();
    private void onclick(MouseEventArgs args)
    {
        var d = myComponents;
        var a = args;
    }
}

To disable a button in Blazor after it is clicked, set the disabled property to true for the button element by binding the property. In the sample, the disabled property of a button element is set to true on button click.

<button class="btn btn-primary" disabled=@IsTaskRunning @onclick="Clicked" > @ButtonName</button>

@code {

    bool IsTaskRunning = false;
    string ButtonName = "Click Me";
    async void Clicked()
    {
        IsTaskRunning = true;
        ButtonName = "Disabled";
        await OnButtonClick();

        //IsTaskRunning = false; use this to enable the button after the button click function executed
        StateHasChanged();
    }

    Task OnButtonClick()
    {
        //here user can perform buton click function
        return Task.Delay(6000);
    }

}

We can create elements dynamically in server-side Blazor applications by following this example.

@page "/render-fragment"
 
<button type="button" @onclick="@RenderComponent">
    Trigger rendering
</button>
 
@DynamicFragment
 
 
@code {
    private string dynamicContent = "This is a long text...";
    private RenderFragment DynamicFragment;
 
    private RenderFragment CreateComponent() => builder =>
    {
        dynamicContent = dynamicContent.Replace("long", "long long");
 
        builder.OpenElement(1, "p");
        builder.AddContent(2, dynamicContent);
        builder.CloseElement();
    };
 
    private void RenderComponent()
    {
        DynamicFragment = CreateComponent();
    }
}

Reference link

https://learn-blazor.com/pages/dynamic-content/

When creating a cascading value, specify the name attribute in the CascadingValue component. Then specify the name in the child component.

Parent component

@page "/cascading"
 
<CascadingValue Value="@Id" Name="EmpId">
	<CascadingValue Value="@Name" Name="EmpName">
    	<CascadingChild></CascadingChild>
	</CascadingValue>
</CascadingValue>
 
@code{
	int Id = 1;
	string Name = "Test";
}

Child component

<p>Employee Id:@EmployeeId </p>
<p>Employee Name:@EmployeeName </p>
 
@code{
	[CascadingParameter(Name = "EmpId")]
	private int EmployeeId { get; set; }
	[CascadingParameter(Name = "EmpName")]
	private string EmployeeName { get; set; }
}

Reference link

https://chrissainty.com/understanding-cascading-values-and-cascading-parameters/

When a cascading value is changed, the new value will be sent down the component tree and all components that use it will be updated. Therefore, Blazor has to keep a watch on the value continuously. This takes up resources and, in a large application, could end up causing performance issues.

If the cascading value will never change, we can stop keeping watch continuously. There is a IsFixed parameter in the CascadingValue component. It is set to false by default but if set it to true, Blazor will not monitor it for changes.

<CascadingValue Value="@Id" Name="EmpId" IsFixed="true">
	<CascadingValue Value="@Name" Name="EmpName" IsFixed="true">
    	<CascadingChild OnNameChange="@ChangeName"></CascadingChild>
    	<CascadingChild1></CascadingChild1>
	</CascadingValue>
</CascadingValue>

Reference link: https://chrissainty.com/understanding-cascading-values-and-cascading-parameters/

The cascading values can be updated using an event, as in the following example.

Parent component

@page "/cascading"
 
<CascadingValue Value="@Id" Name="EmpId">
	<CascadingValue Value="@Name" Name="EmpName">
    	<CascadingChild OnNameChange="@ChangeName"></CascadingChild>
    	<CascadingChild1></CascadingChild1>
	</CascadingValue>
</CascadingValue>
 
@code {
	int Id = 1;
	string Name = "Test";
	private void ChangeName(string newName)
	{
    	Name = newName;
    	StateHasChanged();
	}
}

CascadingChild.razor

<p>Employee Id:@EmployeeId </p>
<p>Employee Name:@EmployeeName </p>
 
<button @onclick="@ChangeName">Change Name</button>
 
@code {
	[CascadingParameter(Name = "EmpId")]
	private int EmployeeId { get; set; }
	[CascadingParameter(Name = "EmpName")]
	private string EmployeeName { get; set; }
 
	[Parameter] Action<string> OnNameChange { get; set; }
 
	private void ChangeName()
	{
    	OnNameChange?.Invoke("Test2");
	}
}

CascadingChild1.razor

<p>Employee Id:@EmployeeId </p>
<p>Employee Name:@EmployeeName </p>
 
@code {
[CascadingParameter(Name = "EmpId")]
private int EmployeeId { get; set; }
[CascadingParameter(Name = "EmpName")]
private string EmployeeName { get; set; }
}

Reference link

https://chrissainty.com/understanding-cascading-values-and-cascading-parameters/

Blazor will look at the type of the EmployeeId and EmployeeName parameters and try to find cascading values that match. In this case, EmployeeId will match Id and EmployeeName will match Name.

Parent component

@page "/cascading"
 
<CascadingValue Value="@Id">
	<CascadingValue Value="@Name">
    	<CascadingChild></CascadingChild>
	</CascadingValue>
</CascadingValue>
 
@code {
	int Id = 1;
	string Name = "Test";
}

Child component

<p>Employee Id:@EmployeeId </p>
<p>Employee Name:@EmployeeName </p>
 
@code {
	[CascadingParameter]
	private int EmployeeId { get; set; }
	[CascadingParameter]
	private string EmployeeName { get; set; }
}

Cascading values and parameters are used to pass a value from a component to all its descendants without having to use traditional component parameters. Blazor comes with a special component called CascadingValue. This component allows whatever value is passed to it to be cascaded down its component tree to all of its descendants. The descendant components can then choose to collect the value by declaring a property of the same type, decorated with the [CascadingParameter] attribute.

Parent component

@page "/cascading"
 
<CascadingValue Value="@Name">
	<CascadingChild></CascadingChild>
</CascadingValue>
@code {
	string Name = "Steve";
}

Child component

<p>Employee Name:@Name </p>
@code {
	[CascadingParameter]
	private string Name { get; set; }
 }

Reference link:https://chrissainty.com/understanding-cascading-values-and-cascading-parameters/

The better solution is to invoke the method in the set value of the parameter.

@code {

    string _myString;
    [Parameter]
    public string MyString
    {
        get {return _myString; }
        set {
            _myString = value;
            this.ValueChange();
        }

    }

    private void ValueChange()
    {
        Console.WriteLine("Parameter value has changed");
    }
}

You can also override the OnParameterSet or OnParameterSetAsync lifecycle methods. Those methods are triggered every time any parameter value changes.

@code
{
    [Parameter]
    protected string MyString {get;set;}

    protected override void OnParametersSet()
    {
        this.ValueChange();
    }
    private void ValueChange()
    {
        Console.WriteLine("Parameter value has changed");
    }
}

Instantiating a custom component at compile time is in the development phase in Blazor.

You can track the thread Allow custom component instantiation for more information.

Component references are used to invoke methods from underlying components. Use the ref attribute for a component and define it filed with the same name and same type of component.

 @page "/"
  
 <Counter IncrementValue="10" @ref="counter"></Counter>
  
 @code {
  
     private Counter counter;    
  
 } 

While the Counter component is rendered, the field counter is populated along with the component instance.

For more information, refer to the link capture-references-to-components.

This is a known issue with Mono Runtime when Blazor runs on client.

Issue tracker: WebAssembly: Missing Timezone implementation

As a workaround, you can use the library Toolbelt.Blazor.TimeZoneKit.

Generally, we are using lambda expressions to create DOM elements dynamically like in the following code snippet.

<div class="buttons">
     @for (int i = 0; i < 5; i++)
     {
         <button type="button" class="btn btn-primary" onclick="@((e) => ButtonClicked(i))">Button @i</button>
     }
 </div> 

The lambda expressions access variables instead of their values. The button click is triggered with the number 5.

You have to include local variables while rendering the button element to properly get the index value of the clicked button element.

<div class="buttons">
     @for (int i = 0; i < 5; i++)
     {
         var index = i;
         <button type="button" class="btn btn-primary" onclick="@((e) => ButtonClicked(index))">Button @i</button>
     }
 </div>

 @code {
  
     private void ButtonClicked(int index)
     {
         Console.WriteLine("Button clicked with index:" + index);
     }
 } 

There are three techniques available for communication among components:

• EventCallbacks
• Cascading values
• State container
• By passing parameters  (Parameter Routing)

Read more about the communication among components in this blog.

The Web Compiler Visual Studio extension is used to compile the SASS files into CSS without having to install NPM or GULP.

Go through the blog Get Some Sass Into Your Blazor App to see how to configure and style Blazor components using SASS.

The RenderFragment is used to create a component dynamically.

 @page "/"
  
 @CreateDynamicComponent();
 @code {
     RenderFragment CreateDynamicComponent() => builder =>
     {
         builder.OpenComponent(0, typeof(SurveyPrompt));
         builder.AddAttribute(1, "Title", "Some title");
         builder.CloseComponent();
     };
 }