Интеграция ASP.NET WebForms, WebAPI и AngularJS

Я пытаюсь получить мою первую ASP.NET WebForms и AngularJS приложение и работает, но я изо всех сил ...Интеграция ASP.NET WebForms, WebAPI и AngularJS

Я создал пустой, новый ASP .NET 4.5.1 webforms, и включил WebAPI в микс. Я создал образец страницы для моего списка клиентов и стандартный WebAPI на основе EF6 CustomerController : ApiController со всеми обычными методами CRUD. Я тестировал этот WebAPI, используя Fiddler, и низкий и созерцать - я возвращаю своих 8 клиентов из своей базы данных.

Как это в AngularJS однако было немного неудачной и весьма удручающим ....

Я включил AngularJS от NuGet и что, похоже, работал - никаких ошибок не показали или что-нибудь, куча angular*.js файлы, сбрасываемые в мою папку Scripts.

Я создал базовую страницу CustomerList.aspx на основе главной страницы, которая содержит тег <html lang="en" ng-app="TestAngular">.

Для того, чтобы получить данные из службы WebAPI, я создал свое Угловое модуль, и создал model внутри $scope и создал сервис для извлечения данных из WebAPI:

Внутри app.js:

var testModule = angular.module('TestAngular', [ ]); 

testModule.controller('clientController', function ($scope, clientService) { 
    $scope.model = []; 
    clientService.getAllClients(function(results) { 
     $scope.model.clients = results; 
    }); 

    $scope.model.clientCount = $scope.model.clients.count; 
}); 

testModule.factory('clientService', function ($http) { 
    var srv = {}; 
    srv._baseUrl = 'http://localhost:56313'; 

    // Public API 
    return { 
     getAllClients: function(callback) { 
      return $http.get(srv._baseUrl + '/api/Customer').success(callback); 
     } 
    }; 
});

Из того, что ограниченно Javascript понимания у меня есть, это должно определить clientService (на testModule.factory() вызов), который вызывает мой WebAPI URL, получает JSON назад, а функция обратного вызова затем набивает те клиент, извлекаемые в $scope.model.clients, а также $scope.model.clientCount.

Моя ASPX страница выглядит примерно так:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomerList.aspx.cs" Inherits="TestAngular.CustomerList" MasterPageFile="~/Site.Master" %> 

<asp:Content runat="server" ID="content" ContentPlaceHolderID="MainContent"> 
    <h2>My customers</h2> 

    <div class="panel panel-default" data-ng-controller="clientController"> 
     We have a total of {{ model.clientCount }} clients in our database table ... 

     <div class="list-group" data-ng-repeat="client in model.clients"> 
      <div class="list-group-item"> 
       <span>{{ client.Name }}</span><br/> 
       <span>{{ client.Name2 }}</span><br/> 
      </div>  
     </div> 
    </div> 
</asp:Content>

Так <div> с data-ng-controller должны «соединиться», что DIV с контроллером AngularJS, необходимо загрузить клиентов от вызова WebAPI, и содержать их в модель, которая затем будет отображаться на странице ASPX с использованием синтаксиса привязки данных ({{ client.Name }} и т. д.)

Ошибка: вызов WebAPI происходит и возвращаются правильные 8 клиентов, однако, когда я отлаживаю Javascript код, clientCount всегда s undefined, а на странице ASPX отображаются только две пустые строки, которые, вероятно, будут соответствовать клиентам, которые были извлечены - но почему только 2, а не 8?

Я полностью потерял и застрял - может ли кто-нибудь определить, что я делаю неправильно, что мне здесь не хватает?

источник

2015-03-05 marc_s

Вы определенно находитесь на правильном пути. На данный момент проблема сводится к методу clientServicegetAllClients.

Вы должны return обещания, а затем данные будут цепи до контроллера:

getAllClients: function(callback) { 
    return $http.get(srv._baseUrl + '/api/Customer').success(callback); 
}

Вы также можете захотеть взглянуть на счетные линиях:

$scope.model.clientCount = $scope.model.clients.count;

Перед обещания (и обратный вызов вызывается), $scope.model.clients будет undefined. Итак, я ожидаю, что эта строка потерпит неудачу. Кроме того, чтобы получить счет массива, вам нужно length.

Вы должны установить clientCount внутри обратного вызова:

clientService.getAllClients(function(results) { 
    $scope.model.clients = results; 
    $scope.model.clientCount = $scope.model.clients.length; 
});

Edit:

Как правило, он выступает использовать обещание, возвращенное $http. Таким образом, контроллер будет несколько изменится:

clientService.getAllClients().then(function(response) { 
    $scope.model.clients = response.results; 
    $scope.model.clientCount = response.results.length; 
});

И тогда сервис изменится на:

getAllClients: function() { 
    return $http.get(srv._baseUrl + '/api/Customer'); 
}

Угловые использует обещания от $q вместо обратных вызовов (для большинства АФИ). Они упрощают цепочки и обработку исключений.

Кроме того, так как в этом случае, вы знаете, вы регулируете обещание от $http, вы можете использовать метод success в контроллере, а также:

clientService.getAllClients().success(function(results) { 
    $scope.model.clients = results; 
    $scope.model.clientCount = results.length; 
});

success разворачивает ответ и посылает только тело до обратного вызова.

источник

2015-03-05 13:54:36

Спасибо - попробовал это - по-прежнему не вижу ничего полезного на экране :-(Он по-прежнему такой же, как и раньше .... –

Я просто понял, что вы используете обратный вызов вместо механизма обещания. ответ, чтобы показать, что обычно делается. –

ОК, теперь я вижу данные - но 'clientCount' по-прежнему кажется неопределенным .... –

Интеграция ASP.NET WebForms, WebAPI и AngularJS

ответ

Смежные вопросы