DialogService in MainLayout

Radzen.Blazor Components
1

Hello,
I have MauiBlazor Hybrid project and I try to call dialog service for open similar RadzenLogin which is in separate razor file LoginDialog.razor. For Login operations I have LoginDisplay.razor file which i call dialog service from:

 async Task Login()
 {
   //Call Login Modal
   Auth_mdl cur_user = await DialogService.OpenAsync<LoginDialog>("Prihlásenie", null, new DialogOptions() { Width = "1024px", Height = "auto", Draggable = true, Resizable = true, ShowClose = true }); ......}

LoginDisplay component is called from MainLayout like this:
<RadzenLayout>
  <RadzenHeader>
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
      <RadzenSidebarToggle Click="@(() => SidebarExpanded = !SidebarExpanded)" />
      <RadzenLabel Text="TEST" />
      <LoginDisplay/>
      <RadzenToggleButton Style="margin-left: auto; margin-right: 1rem;"
      Icon=@(IsLight ? "dark_mode" : "light_mode")
      Value=@IsLight
      Variant=Variant.Text ButtonStyle=ButtonStyle.Base ToggleButtonStyle=ButtonStyle.Base ToggleShade=Shade.Default
      Change=@OnChange />
    </RadzenStack>
  </RadzenHeader> ........

I put in every razor file

@inject DialogService DialogService

and I have builder.Services.AddRadzenComponents(); in MauiProgram.cs of course. But nothing happens and and LiginDialog desn't open.
Where is the problem?
Thanks.

2

You’ve missed to include <RadzenComponents /> as per our getting started.

3

Thanks, I really omitted it. When tried to add
<RadzenComponents @rendermode="InteractiveAuto" />
according to Your Getting started I got error "The name 'InteractiveAuto' does not exist in the current context".
So I mede it like:

@inherits LayoutComponentBase
@inject IJSRuntime JS
@inject StateContainer StateContainer
@inject DialogService DialogService

<RadzenComponents/>

<RadzenLayout>
  <RadzenHeader>
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
      <RadzenSidebarToggle Click="@(() => SidebarExpanded = !SidebarExpanded)" />
      <RadzenLabel Text="TEST" />
      <LoginDisplay/>
...............

Then the command
Auth_mdl cur_user = await DialogService.OpenAsync<LoginDialog>("Prihlásenie", null, new DialogOptions() { Width = "1024px", Height = "auto", Draggable = true, Resizable = true, ShowClose = true });
called the LoginDialog.razor and i got to the breakpoint in Initialize method. Then the dialog is rendered, but it disappears immediately. I suppose, render mode is bad.
My code LoginDialog:


@page "/logindialog"
@inject DialogService dialogService

<RadzenCard class="rz-my-12 rz-mx-auto rz-p-4 rz-p-md-12" style="max-width: 600px;">
  <RadzenTemplateForm Data=@("SimpleLogin")>
    <RadzenLogin AllowRegister="false" AllowResetPassword="false"
    LoginText="Prihlásiť sa" UserText="Meno" PasswordText="Heslo"
    UserRequired="Meno je povinné"
    PasswordRequired="Heslo je povinné"
    Login=@(args => OnLogin(args, "SimpleLogin")) />
  </RadzenTemplateForm>
</RadzenCard>

@code {
  Auth_mdl cur_user = new();

  bool rememberMe = true;

  protected override async Task OnInitializedAsync()
  {
    cur_user.Username = "xyz";
  }

  void OnLogin(LoginArgs args, string name)
  {
    dialogService.Close(cur_user);
  }
}
4

Most probably is closed. You can attach Radzen.Blazor.csproj to your app to debug it.

5

I got it. FYI the problem was that I called Login method (Task) from html hyperlink. That is code which calls Dialog service.
When I marked it as a comment and used the RadzenButton, then the flow works.

@inject DialogService DialogService
 

@if (string.IsNullOrEmpty(Token))
{
  <RadzenButton Variant="Variant.Outlined" Text="Prihlásiť sa" Click="Login" Icon="login" />
  @* <a href="#" @onclick="Login">Prihlásiť sa</a> *@
}
else
{
  <span>Dobrý deň, @Username!</span>
  <RadzenButton Variant="Variant.Outlined" Text="Odhlásiť sa" Click="Login" Icon="logout" />
  @* <button class="nav-link btn btn-link" @onclick="Logout">Odhlásiť sa</button> *@
}