[asp.net-mvc]值不分配标签出现在布局页面上从 angularjs 控制器 MVC

发布时间: 2017/3/25 1:44:31
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我指定用户名称标签后登录成功,但它不是赋值。

下面是我的 html

<body class="nav navbar-nav" ng-app="MyApp" ng-controller="AccountsController">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <label for="User_Name" style="color:red;">{{User_Name}}</label>
      </div>  
</body>

下面是我的 AngularJs 控制器

var AccountsController = function ($scope, $http, $location,UserService) {
    $scope.User_Name = "";
    $scope.Login_Click = function (UserName, Password) {
        $http.get('/api/AppAccounts/GetAuthenticateUser', { params: { UserName: UserName, Password: Password } }).
          success(function (data) {
              if (data.length > 0) {
                  UserService.isLogged = true; //Angularjs Service
                  UserService.username = data[0].UserName;
                  $scope.User_Name = data[0].UserName;
                  $location.path('/Three');
              }
              else {
                  UserService.isLogged = false;
                  UserService.username = "";
              }
          }).
          error(function (error) {
              UserService.isLogged = false;
              UserService.username = "";
          });
    }
};

我有我的角应用程序代码在另一个文件和它做工精细,与其他的页面,但每当我试图分配值的标签,是目前在布局页面上,不可以直接分配。什么我,m 做这儿写错了吗?任何帮助,将不胜感谢。

解决方法 1:

当 MVC 呈现您的视图时,它呈现您的网页和布局为一页。你角/客户端 javascript 代码要在呈现的 HTML 上执行。你应该能够显示范围属性的值在任何地方在您的页面,只要它是元素具有内部 ng-appng-controller 设置到它是否正确。我尝试这样做,效果不错。

试试这些来解决这些问题。

请确保你的 ajax 调用工作,成功处理程序执行。

因为你到全称中成功处理程序的属性设置的值,您需要确保,成功处理程序正在执行。您可以检查它由简单地把 alert/console.log 在代码的不同部分。

$scope.Login_Click = function (UserName, Password) {
    $http.get('/api/AppAccounts/GetAuthenticateUser', 
                                 { params: { UserName: UserName, Password: Password } }).
      success(function (data) {
          alert('success');
          console.log(data);
          if (data.length > 0) {
              UserService.isLogged = true; //Angularjs Service
              UserService.username = data[0].UserName;
              $scope.User_Name = data[0].UserName;
              $location.path('/Three');
          }
          else {
              alert('data length is zero');
              UserService.isLogged = false;
              UserService.username = "";
          }
      }).
      error(function (error) {
          alert('ajax failed');
          console.log(error);
          UserService.isLogged = false;
          UserService.username = "";
      });
}

请确保您正在从您的 api 方法返回一个数组。

在成功处理程序中,您正在阅读响应中的第一项的用户名的属性。这意味着,响应应该是一个数组。请确保它是一个 JSON 数组,它看起来像这样。(你可以打开您的浏览器的开发人员工具-> 网络选项卡并查看您的 ajax 调用的结果。

[
  {
    "UserName": "Test"
  }
]

如果您正在发送回一个单一的东西,像 { UserName : "Tes"} 从您 web api 方法时,您应该访问它像

success(function(data){
   $scope.User_Name = data.UserName;
})

请确保您正在使用正确的 http 方法将数据从客户端发送。

在代码中,您使用 $http.get 方法.这意味着它打算向你提供 url/终结点发送 Http GET 方法。请确保您 web api 结束点正常响应为 GET 方法。您可以测试这通过访问直接在浏览器中的 url,并在查询字符串中添加用户名和密码

yoursite.com/api/AppAccounts/GetAuthenticatedUser?UserName=some&Password=test

它不是一个好主意,让你 GetAuthenticated 用户方法作为 GET 方法。我建议更改为 HttpPost 类型和使用 $http.post 从客户端代码。

其他页面中的脚本错误。 如果你有其他脚本错误页面中,您将遇到执行其余的 javascript 代码。打开你的浏览器控制台和其他脚本错误检查并修复那些如果你看到任何。

最后,我建议您可以使用 donefail 方法返回的 $.post/$.get 方法的承诺。

截至 jQuery 1.5,所有 jQuery 的 Ajax 方法返回客户端代码对象的一个超集。这个 jQuery XHR 对象或"jqXHR,"返回的 $.get() 实现诺言接口,给它的所有属性、 方法和行为的承诺 (请参阅推迟对象的详细信息)。(为成功) jqXHR.done()、 (的错误),jqXHR.fail() 和 jqXHR.always() (工程完竣后,是否成功或错误) 方法采取当请求终止时调用的函数参数

$.post( "yoururl", function(res) {
  alert( "success" );
})
.done(function(res) {
    alert( "second success" );
})
.fail(function() {
    alert( "error" );
})
赞助商