Because when I’m treating an error it doesn’t load the _Layout file?

Question

I am doing an error handling using Json Result, when displaying the error message I should display the page formed as it rules in the _Layout file, so the page is loading all blank, does anyone know how to resolve? Below the image of how it is being displayed!

Here is my homeController:

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

namespace ReportandoErro.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Teste()
        {

            var response = new ResponseViewModel();
            try
            {
                throw new Exception("Oops, ocorreu um erro");
            }
            catch (Exception e)
            {
                return ErroCapturado(e);
            }
            return Json(response, JsonRequestBehavior.AllowGet);
        }

        public ActionResult ErroCapturado(Exception ex)
        {
            var response = new ResponseViewModel
            {
                Data = ex.Data,
                Sucesso = false,
                Mensagem = ex.Message
            };

            return Json(response, JsonRequestBehavior.AllowGet);

        }
    }

}

Here my Accountviewmodels:

public class ResponseViewModel
    {
        public object Data { get; set; }
        public bool Sucesso { get; set; }
        public string Mensagem { get; set; }
    }

And here the view called test:

@{
    ViewBag.Title = "Teste";
}
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model ReportandoErro.Models.ResponseViewModel

<h2>Teste</h2>

<script type="text/javascript">
    $(document).ready(function () {
        //debugger;
        gerandoRelatorio();
        function gerandoRelatorio() {
            $.getJSON("Home/Teste", function (response) {

                if (response.sucesso) {
                    console.log(response.data);
                }
                else {
                    alert(data.mensagem);
                }

            }).fail(function (response) {
                //Erro genérico
                alert("Não foi possível processar a sua requisição");

            });
        }
    });
</script>

Answer 1

To render the page ,you need to return one View() in which case you just return Json(response, JsonRequestBehavior.AllowGet). Always create Actions separate for your Ajax requests. To solve, simply create a Action separate only for your request, follow the code:

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

namespace ReportandoErro.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Teste()
        {

            return View();
        }

        public ActionResult Ajax_Teste()
        {
            var response = new ResponseViewModel();
            try
            {
                throw new Exception("Oops, ocorreu um erro");
            }
            catch (Exception e)
            {
                return ErroCapturado(e);
            }
            return Json(response, JsonRequestBehavior.AllowGet);
        }

        public ActionResult ErroCapturado(Exception ex)
        {
            var response = new ResponseViewModel
            {
                Data = ex.Data,
                Sucesso = false,
                Mensagem = ex.Message
            };

            return Json(response, JsonRequestBehavior.AllowGet);

        }
    }

}

I created the Action Ajax_Teste which executes the Ajax request and returns Json.

And inside the Javascript where you execute the request, you will call Ajax_Teste and not Teste:

@{
    ViewBag.Title = "Teste";
}
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model ReportandoErro.Models.ResponseViewModel

<h2>Teste</h2>

<script type = "text/javascript" >
$(document).ready(function () {
//debugger;
gerandoRelatorio();
    function gerandoRelatorio()
    {
        $.ajax({
            method: "GET",
            url: "Home/Ajax_Teste"
        })
        .done(function (response) {
            if (response.Sucesso)
            {
               console.log(response.Mensagem);
            }
            else
            {
                alert(response.Mensagem);
            }
        })
        .fail(function(response) {
            //Erro genérico
            alert("Não foi possível processar a sua requisição");
        });
        }
    }
</script>

Accordingly, the Action Teste returns to its View() and Action Ajax_Teste returns his Json().

Tip of an Asynchronous/Synchronous Request content in MVC standards in that question.

To display the answer you can use what was already in your JS code: console.log(response.Mensagem) remembering that Javascript is Case-sensitive, you were calling if(response.sucesso) the correct is if(response.Sucesso).

If you want to enter in your View, you can manipulate the DOM. Below the <H2>, add the following line:

<p id="mensagem"></p>

And in your Javascript add:

$("#mensagem").text(response.Mensagem);

So he’ll fill in the paragraph with the message.