如何使用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登录用户名

回答

相关问题