handle 404 error in ASP.NET MVC

Best way to handle 404 NotFound error in ASP.NET MVC Application

NotFound 404 error refers to a not found resource/URL. The best way to handle the 404 NotFound error in ASP.NET MVC is to create a landing page for this specific error. In this post, I will show you the steps on how to create a 404 Error Handler. Here’s how a default 404 Error notification looks in ASP.NET MVC.

ASP.NET 404 ERROR

custom 404 error default notification

There are a lot of ways to Handle 404 NotFound error in ASP.NET MVC. One of the ways is to handle by setting the option from the project Web.Config.

Get familiar with the structure of ASP.NET MVC using this link.

Let’s Start:

First, to enable error redirection modify your Web.Config file.Search for <system.web> in your Web.Config and Add the code below inside the <system.web></system.web>.

<customErrors mode="On">
      <error statusCode="404" redirect="~/Error/NotFound"/>
    </customErrors>

Second, navigate to your Controller folder and create a controller ErrorController.This will serve as our custom error handler. Inside this controller, create an action result method. Let’s named it NotFound this will return our custom view for 404 error.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace _404ErrorHandler.Controllers
{
    public class ErrorController : Controller
    {
        public ActionResult NotFound()
        {
           
                return View();
            
        }
    }
}

Third, create a view of the NotFound action result method. By default, a view for the controller can be manually created inside the View->Error folder.  Or by simply right-clicking on your Not Found method inside ErrorController and selecting Add View.

Add View

Custom Error Preview:

handle 404 error in ASP.NET MVC

Note: I used Bundle Config inside App_Start folder to call my custom style.css file.

Add bundle

To add a bundle, you can copy the code below into your BundleConfig file where ~/Content/style.css is your stylesheet location, and ~/Content/Custom/Error is the name of your bundle.

  • Add(new StyleBundle(“~/Content/Custom/Error”).Include(“~/Content/style.css”));

To call this bundle you can simply use @Styles.Render(“~/Content/Custom/Error”)

Code:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@Styles.Render("~/Content/Custom/Error")

<div class="w3l">
    <div class="text">
        <h1>PAGE NOT FOUND</h1>

        <p>URL link can not be found. Please check the url or go to @Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" }) and log in using your credentials..</p>
    </div>
    <div class="image">
        <img src="~/images/smile.png" />
    </div>
    <div class="clear"></div>
</div>

To add design to the view, we can also add icons. In my case, I used the image below. Which I included inside the image folder.  And used <img src=”~/images/smile.png” /> to include image in my view.

Icon

Fourth, Create styles for your view. In my case, I create a file name style.css inside the content folder from solution explorer.

Navigate to content folder

Style.css Code:

body {
    font-family: 'Josefin Sans', sans-serif;
    /*background: #2b82ad;*/
    padding: 60px 80px 20px;
}
.clear{
	clear:both;
}
h1 {
    font-size: 70px;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 0px;
    /*color: #ffffff;*/
    font-weight: 700;
}
p {
    font-weight: 600;
    font-size: 20px;
    text-align: left;
    /*color: #ffffff;*/
    line-height: 32px;
    padding-top: 10px;
}
.agile {
    width: 80%;
    margin: 0 auto;
}
.image {
	width: 30%;
	float: left;
	margin-top:40px;
}
.image img{
	width:100%;
}
.text {
    width: 64%;
    float: left;
    padding: 5em 0em 3em 0em;
}
.text a{
	color:#000;
	text-decoration:undrline;
}
.text a:hover{
	color:#003b64;
	text-decoration:underline;
}
.agileits_main_grid_left h1 {
    font-size: 2.5em;
    color: #000;
}
.agileits_main_grid_right {
    float: right;
    margin: 1.2em 0 0;
}
.agileits_main_grid_left {
    float: left;
}

.back {
    float: left;
}
.wthree {
    background: #000;
    padding: 1em;
}
.back a {
    display: block;
    font-size: 1.2em;
    color: #fff;
    text-decoration: none;
    padding-top: 6px;
}
.w3l {
    margin: 4em 0;
}
/*---- responsive-design -----*/
@media(max-width:1336px){
h1 {
    font-size: 66px;
}
p {
    font-size: 18px;
}
}
@media(max-width:1280px){
h1 {
    font-size: 62px;
}
}
@media(max-width:1024px){
.agile {
    width: 90%;
}
body {
    padding: 53px 53px 20px;
}
h1 {
    font-size: 56px;
}
.w3l {
    margin: 1em 0;
}
}
@media(max-width:800px){
.agile {
    width: 100%;
}
.text {
    width: 70%;
    padding: 3em 0em 3em 0em;
}
h1 {
    font-size: 52px;
}
p {
    font-size: 16px;
}
.footer {
    padding: 1em 0em;
}
}
@media(max-width:768px){

}
@media(max-width:736px){
	.footer p{
		font-size:16px;
		
	}
	h1 {
    font-size: 48px;
}
.agileits_main_grid_left h1 {
    font-size: 2em;
}
.agileits_main_grid_right {
    margin: 0.8em 0 0;
}
}
@media(max-width:667px){
	.footer p{
		font-size:15px;
	}
	h1 {
    font-size: 43px;
}
.text {
    padding: 3em 0em 1em 0em;
}
}
@media(max-width:640px){
h1 {
    font-size: 40px;
}
p {
    line-height: 26px;
}
.wthree {
    background: #000;
    padding: 0.8em;
}
}
@media(max-width:600px){
h1 {
    font-size: 37px;
}
	.footer p{
		font-size:15px;
	}
}
@media(max-width:568px){
	p{
		font-size:16px;
	}
	.footer p{
		font-size:14px;
	}
	h1 {
    font-size: 34px;
}
.back a {
    font-size: 1em;
    padding-top: 8px;
}
}
@media(max-width:480px){
body {
    padding: 30px;
}
h1 {
    font-size: 32px;
}
.text {
    padding: 3em 0em 0em 0em;
}
}
@media(max-width:414px){
	.text{
		width:100%;
		float: none;
	}
	.footer p{
		font-size:14px;
	}
	.text {
    padding: 2em 0em 0em 0em;
}
body {
    padding: 24px;
}
.image {
    width: 60%;
    float: none;
    margin: 16px auto;
}
.footer {
    padding: 0em 0em;
}
}
@media(max-width:384px){
	.footer p{
		font-size:14px;
		 margin: 0px 0 10px;
}
.wthree {
    padding: 0.5em;
}
}
@media(max-width:375px){

	.footer p{
		font-size:14px;
	}
}
@media(max-width:320px){
	body {
    padding: 16px 16px;
}
.agileits_main_grid_left h1 {
    font-size: 1.8em;
}
h1 {
    font-size: 30px;
	margin-bottom:0;
}
p {
    font-size: 14px;
	line-height:24px;
}
.footer p {
    font-size: 14px;
    padding-top: 0px;
}
.back {
    float: none;
    width: 100%;
    text-align: center;
}
.social-icons {
    float: none;
    width: 100%;
    text-align: center;
    margin-top: 12px;
}
.back a {
    padding-top: 0px;
}
.wthree {
    padding: 0.8em;
}
.text {
    padding: 1em 0em 0em 0em;
}
}

And we are done. Suppose you have better ways to handle 404 NotFound error in ASP.NET MVC. Please comment down below. Every time a URL is invalid, this error notification will appear instead of the default 404 error notification.

handle 404 error in ASP.NET MVC

Thank you for reading!! Happy coding!! Visit my Blog Page for my latest post.

Leave a Comment

%d bloggers like this: