ASP.NET MVC with AngularJS issue: post request does not trigger redirection

Why is the RedirectToAction not working and the URL does not change to /Home/Second when I make a post request to the Login?

Using AngularJS:

$scope.answer = function(answer) {
  $mdDialog.hide(answer);
  $http({
      method: 'POST',
      url: 'Home/Login',
      data: JSON.stringify({ email: $scope.user.email, password: $scope.user.password })
  });
};

In the HomeController:

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }
    [HttpGet]
    public ActionResult Second()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Login(string email,string password)
    {
        return RedirectToAction("Second");
    }
}

Answer №1

One way to handle redirection is by using AngularJS code within your application. Here's an example:

Include the following JavaScript function in your code:

 $scope.answer = function(answer) {
          $mdDialog.hide(answer);
          var response = $http({
              method: 'POST',
              url: 'Home/Login',
              data: JSON.stringify({ email: $scope.user.email, password: $scope.user.password })
          });

       if(response == "Success")
       {
          $window.location.href = "/Home/Second";
       }

    });

In your controller, define the corresponding method like this:

 public string Login(string email,string password)
 {
        return "Success";
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Attempted to bootstrap Angular multiple times

While developing an app using angularjs, everything functions correctly after loading a web page. However, a message appears on the console saying: WARNING: Tried to load angular more than once. Upon checking the angular.js file, I found this code snippe ...

Exploring the vulnerability in switching an ajax request to another PHP file for potential exploitation clarification

I am currently developing an application that processes an ajax call (using jquery) and provides validated users with an entry token for the website. For instance, if the ajax call is made to checkAuth.php and all other php files are in the same directory ...

Demonstrate the proper implementation of a Stepper component using Material UI in a React.js

I am trying to display a responsive screen using "progressive forms" with React.js and Material Ui. I have implemented the Stepper component for this purpose, but when I click the "Next Button", the button is hidden but the next step content with the text ...

Testing the 'ng-click' event in a directive using Jasmine: a guide

I am looking to experiment with testing the 'ng-click' event in Angular using Jasmine, but I am unsure how to proceed. Here is an excerpt from my directive file (headbarDirective.js): (function () { angular.module('app.widgets.homeHead ...

What is the best method for choosing the parent elements?

I am attempting to create a sidebar that saves the last clicked link in local storage and still displays the collapsed links after the page is reloaded. $(".clickedLink").parent().parent().css('background-color', 'green'); Ca ...

Find all elements within JSON data using lodash.js

Hello friends, I'm dealing with a JSON object: var companies = [ { id: 1, name: "Test Company", admin: "Test Admin" }, { id: 2, name: "Another Company", admin: "Test Admin", country: 'Spain' }, { id: 3, name: "New Company", ad ...

Customizing Material UI: Grouping Tab components within a div container

How can I wrap the children of a Material UI Tabs component in divs? <Tabs value={value} indicatorColor="primary" textColor="primary" onChange={handleChange} > <div> <Tab label="x" /> ...

The class is failing to be applied to the parent div that holds an id starting with the letter x

I have been attempting to assign a class to the parent container when the child element has the 'hidden' class. If not, then a different class should be added. function tagMissions() { if ($('span[id^="mission_participant_new"]').h ...

Creating objects in Angular 2 through HTTP GET calls

Recently, I've delved into learning Angular 2. My current challenge involves making http get requests to retrieve data and then constructing objects from that data for later display using templates. If you believe my approach is incorrect, please feel ...

triggering a function from a child component in React

I am facing a challenge in calling a function from the parent component that is stored in a child component. I understand how to do it from child to parent using props, but unsure about how to achieve it from parent to child. In the example below, you can ...

The tabs in bootstrap appear to be functioning properly, but the data is not displaying as expected

Currently, I am incorporating Bootstrap into my project and I am attempting to include a Twitter Bootstrap tab. I have already added jQuery and bootstrap-tabs.js to my project. Below is the script that I have added: <script> $('#myTab a&apos ...

Issue with $state.go malfunctioning when $location.hash is present

Within my application, I have established various states: $stateProvider .state('home', ...) .state('edit', ...) .state('contact', ...) On the '/edit' state, there is a list of links that facilitate qui ...

I am working with AngularJS and I am having trouble redirecting my pages from the main screen. I am implementing the ng-route module. Can you take a look at my code and provide feedback?

I have encountered an issue with my index.html code. I am unable to load login.html when clicking on the login button. <!doctype html> <html ng-app="instagram"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compitable" co ...

After cloning the variable from props, the Vue 3 Composition API variable becomes undefined

I have a main component containing code and tables, including a modal that is displayed based on a boolean value. The main component features the following modal: <ConfirmPaymentModal ref="confirmPaymentModal" :invoice="markAsPa ...

Navigating through Node and Express on Azure App Service

I'm facing an issue that I am not sure if it is related to Node or Azure App Service, so here's the situation: In my Node/Express app, I have defined two routes: router.get("/users", checkAuthHeader, userController.getUsers); router.po ...

Tips for managing three select menus in AngularJS

Assistance needed for creating a series of interconnected dropdown menus in AngularJS. The functionality should allow the second dropdown to open upon selecting a value in the first dropdown, and the third dropdown to open upon selecting a value in the sec ...

Navigating additional information in D3 Node Link Force diagram

Recently delving into the world of D3, I have been pleasantly surprised by its capabilities and decided to experiment with the Directional Force Layout. My Objective Initially, I successfully created a json object using a for loop to prepare my items for ...

group items into ranges based on property of objects

I've been grappling with this issue for far too long. Can anyone provide guidance on how to tackle the following scenario using JavaScript? The dataset consists of objects representing a date and a specific length. I need to transform this list into a ...

Streamline AngularJS conditional statements within a loop

Is there a more efficient way to handle these conditionals in an angularjs controller loop? angular.forEach(vm.brgUniversalDataRecords, function (value) { switch(value.groupValue2) { case 1: vm.graphSwitch1 = value.groupValue3; ...

What is the best way to extract a specific object from an array containing multiple objects?

Upon entry, there is an array with various objects. A function is needed to convert this incoming array of objects into a single object. The goal is to bring it to the desired form using the function provided. var array = [ { k1:v1 }, { k2:v2 }, ...