ASP.NET MVC error page content inside JQuery populated DIV

Question

I have a pagination control that refreshes a DIV via some JQuery Ajax, however if and when an error occurs say if the page crashes because it couldn't connect to the database or some other reason. My default error page gets displayed inside that DIV instead of the results..

So my question is how do you make it so that doesn't happen, that when the error occurs that it re-routes the user to the error page instead of just refreshing the DIV with the contents of the error page?

Update: I am just doing a simple

$("#PagerContainer").load($(this).attr("href"));

On a link click event handler.

What I need it to do is do full redirect to the error page instead of putting the contents into the DIV

The error is trapped from the Global.Aspx from the Application_Error

Another Update: Where this is happening isn't actually an ajax post it is a normal form submit from with in a modal... What would I do in that case.

Answer 1

Look at the documentation for JQuery.ajax(), which has support for doing different things depending on the status code of the request.

However, you might need to do some checking in your controller action for ajax calls too - there's a property (well, actuallly a method that returns boolean...) on the Request object called IsAjaxRequest() or something, that can help you return different things depending on if the request was made with ajax or not.

Answer 2

Instead of the code you posted do something like

var theUrl = $(this).attr("href");

$.ajax({
  type: "GET", 
  url: theUrl,
  success: function(data) { $("#PagerContainer").html(data); /*This will insert the HTML returned from the server */  },
  error: function(data) { alert('I encountered an error. I will NOT insert any HTML'); } 
}); 

As you can probably guess, the function named 'success' will be called if a positive response is received from the server (HTTP Status 200). If an error code is received, the function named 'error' will be executed.