Integracja ASP.NET WebForms, WebAPI i angularjs

Próbuję dostać mój pierwszy ASP.NET WebForms i angularjs app działa, ale jestem walczą ...Integracja ASP.NET WebForms, WebAPI i angularjs

stworzyłem pusty, nowy ASP Aplikacja internetowa .NET 4.5.1 oraz interfejs WebAPI do miksu. Stworzyłem przykładową stronę dla mojej listy klientów i standardową, opartą na EF6 WebAPI CustomerController : ApiController z wszystkimi zwykłymi metodami CRUD. Przetestowałem ten WebAPI używając Fiddlera i niskiej i oto - otrzymuję moich 8 klientów z powrotem z mojej bazy danych.

Getting to pod angularjs jednak był trochę nieudaną i bardzo frustrujące doświadczenie ....

włączyłem AngularJS z Nuget i wydaje się, że pracował - brak błędów pokazane albo coś, stos angular*.js pliki zrzucone do mojego folderu Scripts.

Utworzono podstawową stronę CustomerList.aspx opartą na stronie wzorcowej, która zawiera znacznik <html lang="en" ng-app="TestAngular">.

Aby uzyskać dane z usługi WebAPI, tworzę moduł kątowy, i stworzył model wewnątrz $scope i stworzył usługę, aby pobrać dane z WebAPI:

Wewnątrz 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); 
     } 
    }; 
});

z tego, co ogranicza Javascript zrozumienia mam, to powinien określić clientService (wywołanie testModule.factory()), który wywołuje mój WebAPI URL, dostaje JSON z powrotem, a następnie funkcja zwrotna spożywcze tych klientów ściągnięte doWłaściwość, i $scope.model.clientCount również należy obliczyć.

My ASPX strona wygląda mniej więcej tak:

<%@ 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>

Więc <div> z data-ng-controller powinien „Połącz”, który DIV z kontrolerem angularjs, należy załadować klientów z zaproszenia WebAPI i zawierają je w model, który następnie zostałby wyrenderowany na stronie ASPX przy użyciu składni wiązania danych ({{ client.Name }} itp.)

Problem polega na tym, że połączenie z WebAPI ma miejsce, a prawi 8 klientów jest zwracanych, jednak po debugowaniu w JavaScript kod, clientCount jest zawsze w użyciu s undefined i strona ASPX pokazuje tylko dwa puste wiersze, które prawdopodobnie odpowiadałyby klientom, którzy zostali odzyskani - ale dlaczego tylko 2, a nie 8?

Jestem całkowicie zagubiony i utknęłam - czy ktoś może zauważyć, co robię źle, czego tu brakuje?

Źródło

2015-03-05 marc_s

Jesteś zdecydowanie na dobrej drodze. W tej chwili problem jest ograniczony do metody clientServicegetAllClients.

Należy return obietnicę i wtedy dane będą łańcuch aż do kontrolera:

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

Można też spojrzeć na linii Count:

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

Przed obietnicy zostanie rozwiązany (a wywołanie zwrotne zostanie wywołane), $scope.model.clients będzie undefined. Tak więc, oczekiwałbym, że ta linia zawiedzie. Ponadto, aby uzyskać licznik tablicy, potrzebujesz length.

Należy ustawić clientCount wewnątrz zwrotnego:

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

Edit:

Zazwyczaj preferowane jest użycie obietnicę zwrócony przez $http. Tak, kontroler będzie nieznacznie zmienić:

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

I wtedy usługa zmieniłaby się:

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

kątowa wykorzystuje obietnic z $q zamiast wywołania zwrotne (dla większości API). Znacznie ułatwiają tworzenie łańcuchów i wyjątków.

Ponadto, ponieważ w tym przypadku, wiesz obchodzenia się z obietnicy z $http, można użyć metody success w sterowniku, a także:

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

success rozpakowuje odpowiedź i przesyła tylko ciało do wywołania zwrotnego.

Źródło

2015-03-05 13:54:36

Dzięki - próbowałem tego - nadal nie widzę niczego użytecznego na ekranie :-(To wciąż jest tak samo jak wcześniej .... –

Właśnie zdałem sobie sprawę, że używasz wywołania zwrotnego zamiast mechanizmu obietnicy. Odpowiedź, aby pokazać, co jest zwykle zrobione –

OK, teraz widzę dane - ale 'clientCount' nadal wydaje się być niezdefiniowana .... –

Integracja ASP.NET WebForms, WebAPI i angularjs

Odpowiedz

Powiązane problemy