如何使用AngularJs顯示MVC登錄用戶名

我正在使用MVC 5/WebApi 2和AngularJs。我想在我的視圖中顯示登錄的用戶名。我知道如何使用剃鬚刀顯示這些信息，但我怎樣才能用Angular做到這一點？所以基本上我需要用Angular來做到這一點。如何使用AngularJs顯示MVC登錄用戶名

<span >Logged In As: @Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage", @style = "color:white;float:right" })</span>

apiUserController

public class apiUserController : ApiController 
{ 
    // GET api/<controller> 
    public List<ApplicationUser> Get() 
    { 
     using (var context = new ApplicationDbContext()) 
     { 
      List<ApplicationUser> users = new List<ApplicationUser>(); 
      users = context.ApplicationUsers 
       .ToList(); 
      return users; 
     } 

    } 
}

更新

public IHttpActionResult Get() 
    { 

     using (var context = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(new ApplicationDbContext()))) 
     { 

      var user = context.FindById(User.Identity.GetUserId()); 
      var loggedInUser = user.UserName; 
      return Ok(loggedInUser); 
     } 

    }

來源

2014-10-07 texas697

你需要創建一個返回您的用戶信息的服務

angular.module('app').factory('Authentication', function ($resource) { 
    var resource = $resource('/user', {}, { 
     query: { 
      method: 'GET', 
      cache: true 
     } 
    }); 
    return resource.get().$promise; 
});

*請注意，您需要創造和終結無線會使用Web API

發送給您的用戶數據，JSON，一旦你得到它做你就可以在任何控制器使用它（讓我們假設你有一個HomeController中，它可能是一個headercontroller或任何其他）

angular.module('app').controller('HomeController', ['$scope', 'Authentication', function ($scope, Authentication) { 
    $scope.authentication = Authentication; 
}]);

然後用它在你的觀點一樣：

<span >Logged In As: {{authentication.user.username}} </span>

編輯：

你的API控制器英語新uggested也能像

public HttpResponseMessage Get() 
    { 
     var userId = getCurrentUserId(); //something like that 
     using (var context = new ApplicationDbContext()) 
     { 
      ApplicationUser user = new ApplicationUser(); 
      user = context.ApplicationUsers.SingleOrDefault(x=>x.id==userId); 
      return user; 
     } 

    }

嘗試讀取http://www.asp.net/web-api/overview/formats-and-model-binding/json-and-xml-serialization

路由嘗試閱讀這篇文章（我猜你是使用Web API 2）

http://www.asp.net/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2

來源

2014-10-07 15:10:20

所以當你說端點你指的是API控制器？它需要達到應用程序用戶屬性？查看更新後的帖子請 – texas697 2014-10-07 15:28:39

是的，我指的是api控制器，我看了你的例子，但你應該返回單個登錄用戶，而不是一個列表。 – 2014-10-07 15:30:15

k，x.UserName導致一些錯誤。我應該嘗試什麼？謝謝 – texas697 2014-10-07 15:52:43

如果你要作弊有一點，你可以在你的_Layout裏<head>做到這一點：

<script type="text/javascript"> 
    (function(myApp) { 
     myApp.username = "@User.Identity.GetUserName()"; 
     //optional 
     myApp.otherStuff = "@moreMvcStuff"; 
    })(window.myApp = window.myApp || {}); 
</script>

然後開始你的角度應用這樣的：

(function (myApp) { 
    "use strict"; 

    //var app = set up your angular app 

    app.run(["$rootScope", 
     function ($rootScope) { 
      $rootScope.appSettings = { 
       username: myApp.username 
      }; 
     } 
    ]);  

})(window.myApp = window.myApp || {});

你在做什麼是創建一個名爲對myApp窗口上的單一值（或命名爲任何你喜歡的），並把它傳遞到您的IIFE。這使您可以在角度腳本中訪問它，而只能在塊中訪問它。所以如果你想要它堅持下去，你需要把它放在服務或rootScope中。

在app.run塊中，您可以將其粘貼到rootScope或任何您想要的位置。

現在在您的意見中，您可以使用{{appSettings.username}}來顯示它。

我稱之爲「作弊」，因爲它專門用於MVC或webforms，它不是「有角度的方式」。如果您曾經遷移到完全不可知的html/js客戶端（無asp.net mvc）和Web API，您需要執行當前接受的答案。

來源

2015-11-24 00:32:06 Chris

如何使用AngularJs顯示MVC登錄用戶名

回答

相關問題