locked
Blazor - how to apply attribute to parent element from a component RRS feed

  • Question

  • User-963208184 posted

    I have the following cshtml page:

    @inherits BlazorLayoutComponent
    
    <NavMenuToggleComponent></NavMenuToggleComponent>
    
    <div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto"><span class="col-md-1">About</span></a>
        <NavLink class="nav-link pull-right col-md-2" id="logout" href="logout">
            <span class="fas fa-sign-out-alt" aria-hidden="true"></span><span class="col-md-1 pull-right">Logout</span>
        </NavLink>
    </div>
    
    <div class="content px-4">
        @Body
    </div>

    as you can see I have a component called NavMenuToggleComponent who's code is:

    @inherits Blazor.Web.Functions.MenuFunctions
    
    <div class="pl-4  navbar navbar-dark">
    <button class="navbar-toggler navbar-brand main-button" title="MENU" onclick=@ToggleNavMenu>
        MENU
    </button>
    </div>
    
    <div class="sidebar @(CollapseNavMenu ? "collapse" : null)">
        <NavMenu />
    </div>

    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
    {
    public
    void ToggleNavMenu() { 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

    Thursday, February 21, 2019 8:58 AM

All replies

  • User-1764593085 posted

    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:

    <button onclick=@OnClick>Click me (child component)</button>

    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

    Friday, February 22, 2019 7:23 AM