Show a custom 403 error page in ASP.NET MVC 2

Question

I want to show a custom 403 page in my ASP.NET MVC 2 application. I added following to my config file:

<httpErrors>
      <remove statusCode="403" subStatusCode="-1"/>
      <error statusCode="403" path="/403.htm" responseMode="ExecuteURL"/>
</httpErrors>

I am still seeing the default ASP.NET 403 error page. What's wrong?

Answer 1

Add below markup in web.config:

 <customErrors mode="On" defaultRedirect="/error/error">
  <error statusCode="400" redirect="/error/badrequest" />
  <error statusCode="403" redirect="/error/forbidden" />
  <error statusCode="404" redirect="/error/notfound" />
  <error statusCode="414" redirect="/error/urltoolong" />
  <error statusCode="503" redirect="/error/serviceunavailable" />
</customErrors>

Add a view model named ErrorInfo with below code:

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

namespace Gunaatita.ViewModel
{
    public class ErrorInfo
    {
        public string Message { get; set; }
        public string Description { get; set; }
    }
}

Create a controller name ErrorController with below code:

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

namespace Gunaatita.Controllers
{
    [HandleError]
    public class ErrorController : Controller
    {
        public ActionResult Error()
        {
            ErrorInfo errorInfo = new ErrorInfo();
            errorInfo.Message = "An Error Has Occured";
            errorInfo.Description = "An unexpected error occured on our website. The website administrator has been notified.";
            return PartialView(errorInfo);
        }
        public ActionResult BadRequest()
        {
            ErrorInfo errorInfo = new ErrorInfo();
            errorInfo.Message = "Bad Request";
            errorInfo.Description = "The request cannot be fulfilled due to bad syntax.";
            return PartialView("Error", errorInfo);
        }
        public ActionResult NotFound()
        {
            ErrorInfo errorInfo = new ErrorInfo();
            errorInfo.Message = "We are sorry, the page you requested cannot be found.";
            errorInfo.Description = "The URL may be misspelled or the page you're looking for is no longer available.";
            return PartialView("Error", errorInfo);
        }

        public ActionResult Forbidden()
        {
            ErrorInfo errorInfo = new ErrorInfo();
            errorInfo.Message = "403 Forbidden";
            errorInfo.Description = "Forbidden: You don't have permission to access [directory] on this server.";
            return PartialView("Error", errorInfo);
        }
        public ActionResult URLTooLong()
        {
            ErrorInfo errorInfo = new ErrorInfo();
            errorInfo.Message = "URL Too Long";
            errorInfo.Description = "The requested URL is too large to process. That’s all we know.";
            return PartialView("Error", errorInfo);
        }
        public ActionResult ServiceUnavailable()
        {
            ErrorInfo errorInfo = new ErrorInfo();
            errorInfo.Message = "Service Unavailable";
            errorInfo.Description = "Our apologies for the temporary inconvenience. This is due to overloading or maintenance of the server.";
            return PartialView("Error", errorInfo);
        }

        protected override void Dispose(bool disposing)
        {
            base.Dispose(disposing);
        }
    }
}

And update \Views\Shared\Error.cshtml with below markup:

@model Gunaatita.ViewModel.ErrorInfo
@{
    ViewBag.Title = "Problem";
    Layout = "~/Views/Shared/_LayoutSite.cshtml";
}

<div class="middle-container">


    <link rel="stylesheet" href="/Content/css/thankyou.css">
    <!--- middle Container ---->

    <div class="middle-container">
        <div class="paddings thankyou-section" data-moduleid="2050" id="ContactUsPane">
            @if (Model != null)
            {
                <h1>@Model.Message</h1>
                <p>@Model.Description</p>
            }
            else
            {
                <h1>An Error Has Occured</h1>
                <p>An unexpected error occured on our website. The website administrator has been notified.</p>
            }

            <p><a href="/" class="btn-read-more">Go To Home Page</a></p>
        </div>
    </div>
    <!--- middle Container ---->

</div>