Blazor - how to apply attribute to parent element from a componentRSS

• • Reply
  billcrawley

  Member

  202 Points

  552 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:

  @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

• • Reply
  Xing Zou

  Contributor

  2220 Points

  731 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:

  <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

  Learning Always