[ASP.Net Core] Custom Error Page ( 사용자 정의 Error 페이지 만들기 )

 

자 우선 에러페이지 틀을 만들 수 있는 무료소스 페이지이다.

https://www.bootdey.com/snippets/view/404-error-page-with-particles

Bootstrap html snippet. 404 error page with particles

 

https://www.bootdey.com/snippets/view/500-error-page-with-particles

Bootstrap html snippet. 500 error page with particles

 

그러면 이번에는 본격적으로 소스상으로 연동시켜 보도록 하자.

 

[ Program.cs ]

 

.....
public void Configure(WebApplication app, IWebHostEnvironment env)
{
 
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        
        app.UseExceptionHandler("/Error");
        app.UseStatusCodePagesWithReExecute("/Error/{0}");
        app.UseHsts();
        
    }
 
}
....

 

위의 소스에서 /Error/{0} 형태로 라우팅을 가져간다.

 

[ /Controller/ErrorController.cs ]

 

using Microsoft.AspNetCore.Mvc;
 
namespace Test1.Controllers
{
    [Route("/Error/{code:int}")]
    public class ErrorController : Controller
    {
        public IActionResult Index(int code)
        {    /*
            ViewBag.ErrorMessage = $"Error occurred. The ErrorCode is: {code}";
            return View();
            */
            switch (code)
            {
                case 404:
                    ViewBag.ErrorMessage = "해당 페이지를 찾을 수 없습니다.";
                    break;
                case 400:
                    ViewBag.ErrorMessage = "잘못된 문법오류가 있어서 페이지를 처리할 수 없습니다.";
                    break;
                case 500:
                    ViewBag.ErrorMessage = "해당 페이지를 읽는중에 오류가 발생하였습니다.";
                    break;
                default:
                    break;
 
            }
            return View();
        }
    }
}

 

 

[ /Views/Error/Index.cshtml ]

 

@{
    Layout = "_Layout";
    ViewData["Title"] = "Error";
    var message = ViewBag.ErrorMessage;
}
 
@section Styles {
    <style>
        body {
            margin-top: 20px;
        }
 
        .cover-background {
            position: relative !important;
            background-size: cover !important;
            overflow: hidden !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }
 
        .p-0 {
            padding: 0 !important;
        }
 
        section {
            padding: 120px 0;
            overflow: hidden;
            background: #fff;
        }
 
        .error-page {
            background-color: #BABABA4A;
            -webkit-backdrop-filter: blur(9px);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(234,234,235,0.2);
            padding: 80px 20px;
        }
 
        .text-center {
            text-align: center !important;
        }
 
        .error-page h1 {
            font-size: 200px;
            line-height: 1;
            font-weight: 600;
        }
 
        .text-secondary {
            color: #15395A !important;
        }
 
        .mb-4 {
            margin-bottom: 1.5rem !important;
        }
 
        .footer {
            margin-top:0px;
        }
 
    </style>
}
 
 
<section class="p-0 bg-img cover-background" style="background-image: url('/img/bg1.jpg');">
    <div class="container-fluid d-flex flex-column">
        <div class="row align-items-center justify-content-center min-vh-100">
            <div class="col-md-9 col-lg-6 my-5">
                <div class="text-center error-page">
                    <!--<h1 class="mb-0 text-secondary">404</h1>-->
                    <h2 class="mb-4 text-white">@message</h2>
                    <p class="w-sm-80 mx-auto mb-4 text-white">잠시후 다시 시도해 주십시오.</p>
                    <div>
                        <a href="/" class="btn btn-info btn-lg me-sm-2 mb-2 mb-sm-0">Home</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
 
 
@section scripts {
 
}

 

 

@message 내용을 ViewBag 으로 받아서 간단히 찍어준다.

 

 

 

 

참고 : https://thaitran.dev/how-to-build-custom-error-pages-in-net-core-6

참고 : https://www.thetechplatform.com/post/404-errors-in-asp-net-core