VolcovMeter VolcovMeter - 4 months ago 26
AngularJS Question

How to redirect pages in ASP MVC using AngularJS?

I went through the process of starting a new ASP.NET MVC no-user authentication process, and have already began integrating AngularJS with C# code.

My

_ViewStart.cshtml
uses
_Layout.cshtml
to
@RenderBody()
for each of my Views found under Views->Home. I have my two views,
Index.cshtml
and
SignUp.cshtml
.

In the Index partial view, I have a form that has an action controlled by this AngularJS function:

.controller('LoginController', function ($scope, $location, LoginService) {
$scope.LoginData = {
CID: '',
Email: ''
};

$scope.Login = function ($window) {
$scope.Submitted = true;
if ($scope.IsFormValid) {
LoginService.GetUser($scope.LoginData).then(function (d) {
if (d.data.CID != null) {
loginCID = d.data.CID;
loginEmail = d.data.Email;
$scope.Message = "Successfully logged in. Welcome " + d.data.CID;
$location.path("/Home/SignUp");
}
else {
alert("Invalid Creds");
}
});
}
};
})


I've omitted in included any extra code that wasn't entirely necessary for this question so extra variables/factories/services have been excluded. The code all works except for this line:

$location.path("/Home/SignUp");


Once the form is filled out,
$scope.Message
changes to what's in the if statement, and the URL changed from
http://localhost:61660/
to
http://localhost:61660/Home/SignUp
But the partial view for Index still shows. Meaning, I'm still seeing
Index.cshtml
being rendered in the body and not
SignUp.cshtml
. How can I change this to actually redirect?

Answer

Try this approach instead of $location.path("/Home/SignUp"):

window.location.pathname = 'Home/SignUp';

It is caused, because angular intercepts $location's redirections and process them by means of own's routing infrastructure, preventing your's expected behavior.

Comments