[英]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.