如何使用 C# 和 Angular js 在视图上显示数据

本文关键字:视图 显示 数据 js 何使用 Angular | 更新日期: 2024-11-08 12:05:06

我有以下控制器:

  public class UserController : BaseApiController
    {
        // GET api/<controller>
        public string Get()
        {
            var currentuser = CurrentUser.Name;
            return currentuser;
        }
    }

当前用户的值 我以这种方式将数据上下文传递给它:

 function getName() {
                var deferred = $q.defer();
                var promise = deferred.promise;
                cachedPromises.currentuser = promise;
                $http.get(baseUrl + 'api/user').success(getSucceeded).error(getFailed);
                return cachedPromises.currentuser;
                function getSucceeded(data) {
                    console.log('data:', data);
                }
                function getFailed(parameters) {
                        console.log("failed", parameters);
                    }
            }

在控制台日志console.log('data:', data);我获取值,为了应用绑定,我必须将此值传递给控制器.js中的范围。为了做到这一点,我以这种方式做了一个控制器。

LogName.$inject = ['$scope', 'datacontext']
    function LogName($scope, datacontext) {
        $scope.name =[];
        datacontext.getName().then(function (currentuser) {
            $scope.name = currentuser;
        });
    }

在视图上,我有以下用于数据绑定的代码:

 <h1 ng-controller="LogName" class="title">{{name}}</h1>

绑定显示为空数组,我不明白出了什么问题.

编辑:当我在控制器上执行控制台登录时:

  datacontext.getName().then(function (currentuser) {
            $scope.name = currentuser;
            console.log('current', currentuser);
        });

视图上不显示任何内容,编译器未到达 datacontext.getName

如何使用 C# 和 Angular js 在视图上显示数据

您的 MVC 控制器返回字符串public string Get()并将$scope.name =[];声明为数组将其更改为应该有帮助$scope.name ='';

并将函数 getName 更改为 :

function getName() {
    var deferred = $q.defer();

    $http.get(baseUrl + 'api/user').success(getSucceeded).error(getFailed);
     return deffered.promise;
    function getSucceeded(data) {
        console.log('data:', data);
        //add this
        deferred.resolve(data);
    }
    function getFailed(parameters) {
        console.log("failed", parameters);
        deferred.reject(parameters);;
    }
     return deffered.promise;
}

你永远不会解决你提供名称的承诺。 向 getSuccess 函数添加解析,向错误函数添加拒绝。

function getSucceeded(data) {
   console.log('data:', data);
   promise.resolve(data);
}
function getFailed(parameters) {
   console.log("failed", parameters);
   promise.reject(parameters);
}

这将向等待承诺结果的函数提供数据。

有两个问题:

首先,你没有解决承诺。您需要使用从服务器返回的数据来解决您的承诺。

其次,结果实际上位于从服务器返回的数据的 results 属性中。在这里,由于您只检索名称,因此应使用以下代码:

function getSucceeded(data) {
   console.log('data:', data);
   deferred.resolve(data.results[0]);
}