Open Closed

Overriding default 404 error page in Blazor Server template w/Lepton theme #4787


User avatar
0
balessi75 created

**ABP Commercial 7.01 / Blazor Server/ EF **

Hi, we are using the Lepton theme and would like to replace the default 404 error page. How can this be done?


10 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton.Views.Error.DefaultErrorComponent;
    public class LeptonErrorViewComponent
    

    Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton/Views/Error/DefaultErrorComponent/LeptonErrorViewComponent.cs

    https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface#overriding-a-page-model-c

  • User Avatar
    0
    balessi75 created

    We are looking to change only the html on the error page. So we followed the instructions here: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface#overriding-a-razor-page-cshtml

    In following those instructions, we created a modified Default.cshtml under the same folder structure in our project as defined in Abp (see below). The problem is though that we don't see our changes and the Abp error page still shows. Any ideas?

  • User Avatar
    0
    balessi75 created

    Also, LeptonErrorViewComponent's Invoke method is not overridable (virual) so the component cannot be replaced.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can create your LeptonErrorViewComponent and use it here.

  • User Avatar
    0
    balessi75 created

    We created our own nVisionLeptonErrorViewComponent and added our own 404.cshtml

    Our project solution is as follows:

    Our 404.cshtml is as follows:

    @using FM.nVision.Blazor.Views.Error.DefaultErrorComponent;
    @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton.Views.Error.DefaultErrorComponent
    @model Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Views.Error.AbpErrorViewModel
    
    @(await Component.InvokeAsync&ltnVisionLeptonErrorViewComponent&gt(new { model = Model, defaultErrorMessageKey = "404Message" }))
    

    Our nVisionLeptonErrorViewComponent is as follows:

    using Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton.Views.Error.DefaultErrorComponent;
    
    namespace FM.nVision.Blazor.Views.Error.DefaultErrorComponent;
    
    public class nVisionLeptonErrorViewComponent : LeptonViewComponentBase
    {
        public IViewComponentResult Invoke(AbpErrorViewModel model, string defaultErrorMessageKey)
        {
            var leptonModel = new LeptonErrorPageModel
            {
                ErrorInfo = model.ErrorInfo,
                HttpStatusCode = model.HttpStatusCode,
                DefaultErrorMessageKey = defaultErrorMessageKey
            };
    
            return View("~/Views/Error/DefaultErrorComponent/Default.cshtml", leptonModel);
        }
    }
    

    We still don't see our custom Default.cshtml in Views/Error/DefaultErrorComponent. Is there something else we are missing?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    It works for me.

  • User Avatar
    0
    balessi75 created

    Interesting... I have the same setup. Could it be because I'm using a Blazor Server templated solution and your using MVC?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    I'm checking the solution of the blazor server.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer
    @inherits Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ErrorView
    @attribute [Dependency(ReplaceServices = true)]
    @attribute [ExposeServices(typeof(Volo.Abp.AspNetCore.Components.Web.LeptonTheme.Components.ErrorView))]
    @using Microsoft.Extensions.Localization
    @using global::Localization.Resources.AbpUi
    @using Volo.Abp.DependencyInjection
    @inject IStringLocalizer<AbpUiResource> L
    <div class="error-page-container">
        <Row>
            <Column ColumnSize="ColumnSize.IsAuto">
                <div class="status-icon">
                    <i class="fa fa-frown-o text-danger" aria-hidden="true"></i>
                    <span></span>
                </div>
            </Column>
            <Column>
                <div class="status-content">
                    <h1>@HttpStatusCode</h1>
                    <h1>test</h1>
                    <h2 class="text-danger mb-0">@Title</h2>
                    <p class="mt-3 mb-4">@Message</p>
                    <a href="/" class="btn btn-primary">@L["GoHomePage"]</a>
                </div>
            </Column>
        </Row>
    </div>
    
    

  • User Avatar
    0
    balessi75 created

    That was easy and worked perfectly. Thanks @maliming !!

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