Open Closed

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


User avatar
0
joe@tronactive.com created

If you're creating a bug/problem report, please include followings:

  • ABP Framework version: v6
  • UI type: Blazor server
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): Single layered template

I am trying to use FLuxor with Abp and I am having a hard time getting it to work. I need to put a call to a component in the App.razor file but of course that is apart of the theme. Same with adding a using statement to _Imports.razor. How can I add these two to my blazor app so I can customize them?

Thanks


1 Answer(s)
  • User Avatar
    0
    enisn created
    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.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19