How Blazor Framework get notifed when the property value gets changed

c# asp.net-core blazor
VibeeshanRC picture VibeeshanRC · Feb 22, 2018 · Viewed 8.3k times · Source

When we have a HTML code like below.

<h1>@Title</h1>

and C# like below

public string Title { get; set; }

Think I have executed a code like below

Title = "New title updated in the runtime";

Then we see that the view has chenged with the new value.

How the renderer knows that the property value has changes. Is there anything like INotifyProperyChange is implemented. How the HTML knows that this is the time to update the content.

I just want to know how the internals of the Blazor Framework are architectured.

Answer

Rainer picture Rainer · Mar 12, 2018

Blazor automatically checks for changes of bound properties when a user interaction happened (e.g. button click, text in an input changed). In that case, Blazor's JavaScript code triggers change detection in C# (=Webassembly). Therefore, you do not need to do anything if you want to refresh the UI after a user interaction.

However, there are cases in which you want to refresh the UI although no user interaction happened (e.g. timer). In that case, you have to call StateHasChanged. I have created a more detailed example on learn-blazor.com.

Related questions

Blazor onchange event with select dropdown

So I have been stuck trying to get a simple onchange to fire when a select dropdown value changes. Like so: <select class="form-control d-flex" onchange="(dostuff())"> @foreach (var template in templatestate.templates) { <option [email protected]&…

Read More
VS Code CSC : error CS1617: Invalid option '7.3' for /langversion

I downloaded VS 2017 15.7, .NET Core 2.1.2 and Blazor to try it out. It wasn't working in VS 2017 properly and thought I would try through the dotnet cli and VS Code. Instead I was met with the following error: CSC : error CS1617: …

Read More
Select box binding in blazor

I am trying to bind "CountryId" in the model to the value of a selected item of SelectList in blazor. All of the Country items come in a list like {CountryId, CountryName} object. I do the code like so: <…

Read More