I want to call blazor component dynamically on button click

Question

I have TemplateSlide.razor component like below

<div class="slide-panel">
  <div class="contact-form-content">
          @Content

 </div>
@code
{
[Parameter] public RenderFragment Content { get; set; }
}

I have razor component Comp.razor like following

<TemplateSlide>
<div>Other comp</div>
</TemplateSlide>

I have other menu component that call Comp.razor on button click

 <div class="page-header-buttons">
        <ul>

            <li class="page-header-buttons-items can-add">
                <MainMenuLink Href="" ActiveClass="page-header-active" HrefMatch="MainMenuLinkMatch.Exact">
                    Dashboard
                </MainMenuLink>

                @*<a class="page-header-plus contact" href="#"><i class="fas fa-plus add-new-contact-icon"></i></a>*@
            </li>
            <li class="page-header-buttons-items can-add">
                <MainMenuLink Href="contacts" ActiveClass="page-header-active">
                    Contacts
                </MainMenuLink>
                <a class="page-header-plus contact"   @onclick="@(()=>Show<Comp>())"><i class="fas fa-plus add-new-contact-icon"></i></a>

            </li>
<li class="page-header-buttons-items can-add">
                <MainMenuLink Href="contacts" ActiveClass="page-header-active">
                    Others
                </MainMenuLink>
                <a class="page-header-plus contact"   @onclick="@(()=>Show<Others>())"><i class="fas fa-plus add-new-contact-icon"></i></a>

            </li>
</ul>
    </div>

How can write generic and dynamic Show method for button click?

Not really clear. We don't Show() components in Blazor, we navigate to pages. — Henk Holterman
– Henk Holterman, Commented Jun 1, 2020 at 16:42
You need to be more precise about what you re struggling with? — Prakhar Agarwal
– Prakhar Agarwal, Commented Jun 1, 2020 at 16:57
In the click handler add this value: "@(() => NavigationManger.NavigateTo(" Comp"))": @onclick= "@(() => NavigationManger.NavigateTo(" Comp"))" — enet
– enet, Commented Jun 1, 2020 at 17:10
I dont want to navigate, I want stay in the same page but new component is opened as slide on the current page — Gary
– Gary, Commented Jun 1, 2020 at 17:13
@Gary, you must navigate to the comp component, unless you use it in your menu component . In that case, you can capture a reference to the comp component, and call the Show method on it. — enet
– enet, Commented Jun 1, 2020 at 17:31

user12228709 · Accepted Answer · 2020-06-01 22:04:31Z

I learned this yesterday and I am only posting this in case it helps someone.

I have a list of users I display in my Blazor Chat, and the names are actually buttons:

@foreach (SubscriberCallback callback in Names)
{
    <button class="listbutton" @onclick="(Action<EventArgs>) (args => 
    SendPrivateMessageClicked(args, callback.Id))">@callback.Name</button><br />
}

I have this method called SendPrivateMessageClicked, and I need to pass in the Id (Guid) of who to send the message to.

private void SendPrivateMessageClicked(EventArgs args, Guid toId)
{
    // Attempt to find the subscriber
    SubscriberCallback subscriber = SubscriberService.FindSubscriber(toId);

    // Send Private Message Code Removed, but you get the point
}

Css for the link button:

.listbutton
{
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
    border: none;
    color: limegreen;
    height: 2.4vh;
    font-size: 2vh;
}
.listbutton:focus
{
    outline: none;
}

I love Blazor!

Collectives™ on Stack Overflow

I want to call blazor component dynamically on button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related