Error Page Customization Setting In ASP.NET MVC 4.0

In this blog, you will learn about an error page customization setting in ASP.NET MVC 4.0.

Note

We can manually customize an error page In ASP.NET and ASP.NET MVC 4.0.

Step 1

First, create an Application named “Error”.

Step 2

Now, create a controller class file named “HomeController.cs”.

Code Ref 

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
namespace Error.Controllers {  
    public class HomeController: Controller {  
        //  
        // GET: /Home/  
        [HandleError]  
        public ActionResult Index() {  
            return View();  
        }  
        public ActionResult Index1() {  
            return View();  
        }  
    }  
} 

HandleError provides built-in exception filters. The HandleError attribute in ASP.NET MVC can be applied over the action method as well as controller or at the global level.

Home/Index or Home/Index1, it will show error.cshtml as view not found in index1 but in web.config file, the error statusCode="404" means the file is not found and it means the controller name or controller action method name.

[HandleError] //If I put this attribute and run, it will go to Customized Bydefault error page.

Step 3

Now, create a controller class file named “ErrorController.cs”.

Code Ref 

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
namespace Error.Controllers {  
    public class ErrorController: Controller {  
        //  
        // GET: /Error/  
        public ActionResult Index() {  
            return View();  
        }  
        public ActionResult NotFound() {  
            return View();  
        }  
    }  
}

[HandleError] //If I put this attribute and run, using Error/Index, it will go to Customized Bydefault Error page.

Step 4

Now, go to Views folder, create a view named “NotFound.cshtml” In Views/Error folder.

Code Ref

@{  
    ViewBag.Title = "My Error Page";  
}  
  
    <div style=" padding:20px; color:red" >  
        <h3>  
            My Own Created Error Page:  
        </h3>  
        <h4>  
            Sorry, The Page, You are Looking for File is not found Or Controller Name / Controller Action Method Name Not There.  
        </h4>  
        <h6>@Html.ActionLink("Go Back To Home Page", "Index", "Home")</h6> @*link name , action method name , controller name*@  
        <br />  
        <br />  
    </div>

This error file will be shown when the file is not found or Controller Name / Controller Action Method Name is not there.

Step 5

Now, go to Views folder, create a view named “Index.cshtml” In Views/Home folder.

Code Ref 

@{  
    ViewBag.Title = "Index";  
}  
  
<h2>Index</h2>  
  
<div>  
    <table border="1">  
        <tr>  
            <td>  
                Name  
            </td>  
        </tr>  
        <tr>  
            <td>  
                Address  
            </td>  
        </tr>  
        <tr>  
            <td>  
                Email  
            </td>  
        </tr>  
        <tr>  
            <td>  
                Dob  
            </td>  
        </tr>  
    </table>  
</div>

This Index file will be shown when the file is found or Controller Name/ Controller Action Method Name is there.

Step 5

Visual Studio by default is creating two Cshtml files i.e. _Layout.cshtml and Error.cshtml inside Shared folder.

1. The _Layout.cshtml file is for creating any Master Page file in MVC.
2. In this cshtml, put your own layout for master page purpose, as we did it in ASP. NET earlier.
3. This _Layout.cshtml is referred in _ViewStart.cshtml.
4. The _ViewStart.cshtml file contains the _Layout.cshtml to show the master page in every page by mentioning it in other cshtml file like Index.Cshtml file.
5. If you want to apply Master page In MVC, only mention cshtml page reference of ViewStart.cshtml in other child cshtml file instead of _Layout.cshtml.

Step 6

Now, put your own code in Error.Cshtml file by removing the existing code One.

Existing Code Ref 

@*@{  
    Layout = null;  
}  
  
<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>Error</title>  
</head>  
<body>  
    <hgroup>  
        <h1>Error.</h1>  
        <h2>An error occurred while processing your request.</h2>  
    </hgroup>  
</body>  
</html>*@

My Own Code Ref 

@model System.Web.Mvc.HandleErrorInfo  
@{  
    ViewBag.Title = "Customize Error Page";  
}  
  
    <div style=" padding: 20px; color:red">  
        <h3>  
            Customized By Default Error Page:  
        </h3>  
        <h4>  
            Sorry, an error occurred while processing your request Or View Of Corresponding Controller and Controller Action Method Not There.  
        </h4>  
        <h6>@Html.ActionLink("Go Back To Home Page", "Index", "Home")</h6> @*link name , action method name , controller name*@  
        <br />  
        <br />  
    </div>  

This file will be shown while processing your request or the view of the corresponding controller and controller action method is there.

Step 7

Go to Web.config file. Add some code for file not found exception.

Code Ref

<system.web>  
   
    <customErrors mode="On"> <!--put your own customized error page-->  
      <error statusCode="404" redirect="~/Error/NotFound"/>  
    </customErrors>  
</system.web>

Similar to the code given above, you can create for other exceptions related to the page (Controllers & Controller Action Methods).

Controller name / action method name--> <!--Only when file not found, it will show as error code is 404-->

<!--<error statusCode="error statusCode no" redirect="path"/>  
<error statusCode="error statusCode no" redirect="path"/>  
<error statusCode="error statusCode no" redirect="path"/>-->  

Step 8

Go to RouteConfig.cs file Of App_Start folder, add some code to set the start page, as page loads first time.

Code Ref

defaults: new { controller = "Home", action = "Index", id=UrlParameter.Optional }

Output

http://localhost:52218/home/index

Available Home Controller and Controller Action Method and Index View name are given.

Output

http://localhost:52218/home/index1

Home Controller and Controller Action Method name are available there but Index1 View name is not there.

Your request or the view of the corresponding Controller and Controller Action Method are not there.

Output

http://localhost:52218/Error/NotFound?aspxerrorpath=/home1/index1

Home Controller and Controller Action Method are available but View name is not there i.e. Home1 and Index1.

The page, you are Looking for the file is not found or Controller Name / Controller Action Method Name is not there.

In the URL given above, the path /Error/NotFound is configured in Web.Config file.

Output

How HTML Action Link Helper class acts Like ASP.NET Link button and It will redirect to the mentioned page or Controller name and Action method name.

Code Ref 

@Html.ActionLink("Go Back To Home Page", "Index", "Home")</h6>  
@*link name , action method name , controller name*@ 

Output of the redirected page is mentioned in Action Link.

Summary

Here, we knew that how to reconfigure an error page in web.config file and show the error of the file not found on an exception page to the end user.

Happy codining

Best of luck.