Question

我正在尝试使用angularjs和MVC控制器（路由）创建一个登录页面但是在这里我不想使用角度路由机制，实际上我想要的是当我点击登录时从登录页面（提交）按钮，然后我的页面应重定向到另一页（主页）。基本上我发送http请求到MVC控制器，当用户被识别，然后我通过mvc重定向方法重定向到特定页面，但是当发生这种情况时，角度http接收到这个响应，我有一个问题，用整页。我怎么做。有人可以帮我吗请不要在这里使用角度路线服务。以下是我的测试环境的代码。 HTML：

＆＃13;

(function() {
  'use strict'
  angular.module("GAiiNSApp").controller("Security", ['$scope', '$http',
    function($scope, $http) {

      $scope.user = {
        UserName: '',
        PWd: ''
      };


      $scope.LoginError = '';

      $scope.Login = function() {
        debugger;

        $http({
          url: '/Security/Account/Login',
          method: 'POST',
          data: JSON.stringify($scope.user),
          header: {
            'content-type': 'application/json'
          }
        }).then(function(res) {
//Here is the problem how to replace the receive content with entire page. how to redirect the page to home on success 
        })
      };

    }
  ]);

})();

＆＃13;

<script src="~/Areas/Security/Controllers/NGSecurity/SecurityCtrl.js"></script>

<div id="LoginPlaceholder" layout="row" ng-controller="Security" style="margin-top:15%;" layout-padding layout-align="center start">

  <form flex="40" layout-margin name="userForm" ng-submit="Login()" novalidate>
    <md-card layout-padding style="background-color:#20735e; border-radius:10px; ">


      <md-card-title-text style="font: 16px; color:white; text-align:center; font-family:  'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
        <span class="md-headline ">GFI LOGIN</span>
      </md-card-title-text>

      <md-content flex="100">
        <br />
        <br />
        <md-input-container layout-gt-xs="row" class="md-block" layout-align="space-between start">
          <label>User Name</label>
          <md-icon style="fill:#20735e;" md-svg-icon="~/Content/myIcons/action/svg/production/ic_account_circle_48px.svg"></md-icon>

          <input name="UserName" ng-model="user.UserName" type="text" ng-required="true">
          <div ng-messages="userForm.UserName.$error" role="alert" multiple>
            <div ng-message="required" class="my-message">You must provide GAiiNSPlus user name to login.</div>

          </div>
        </md-input-container>
        <md-input-container layout-gt-xs="row" class="md-block" layout-align="space-between start">
          <label>Password</label>

          <md-icon style="fill:#20735e;" md-svg-icon="~/Content/myIcons/action/svg/production/ic_vpn_key_48px.svg"></md-icon>
          <input name="pass" ng-model="user.PWd" type="password" minlength="4" md-minlength="4" ng-required="true">
          <div ng-messages="userForm.pass.$error" role="alert" multiple>
            <div ng-message="required" class="my-message">You must provide GAiiNSPlus password to login.</div>
            <div ng-message="pattern" class="my-message">Password must be minimum four digits.</div>
          </div>
        </md-input-container>
        <br />
        <br />
        <md-divider></md-divider>

        <div layout="row" layout-align="end start">
          <md-button type="submit" class="md-icon-float md-block md-raised" ng-disabled="userForm.$invalid">
            Login
          </md-button>
        </div>

        <hr />

      </md-content>
    </md-card>
  </form>


</div>

＆＃13;

[HttpPost]
    public ActionResult Login(secUser U)
    {
        try
        {
            if (Membership.ValidateUser(U.UserName, U.PWd))
            {
                FormsAuthentication.SetAuthCookie(U.UserName, false);
                return RedirectToAction("Index", "Home", new { Area = "Common" });
            }
            else
            {
                TempData["Msg"] = "Login Failed";

                return RedirectToAction("Login");
            }
        }
        catch (Exception ex)
        {
            TempData["Msg"] = "Login Failed" + ex.Message;
            return RedirectToAction("Login");
        }

    }

Answer 1

正如我在评论中所说的那样，因为你似乎总是在你的MVC控制器登录（返回登录或回家）时进行某种重定向，那么你也可以使用表单的动作来完成特技。

https://plnkr.co/edit/ewu83nORY6qYLN7dW6m4?p=preview

在index.html中，我正在设置一个基本表单。我使用get作为一种方法，因为我没有服务器发布到。但是你将使用post。

<form action="do_magic.html" method="get">
  <input type="text" name="id"></input>
  <button type="submit"> submit </button>
</form>

表单会提交给网址＆＃39; do_magic.html＆＃39;和浏览器将显示服务器发送的内容作为响应。

<html>
<head>
<meta http-equiv="refresh" content="0; url=redirected.html" />
</head>
</html>

我做的是，我使用html元进行重定向。在您的情况下，您的服务器可能会为其发送适当的标头。

在表单提交后获取内容后，浏览器将重定向到＆＃34; redirected.html＆＃34;

我的示例与您的目标问题之间的区别在于您的服务器将执行一些智能处理而不是（do_magic.html）

或者，使用window.location，因为它在这里完成： https://plnkr.co/edit/Ck3Hp2g8hJiqNGd9KCBV?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.go_google=function(){
    window.location="test.html";
  }
});

我希望这会有所帮助......

没有angular-route的angularjs登录页面

1 个答案: