簡體   English   中英

沒有angular-route的angularjs登錄頁面

[英]Login Page with angularjs without angular-route

我正在嘗試使用angularjs和MVC controller(route)創建一個登錄頁面,但是在這里我不想使用角度路由機制,實際上我想要的是當我單擊login(submit)按鈕時從登錄頁面獲取的信息,然后我的頁面應重定向到另一頁面(主頁)。 基本上,我是將http請求發送到MVC控制器,並且當用戶被識別后,我將通過mvc redirect方法重定向到特定頁面,但是當這種情況發生時,Angular http會收到此響應,因此我有一個問題要替換為整個頁面。 我怎么做。 有人可以幫我嗎 請我根本不想在這里使用角度航線服務。 以下是我的測試環境的代碼。 HTML:

 (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 }) }; } ]); })(); 
 <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> 

[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");
        }

    }

就像我在評論中說的那樣,由於您似乎總是通過MVC控制器在登錄時進行某種重定向(返回登錄或返回首頁),因此您也可以使用form的操作來完成此操作。

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

在index.html中,我正在設置一種基本形式。 我使用get作為一種方法,只是因為我沒有要發布的服務器。 但是您將使用帖子。

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

發生的情況是該表單被提交到url'do_magic.html',瀏覽器將顯示服務器發送的響應內容。

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

我要做的是使用html meta重定向。 在您的情況下,您的服務器可能會為其發送適當的標頭。

獲取表單提交的內容后,瀏覽器將重定向到“ redirected.html”

我的示例和目標問題之間的區別是服務器將執行一些智能處理,而不是(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";
  }
});

我希望這有幫助...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM