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>
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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 classContributor
2190 Points
727 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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.