[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
Bootstrap snippet and html example. 404 error page with particles, this UI example was created for web development using HTML, Javascript and CSS by Bootdey Admin
www.bootdey.com
https://www.bootdey.com/snippets/view/500-error-page-with-particles
Bootstrap html snippet. 500 error page with particles
Bootstrap snippet and html example. 500 error page with particles, this UI example was created for web development using HTML, Javascript and CSS by Bootdey Admin
www.bootdey.com
그러면 이번에는 본격적으로 소스상으로 연동시켜 보도록 하자.
[ Program.cs ]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.....
public void Configure(WebApplication app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseStatusCodePagesWithReExecute("/Error/{0}");
app.UseHsts();
}
}
....
|
cs |
위의 소스에서 /Error/{0} 형태로 라우팅을 가져간다.
[ /Controller/ErrorController.cs ]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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();
}
}
}
|
cs |
[ /Views/Error/Index.cshtml ]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
@{
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 {
}
|
cs |
@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