How to pop a modal from a NavLink item in NavMenu.razor?

[Niels Schutte]

Hi,

I'm new to Blazor but I'm already having struggles popping up a modal when clicking on one of the menu items (NavLink) using the @onclick method. What I'm trying to create is as follows:

My menu has 6 different items, the last item of that is "Sign Out" link. When user clicks on this link a modal should pop up in the center of the total screen(what I got so far is that it appears in sidebar?). How can I achieve this? Where do I create the modal? Whats the best approach to call this modal and make it visible? Can someone help me with this? Thanks in advance!

Niels

[Madhan Venkateshan]

Hi Niels Schutte, 

 

Good day to you. 

 

You can use ‘Dialog’ Component to show as a model on ‘ItemSelected’ event of Menu component and on Dialog button click you can perform your action. Please refer the below code snippets and sample link. 

 

Index.razor 

<SfDialog @ref="DialogRef" Target="#wrapper" Width="500px" IsModal="true" ShowCloseIcon="true" Visible="false"> 

    <DialogTemplates> 

        <Header>Header</Header> 

        <Content> <p>Content</p> </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton OnClick="@DlgButtonClick"> 

            <DialogButtonModel Content="OK" IsPrimary="true"></DialogButtonModel> 

        </DialogButton> 

    </DialogButtons> 

</SfDialog> 

@code { 

    SfDialog DialogRef; 

     

 

    public void DlgButtonClick() 

    { 

        // you can perform your action here for dialog button click 

        DialogRef.Hide(); 

    } 

 

    public void MenuItemSelect(Syncfusion.Blazor.Navigations.MenuEventArgs args) 

    { 

        if(args.Item.Text == "Sign out") 

        { 

            DialogRef.Show(); 

        } 

    } 

} 

 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/155062/ze/DialogOpenonMenuItemSelect1510950294 

 

Dialog Sample link: https://blazor.syncfusion.com/demos/dialog/default-functionalities?theme=bootstrap4 

 

Dialog Documentation link: https://blazor.syncfusion.com/documentation/dialog/getting-started/?no-cache=1 

 

Regards, 

Madhan V