Oops! Looks like there was a glitch in the server for the application. The page you are looking for cannot be found. Error code: HTTP 404. Requested URL: /

Question

Oops! Looks like there was a glitch in the server for the application. The page you are looking for cannot be found. Error code: HTTP 404. Requested URL: /

Description: Oops! The page you are trying to access cannot be found. It may have been removed, renamed, or is currently unavailable. Please double-check the URL for any errors.

Requested URL: /UsersPage/undefined

I've got this AJAX script that is supposed to redirect the user to a specific URL:

$.ajax({
    url: '@Url.Action("UsersHome", "UsersPage")',
    type: 'POST',
    data: {
            chosenMood: chosenMood    
          },
    success: function(response) {
            // Deal with the successful response
            console.log('Success:', response);
            // Now let's move the user to the designated URL
            window.location.href = response.redirectUrl;
    },
    error: function(xhr, status, error) {
            // Handling any errors that occur
            console.error('Error:', error);
            // Optionally, display an error message to the user
            alert('An error occurred. Please try again later.');
    }
    });

And here is the controller or destination page:

public ActionResult UsersHome()    
{
    if (User.Identity.IsAuthenticated)
    {
        //Session["ChosenMood"] = chosenMood;
        var redirectUrl = Url.Action("UsersHome", "UsersPage");
        //return Json(new { redirectUrl }, JsonRequestBehavior.AllowGet);
        return View();
    } else
    {
        return RedirectToAction("../Home/Index");
    }
}

javascript c#ajax asp.net-mvc asp.net-ajax

Answer 1

Answer №1

There seems to be a few issues with the code provided.

If you are sending an ajax request to the action method in the controller and it returns a view, you will receive HTML code in the ajax response. In this case, you should send Json data with the redirect URL instead.
Furthermore, after sending the redirectUrl in your json, there may be a 404 error because the success function calls window.location.href with a GET action method Url.Action("UsersHome", "UsersPage"), which could actually be a POST in your controller (assuming).

To make your code work properly, consider modifying it like this:

Controller Code

[HttpGet]
    public ActionResult UsersHome()
    {
        bool auth = true;
        var isAjax = Request.IsAjaxRequest();
        if (auth)
        {
            //Session["ChosenMood"] = chosenMood;
            var redirectUrl = Url.Action("UsersHome", "UsersPage");
            if(isAjax)
                return Json(new { redirectUrl=redirectUrl }, JsonRequestBehavior.AllowGet);

            return View();
        }
        else
        {
                return Json(new { redirectUrl= "../Home/Index" });
        }
    }

Ajax Code

 $.ajax({
url: '@Url.Action("UsersHome", "UsersPage")',
type: 'GET',
        data: {
            chosenMood: "chosenMood"
        },
success: function(response) {
        // Handle the success response
        console.log('Success:', response);
        // Redirect to the received URL
        window.location.href = response.redirectUrl;
},
error: function(xhr, status, error) {
        // Handle errors, if any
        console.error('Error:', error);
        // Optionally, you can display an error message to the user
        alert('An error occurred. Please try again later.');
}
});

NOTE Request.IsAjaxRequest() checks for ajax requests and initially returns Json. Upon window.location.href, it renders the View.

Answer 2

There seems to be a few issues with the code provided.

If you are sending an ajax request to the action method in the controller and it returns a view, you will receive HTML code in the ajax response. In this case, you should send Json data with the redirect URL instead.
Furthermore, after sending the redirectUrl in your json, there may be a 404 error because the success function calls window.location.href with a GET action method Url.Action("UsersHome", "UsersPage"), which could actually be a POST in your controller (assuming).

To make your code work properly, consider modifying it like this:

Controller Code

[HttpGet]
    public ActionResult UsersHome()
    {
        bool auth = true;
        var isAjax = Request.IsAjaxRequest();
        if (auth)
        {
            //Session["ChosenMood"] = chosenMood;
            var redirectUrl = Url.Action("UsersHome", "UsersPage");
            if(isAjax)
                return Json(new { redirectUrl=redirectUrl }, JsonRequestBehavior.AllowGet);

            return View();
        }
        else
        {
                return Json(new { redirectUrl= "../Home/Index" });
        }
    }

Ajax Code

 $.ajax({
url: '@Url.Action("UsersHome", "UsersPage")',
type: 'GET',
        data: {
            chosenMood: "chosenMood"
        },
success: function(response) {
        // Handle the success response
        console.log('Success:', response);
        // Redirect to the received URL
        window.location.href = response.redirectUrl;
},
error: function(xhr, status, error) {
        // Handle errors, if any
        console.error('Error:', error);
        // Optionally, you can display an error message to the user
        alert('An error occurred. Please try again later.');
}
});

NOTE Request.IsAjaxRequest() checks for ajax requests and initially returns Json. Upon window.location.href, it renders the View.

Oops! Looks like there was a glitch in the server for the application. The page you are looking for cannot be found. Error code: HTTP 404. Requested URL: /

Answer №1

Similar questions

error: cannot parse data with Jquery, AJAx, and JSON

Angular 2: The window.crypto.subtle.importKey function functions properly on 'localhost' but encounters issues on an 'ip' address

Having trouble retrieving information from the local API in React-Native

How does Code Sandbox, an online in-browser code editor, manage file storage within the browser?

Passing a value from a prop to a click event that is dynamically created within an SVG Vue.js

React.js Form Validation issue: When using input type "number", the text field remains a single value even after attempting to delete characters with the backspace key

Transitioning from Jquery to vanilla JavaScript or transforming Jquery code into pseudo code

What is the best way to manage errors and responses before passing them on to the subscriber when using rxjs lastValueFrom with the pipe operator and take(1

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

Obtaining the NodeValue from an input of type <td>

Retrieving JavaScript array data following a page reload

What is the method for achieving the equivalent effect of "background-size: cover" on an <img>?

Import data from JSON using JavaScript

Ways to execute a function only once within setInterval

What is the best way to prevent a form from being submitted and conduct validation using JavaScript?

What strategies are typically employed to prevent falling into the callback hell trap when working with error-back asynchronous functions in Node.JS?

Extra Pathway

Unlock the secrets of accessing the router prop in VUE

Ways to receive a response using Jquery Ajax

Creating the dynamic Google Ad AJAX impact with JavaScript