We Keep Coding

How can I save a Blazor Component instance in a variable and render it in my .cshtml

Considering I have a class called Tab.
public class Tab
{
public Guid Id { get; }
public bool IsVisible { get; set; }
protected Tab()
{
Id = Guid.NewGuid();
}
}
I want to strictly couple these tabs to a Blazor Component instance and render those instances by iterating over the tabs. I want to have control over when a Component is created and when it is destroyed again.
I want to do this because that way I can persist the state for each component.
Here is the problem with the easy approach. Considering something like this:
#code {
public void CreateNewTabAndRemoveOldTab()
{
Tabs.RemoveAt(0);
Tabs.Add(new Tab());
}
}
foreach (var tab in Tabs)
{
<MyTabComponent/>
}
The newly created tab will simply take over the state of the removed tab. OnInitialized will not be called.
I have looked into RenderFragment, but it does not look like its working property. The problem is that the Blazor Framework will still decide when a new component is created (thus calling OnInitialized) or when existing instance are used.

If I read this correctly, Tab is a class, not a component. You need to decouple your list of Tabs from the component that renders them. Your list of tabs lives in a service, the scope depends on what you're doing with them. Your Tab Component displays the currently selected Tab in the list. If you show a little more of your logic I can probably show you a relevant working example.

Check this
#ref it's reference to your component it's added to list of components.
#implements IDisposable
#foreach (var tab in tabs)
{
<MyTabComponent #ref=#TabRef Tab=#tab />
}
#code {
List<Tab> tabs = new List<Tab>();
List<MyTabComponent> tabsComp = new List<MyTabComponent>();
MyTabComponent TabRef {
set { tabsComp.Add(value); }
}
public void CreateNewTabAndRemoveOldTab()
{
tabs.RemoveAt(0);
tabs.Add(new Tab());
}
public void Dispose()
{
}
}

MyTabs.razor
<CascadingValue Value="#this" IsFixed="true">
foreach (var tab in Tabs)
{
<MyTabComponent/>
}
</CascadingValue>
#code{
private List<MyTabComponent> Tabs;
public void Register(MyTabComponent tab)
{
this.Tabs.Add(tab);
}
public void UnRegister(MyTabComponent tab)
{
this.Tabs.Remove(tab);
}
}
MyTabComponent.razor
#implements IDisposable
<div></div>
#code{
[CascadingParameter]
protected MyTabs Context { get; set; }
protected override void OnInitialized()
{
Context?.Register(this);
// implement your logic here
}
public void Dispose()
{
Context?.UnRegister(this);
// implement your logic here
}
}

Render Blazor child component with parameters

I'm new to Blazor and I'm currently working on a Blazor Webassembly .net 5.0 application.
I try to figure out the correct way to
render a child component
from a parent component
on button click (form submit)
pass parameters from the parent component to => the child component
My current solution seems to work, but unfortunately it ends in an infinite rendering loop: I use the OnParametersSetAsync method in the child component to handle the data loading.
Side note: I use Telerik Blazor components, but it should have no impact.
My parent component looks like this:
View (parent)
// I want to submit a form to set a bool = true, and then to rend the child component - is that ok?
<EditForm OnValidSubmit="#(async () => await StartEverything())">
<label for="OrderNumber">OrderNumber: </label>
<TelerikTextBox #bind-Value="OrderNumber" Id="OrderNumber" />
<TelerikButton ButtonType="#ButtonType.Submit">Start Everything</TelerikButton>
</EditForm>
#if (ShowChild)
{
<MyChildComponent OrderNumber="OrderNumber"/>
}
else
{
<div>Please enter an order number.</div>
}
Code Behind (parent)
public class MyParentComponent : ComponentBase {
protected int OrderNumber { get; set; }
protected bool ShowChild { get; set; }
protected async Task StartEverything()
{
if (OrderNumber > 0)
{
await Task.FromResult(ShowChild = true);
}
}
}
My child component looks like this:
View (child)
#if (Customer != null)
{
<p>#Customer.CustomerName</p>
<p>#Customer.AgencyName</p>
}
Code Behind (child)
public class MyChildComponent : ComponentBase {
// I need this Parameter sent from my parent component
[Parameter]
public int OrderNumber { get; set; }
protected CustomerViewModel Customer { get; set; }
protected override async Task OnParametersSetAsync()
{
var parameterForQuery = OrderNumber; // this should hold the value sent from the parent component
// Load Customer ViewModel Data here - is this the correct event? What is the best approach?
}
}
Item ViewModel
public class CustomerViewModel
{
public string CustomerName { get; set; }
public string AgencyName { get; set; }
}
Do you know how to correctly render a Child Component within a Parent Component and pass parameters from the Parent Component to the child component - then render the child component ONLY ON BUTTON CLICK (form submit, no infinite render loop)?
Do you know how to solve this problem?

I recommend going through https://blazor-university.com. It's the site that kind of got me kick-started when I first started with Blazor.
In regard to your question, I recommend the following:
https://blazor-university.com/components/component-lifecycles/
In particular, the following statement should prove useful in your case (from that link):
OnInitialized / OnInitializedAsync
This method is only executed once when the component is first created.
If the parent changes the component’s parameters at a later time, this
method is skipped.
It seems likely that simply changing which method you override will solve your problem, since OnParametersSetAsync behaves as you've described, and 'OnInitializedAsync' behaves as you want. :D

How to pass value from Child component (RenderFragment) to Parent page in C# Blazor?

I have a Blazor project that loads DLL that contain razor components. To render these dynamic components at client-side, I use render tree builder to create a RenderFragment from dynamic component and place it on the page to show the component. However, I can't find a way to bind a value while creating the render tree. Normally, I can pass data using the example below of parent and child component, but not sure how to do it when converting dynamic components to RenderFragment.
Parent component
#page "/ParentComponent"
<h1>Parent Component</h1>
<ChildComponent #bind-Password="_password" />
#code {
private string _password;
}
Child component
<h1>Child Component</h1>
Password:
<input #oninput="OnPasswordChanged"
required
type="#(_showPassword ? "text" : "password")"
value="#Password" />
<button class="btn btn-primary" #onclick="ToggleShowPassword">
Show password
</button>
#code {
private bool _showPassword;
[Parameter]
public string Password { get; set; }
[Parameter]
public EventCallback<string> PasswordChanged { get; set; }
private Task OnPasswordChanged(ChangeEventArgs e)
{
Password = e.Value.ToString();
return PasswordChanged.InvokeAsync(Password);
}
private void ToggleShowPassword()
{
_showPassword = !_showPassword;
}
}
Dynamic Component to RenderFragment
The code below shows how I am able to show the component on the page by converting it to RenderFragment. Do you know how I can bind a variable at the render tree builder, to pass data from dynamic component to the parent page?
Note: This Dynamic Component #dynamicComponent is same as the Child component above and I want the password data from it.
#page "/{ComponentName}"
#inject IComponentService ComponentService
#if (render)
{
#dynamicComponent()
#_password;
}
#code{
private string _password;
[Parameter]
public string ComponentName { get; set; }
bool render = false;
protected override void OnInitialized()
{
render = true;
base.OnInitialized();
}
RenderFragment dynamicComponent() => builder =>
{
RazorComponentModel component = ComponentService.GetComponentByPage(ComponentName);
builder.OpenComponent(0, component.Component);
for (int i = 0; i < component.Parameters.Count; i++)
{
var attribute = component.Parameters.ElementAt(i);
builder.AddAttribute(i + 1, attribute.Key, attribute.Value);
}
builder.CloseComponent();
};
}

Let us first see if I understood you right... You want to create a sort of component renderer, which gets a component's name as a parameter, and by means of the IComponentService you gets the component's Type, and then render it. I also guess that the component's Type may be Type Child, and you want to know how to render it in the Index page, and gets the password entered in the Child component, right ?
The following code describes how to do that, but of course I cannot use the IComponentService service to discover the type of the component, but instead assume that the type is Child.
Copy and run the code snippet. Test it... It should work...
#page "/{ComponentName?}"
#using Microsoft.AspNetCore.Components.CompilerServices;
#if (render)
{
#dynamicComponent
}
<p>Your password: #_password</p>
#code{
private string _password;
[Parameter]
public string ComponentName { get; set; }
bool render = false;
protected override void OnInitialized()
{
render = true;
base.OnInitialized();
}
RenderFragment dynamicComponent => builder =>
{
builder.OpenComponent(0, typeof(Child));
builder.AddAttribute(1, "Password", _password);
builder.AddAttribute(2, "PasswordChanged",
EventCallback.Factory.Create<string>(this,
RuntimeHelpers.CreateInferredEventCallback(this, __value => _password = __value, _password)));
builder.CloseComponent();
};
}
Note: You should not modify the values of the parameter properties in your Child component. Parameter properties in Blazor are auto properties, meaning that you can access their values but you must not change them.
Also, you shouldn't create sequence number by a loop. Sequence numbers should be hard-coded. Googlize this subject discussed in an article by Steve Anderson.

Is there an easy way to signal changes to data happening in child component?

Let's say I have a collection of data in my page loaded via OnInitializedAsync(). The data is shown graphically in a table but later on also in more detail in another table further down on the page.
Since the rows in the detailed table has a lot of controls and logic I decided to make a component for the row e.g. <RowData Data="#rowdata" /> and bound each row data.
The problem is that if the data gets changed in my child controller (RowData) it won't reflect in my first table in the "parent" component where the same data is also listed.
Is there an easy way to signal change or should I avoid making child components?
I have sovled it by making an EventCallback in my child component and updating via callback in my parent component. But I have the feeling I'm missing something.

The following sample shows how to perform two-way data-binding between a parent
component and its child component. In each of these two component is a text box controls. When you type text in the parent component's text box, the text in the child component's text box changes to reflect the changes made in the parent,
and vice versa...
ChildComponent.razor
<div style="border:solid 1px red">
<h2>Child Component</h2>
<input type="text" #bind="Text" #bind:event="oninput" />
</div>
#code {
private string text { get; set; }
[Parameter]
public string Text
{
get { return text; }
set
{
if (text != value) {
text = value;
if (TextChanged.HasDelegate)
{
TextChanged.InvokeAsync(value);
}
}
}
}
[Parameter]
public EventCallback<string> TextChanged { get; set; }
}
ParentComponent.razor
#page "/ParentComponent"
<h1>Parent Component</h1>
<input type="text" #bind="Text" #bind:event="oninput" />
<p></p>
<ChildComponent #bind-Text="Text" />
#code {
[Parameter]
public string Text { get; set; } = "Hello Blazor";
}
I have sovled it by making an EventHandler in my child component and updating via callback. But I have the feeling I'm missing something
What you've been missing is the existence of the EventCallback 'delegate' used in this sample to call the parent component and pass it the value entered in the child component. This is how we define the 'delegate'
[Parameter]
public EventCallback<string> TextChanged { get; set; }
And this is how we invoke it, when the value of the Text property changes:
TextChanged.InvokeAsync(value);
What delegate did you use ? Note that the EventCallback's target is not the child component, but the parent component...
Good luck... If something is not clear, don't hesitate to ask...

If you have a root component with N levels of nested components (children within children ad-nauseam) then you can use a cascading value. Try something like this
public class MyState
{
public List<MyObject> Objects { get; set; }
public Action OnModified { get; }
public MyState(List<MyObject> objects, Action onModified)
{
Objects = objects;
OnModified = onModified;
}
}
In your parent component
MyState State;
protected override OnInitialized()
{
State = new MyState(your objects, () => InvokeAsync(StateHasChanged));
}
In your parent markup
<CascadingValue Value=State>
All your child content here
</CascadingValue>
In your various child components that need access
[CascadingParameter]
public MyState State { get; set; }
protected void SomeEditWasMade()
{
State.Objects[23].Name = "Bob";
State.OnModified();
}
That should call the () => InvokeAsync(StateHasChanged) in the parent, and then that component and every component that consumes the MyState cascading value will get rerendered.
Or you could use something like Fluxor :)

Blazor components and linkage

Just hoping to get some help with some of this Blazor functionality. I'm building a true SPA app with no navigation, which means I'm going to need a fair bit of linkage.
Im going to follow some fundamentals of say Winforms or UWP were you have access to controls. And treat Blazor components as if they were controls. Do as much work in C# as I can.
So far I know:
For a child component, I can create an event callback, and register to it in the parent.
I can store a reference to the child component with the #ref tag. Then access functions of the child component after OnRender has been completed.
I can dynamically build a component using the builder.
But how do I pass a reference of the parent to the child? Like set a parameter of the child and pass "this".
The idea is that every child component of Index has a reference to the Index component. And the Index component has a reference to every child of Index.
So that way I can do things like when I click a button in the Header component.
I can call parent.PopupComponent.Show("Title");
I know it can be achieved with callbacks, but I would like to be able to make any call I need, access any variable etc. Through the linkage of components. Without needing to set up an extra callback function for each step.
Thank you in advance :)

You can pass a reference to the parent component to a child component as a regular parameter, as for instance:
Child.razor
#code {
[Parameter]
public Parent Parent { get; set; }
}
Parent.razor
#* Passing a parent reference to the child component*#
<Child Parent="this" />
#code {
}
You can also pass a CascadingParameter to child components. This is useful when you want to pass a reference to the parent component to all the children, as for instance:
Child.razor
#code {
[CascadingParameter]
public Parent Parent { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}
Parent.razor
#* Passing a parent reference to the child components in the form of
CascadingValue*#
<CascadingValue Value=this>
#ChildContent
</CascadingValue>
#code {
}
And this is bonus:
The following code snippet illustrate how to add a child component to a parent component, from which you can call properties of the child component :
protected override void OnInitialized()
{
Parent.AddChild(this);
}
Note: The OnInitialized method is implemented on the child component, right ?
And the word this refers to the current object; that is the child component, right ?
Hope this helps...

I just wanted to add this in as some people may find it useful when trying to build a Blazor app the same way I am.
Here is how I found a way to control what content is being loaded into a component, in my case I made an empty Flyout/Window component, with the content set as a render fragment. Note that the render fragment is private, the is because the content will be a BlazorComponent, defined in the ShowPopup() call.
Also worth noting that the component builder stuff will most likely become obsolete as they build on Blazor. This is low-level API, and as mentioned by the Developers. They will have something more useful in the future.
Child Component Code
<div>
...
#childContent
</div>
#code
{
private RenderFragment childContent { get; set; }
public void ShowPopup(Type ComponentType)
{
childContent = CreateDynamicComponent(ComponentType);
//Show popup logic....
}
RenderFragment CreateDynamicComponent(Type T) => builder =>
{
builder.OpenComponent(0, T);
builder.CloseComponent();
};
}
Then the parent Code
<div>
...
<button #onclick="#(e => PopupWindow.ShowPopup(typeof(BlazorComponentX)))">Load BlazorComponentX into Popup</button>
<PopupWindow #ref="PopupWindow"></PopupWindow>
...
</div>
#code
{
Public PopupWindow PopupWindow {get; set;}
}