Ticket T1285616
Visible to All Users

Cannot show a DxPopup

created 6 days ago

I used the following to create a new app

dotnet new dx.blazor -n MyBlazorServerApp --interactivity Server

I then added DxPopup components to the main page, but they do not appear.

Razor
@page "/" <PageTitle>Welcome</PageTitle> <div class="main-content"> <DxPopup @bind-Visible=Popup1Visible ShowCloseButton=@false ShowFooter CloseOnOutsideClick=@false CloseOnEscape=@false ShowHeader> <HeaderContentTemplate> Popup 1 </HeaderContentTemplate> <BodyContentTemplate> First popup </BodyContentTemplate> <FooterContentTemplate> <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Primary" Text="Open" Click=@(() => Popup2Visible = true) /> </FooterContentTemplate> </DxPopup> <DxPopup @bind-Visible=Popup2Visible ShowCloseButton=@false ShowFooter CloseOnOutsideClick=@false CloseOnEscape=@false ShowHeader> <HeaderContentTemplate> Popup 2 </HeaderContentTemplate> <BodyContentTemplate> Second popup </BodyContentTemplate> <FooterContentTemplate> <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Primary" Text="Open" Click=@(() => Popup3Visible = true) /> <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Secondary" Text="Close" Click=@(() => Popup2Visible = false) /> </FooterContentTemplate> </DxPopup> <DxPopup @bind-Visible=Popup3Visible ShowCloseButton=@false ShowFooter CloseOnOutsideClick=@false CloseOnEscape=@false ShowHeader> <HeaderContentTemplate> Popup 3 </HeaderContentTemplate> <BodyContentTemplate> Third popup </BodyContentTemplate> <FooterContentTemplate> <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Secondary" Text="Close" Click=@(() => Popup3Visible = false) /> </FooterContentTemplate> </DxPopup> </div> @code { bool Popup1Visible = true; bool Popup2Visible; bool Popup3Visible; }

Answers approved by DevExpress Support

created 6 days ago

Hello Peter,

Thank you for sharing your markup.

Please enable the InteractiveServer rendering mode for your main page. Add the following line at the top of this page:

Razor
@rendermode InteractiveServer

This issue occurs because Microsoft made static server-side rendering the default rendering mode for Blazor applications in .NET 8. We implemented static server-side support for some of our components. Static server-side rendering has advantages, such as faster loading time, but it also comes with some limitations. For example, Blazor components do not fire events and do not execute associated C# code after it's rendered for the first time. Thus, DxButton clicks are not handled, and DxPopups do not appear.

Refer to the following help topics for more information about the new rendering modes in .NET 8:

Please let me know if this helps.

Regards,
Tony

    Comments (2)
    PM PM
    Peter Morris 6 days ago

      Oh, I thought that's what --interactivity Server would do.

      Thanks for your quick response!

      Tony (DevExpress Support) 5 days ago

        Hello Peter,

        You're welcome! The --interactivity Server command defines the hosting model. However, you still need to enable the InteractiveServer render mode to make the components interactive. The Weather.razor component in that template project uses our interactive grid and utilizes the @rendermode InteractiveServer command to make the page interactive.

        Feel free to contact us if you need further clarification.

        Regards,
        Tony

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.