Execute arbitrary JavaScript to set Layout component property value from Page

Hey folks,

I've just made an example showing how to execute arbitrary JavaScript to set Layout component value from Page and I've decided to post it here in case someone need this as well.

The challenge: Set MainLayout Label text runtime from Page/Component event. For this demo I'm using the label showing application name in the top left corner.

The solution: Open the MainLayout, select the Label component and set id attribute:

Add a DataGrid component bound to Orders to MainPage and add Execute C# action to RowSelect event with the following code await JSRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""MyLabel"").innerHTML = ""{event.UserName}"""):

Run the application and select DataGrid rows to change MainLayout Label text:

3 Likes