I have a function on the button click event and this is declared in the MenuFunctions Class. This, function simply has :
public class MenuFunctions : BlazorComponent { publicvoidToggleNavMenu() {CollapseNavMenu=!CollapseNavMenu; }…..
Now to keep it simple from this function I want to be able to add an attribute to the element on the parent that has the class content on it. so as an example I might want this to end up as
<div class="content px-4" style="color:red"> so How would I attach the style attribute? The one caveat that also makes this more difficult is that I am not allowed to embed any `@functions` In my .cshtml page, hence
my MenuFunctions class
Components can offer callbacks that parent components can use to react on events raised by their child components .You could use
event-binding to make it.
MenuFunctions.cs:
public class MenuFunctions : BlazorComponent
{
public string Color { get; set; } = "red";
[Parameter]
private Action<string> OnSomeEvent { get; set; }
public void OnClick()
{
OnSomeEvent?.Invoke(this.Color);
}
public bool CollapseNavMenu { get; set; } = true;
public void ToggleNavMenu()
{
CollapseNavMenu = !CollapseNavMenu;
}
}
In NavMenuToggleComponent.cshtml, add below code:
<button onclick=@OnClick>Click me (child component)</button>
Member
202 Points
553 Posts
Blazor - how to apply attribute to parent element from a component
Feb 21, 2019 08:58 AM|billcrawley|LINK
I have the following cshtml page:
as you can see I have a component called NavMenuToggleComponent who's code is:
I have a function on the button click event and this is declared in the MenuFunctions Class. This, function simply has :
Now to keep it simple from this function I want to be able to add an attribute to the element on the parent that has the class content on it. so as an example I might want this to end up as
<div class="content px-4" style="color:red">so How would I attach the style attribute? The one caveat that also makes this more difficult is that I am not allowed to embed any `@functions` In my .cshtml page, hence my MenuFunctions classParticipant
1390 Points
489 Posts
Re: Blazor - how to apply attribute to parent element from a component
Feb 22, 2019 07:23 AM|Xing Zou|LINK
HI billcrawley,
Components can offer callbacks that parent components can use to react on events raised by their child components .You could use event-binding to make it.
MenuFunctions.cs:
public class MenuFunctions : BlazorComponent { public string Color { get; set; } = "red"; [Parameter] private Action<string> OnSomeEvent { get; set; } public void OnClick() { OnSomeEvent?.Invoke(this.Color); } public bool CollapseNavMenu { get; set; } = true; public void ToggleNavMenu() { CollapseNavMenu = !CollapseNavMenu; } }In NavMenuToggleComponent.cshtml, add below code:
Parent cshtml page:
@inherits BlazorLayoutComponent <NavMenuToggleComponent OnSomeEvent=@((c)=> { this.Color = c; StateHasChanged(); })></NavMenuToggleComponent> <div class="content px-4" style="@("color:"+@Color)"> Text </div>Click the button and "Text" will become red.
Xing