ASP.NET MVC – Custom 404 page for invalid request

Hello everyone, while developing a web application we never forget to handle an invalid request by displaying Custom 404 page for invalid request. Most of the web developers when creating a web application used to handle an invalid request by redirecting the user to a static custom error page. But this way of handling is not a good practice and is generally outdated. In this article, we will show you how to display Custom 404 page for invalid request in ASP.NET MVC in the proper way with HTTP status code.

Let’s start it by creating a simple MVC web application.

  1. Open Visual Studio and create a new project.
  2. Select Web under Installed > Visual C# section on the left hand side in the pop up window.
  3. Select ASP.NET Web Application and name it ErrorExample. Click OK.
  4. Select MVC and below under Add folders and core references for: Select MVC only.
  5. We will select No Authentication for this project. Click OK and let Visual Studio set up the initial required files and configuration for you.

Project Step 1

Project Step 2

Build the application and run it in your browser. On the URL access any invalid request.

Custom 404 page for invalid request

OOPS! This sort of error should not show up to the visitors. To solve this problem, we usually use to modify web.config file to redirect the user to the error page. Well as I said, this approach is good enough but is depreciated. We must not redirect or say not modify the URL to show up the custom error page. To understand this clearly lets first create a controller with the name error.

Error Controller Added

Add the corresponding view for the action and update the view with the meaningful text.

Error View

Now open the web.config file and add the below code under system.webServer node.

<httpErrors errorMode="Custom" existingResponse="Replace">
      <remove statusCode="404"/>
      <error statusCode="404" path="/Error" responseMode="ExecuteURL"/>
</httpErrors>

It will look like this under system.webServer node.

Web Config

Run the application and access to the invalid request. We achieved what we needed but right now the job is half done. In a real-world application where we have huge visitors to our website, we used to use CDN to save loads on the server or, having analytics added on our website to watch traffics and performance of our website. This CDN or analytics provider works on certain HTTP status code. There we need to avoid sending HTTP status code 200 OK during invalid request so that these providers don’t catch them in their directory. Launch browser developer tools and switch to the network tab, now access our ErrorExample with the invalid request, you will find that the HTTP status code is 200 OK. But we know that for Invalid Request status code is 404. When providers receive this request with HTTP status code 200, it will be added to their directory. To know more about HTTP status code visit this Wikipedia link List of HTTP status codes

Status 200 OK

To fix this issue, open error controller and update the Index action method with the following code.

public ActionResult Index()
{
    Response.StatusCode = 404;
    return View();
}

What we are doing is that, whenever we get a request for the error controller, we update the response code with HTTP status code 404. Let’s build the application and run the application. Access the website with the invalid request and watch the Browser Developer Tools Network tab.

Status 404 Not Found

That’s it, we have achieved what we wanted. So readers, in your next project when you implement the custom error try out this once. Thanks for your time, thanks for reading.

Download Source Code from GitHub: Error Example

Read more of my article on

Share Knowledge

Leave a Reply