Blazor Customize App.razor & _Imports.razor? #3683

1 Answer(s)

• 

  0

  enisn created 2 years ago

  Support Team .NET Developer

  Hi

  App.razor

  You can create a App.razor file in your application and use it via configuring it in the Module file of your application for Blazor WASM and _Host.cshtml for Blazor Server

  MyApp.razor

  @using Microsoft.Extensions.Options
  @using Microsoft.Extensions.Localization
  @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme
  @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components
  @using global::Localization.Resources.AbpUi
  @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout
  @using Volo.Abp.AspNetCore.Components.Web.Theming.Routing
  @inject IOptions<AbpRouterOptions> RouterOptions
  @inject IOptions<LeptonXThemeBlazorOptions> LayoutOptions
  
  @inject IStringLocalizer<AbpUiResource> UiLocalizer
  <CascadingAuthenticationState>
      <Router AppAssembly="RouterOptions.Value.AppAssembly"
              AdditionalAssemblies="RouterOptions.Value.AdditionalAssemblies">
          <Found Context="routeData">
              <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@LayoutOptions.Value.Layout">
                  <NotAuthorized>
                      @if (context.User?.Identity?.IsAuthenticated == false)
                      {
                          <RedirectToLogin/>
                      }
                      else
                      {
                           <ErrorView
                              Title="@UiLocalizer["403Message"]"
                              HttpStatusCode="403"
                              Message="@UiLocalizer["403MessageDetail"]"/> 
                      }
                  </NotAuthorized>
              </AuthorizeRouteView>
          </Found>
          <NotFound>
              <LayoutView Layout="@LayoutOptions.Value.Layout">
                  <ErrorView
                      Title="@UiLocalizer["404Message"]"
                      HttpStatusCode="404"
                      Message="@UiLocalizer["404MessageDetail"]"/>
              </LayoutView>
          </NotFound>
      </Router>
  </CascadingAuthenticationState>
  

         var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
         builder.RootComponents.Add<MyApp>("#ApplicationContainer");
  

  If you're using Blazor-Server, Go to your Pages/_Host.cshtml and change App to MyApp

   <component type="typeof(MyApp)" render-mode="Server" />
  

  ---

  Imports.razor

  Multiple Imports.razor can be used in a blazor project. So you can create a new _Imports.razor wherever you want in your application. It'll be applied to its own folder and subfolders.

  Save Cancel