integrazione ASP.NET Webforms, WebAPI e AngularJS

Sto cercando di ottenere la mia prima applicazione ASP.NET Webforms e AngularJS installato e funzionante, ma sto lottando ...integrazione ASP.NET Webforms, WebAPI e AngularJS

ho creato un vuoto, nuova ASP .NET 4.5.1 app Webforms e incluso WebAPI nel mix. Ho creato una pagina di esempio per il mio elenco di clienti e una WebAPI standard basata su EF6 CustomerController : ApiController con tutti i soliti metodi CRUD. Ho provato che WebAPI usando Fiddler e basso ed ecco - Ricevo i miei 8 clienti dal mio database.

Ottenere questo in AngularJS però è stato un po 'di un'esperienza riuscita e molto frustrante ....

ho inserito AngularJS da NuGet e che sembra aver funzionato - nessun errore mostrati o qualsiasi cosa, un mucchio di angular*.js file scaricati nella mia cartella Scripts.

Ho creato una pagina di base CustomerList.aspx basata su una pagina principale che include il tag <html lang="en" ng-app="TestAngular">.

Al fine di ottenere i dati dal servizio WebAPI, ho creato il mio modulo angolare, e ha creato un model all'interno del $scope, e ha creato un servizio per recuperare i dati dal WebAPI:

All'interno 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); 
     } 
    }; 
});

Da quello limitato Javascript capire che ho, questo dovrebbe definire una (la chiamata testModule.factory()) clientService che chiama il mio URL WebAPI, ottiene il JSON indietro, e la funzione di callback poi infila i clienti recuperati nellaProprietàe deve essere calcolato anche il $scope.model.clientCount.

pagina My ASPX simile a questa:

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

Così il <div> con la data-ng-controller dovrebbe "collegare" che DIV con il controller AngularJS, dovrebbe caricare i clienti dalla chiamata WebAPI, e li contengono nel modello, che verrà quindi reso alla pagina ASPX utilizzando la sintassi di associazione dati ({{ client.Name }} ecc.)

Il problema è: la chiamata al WebAPI avviene e vengono restituiti gli 8 client corretti, tuttavia, quando eseguo il debug in Javascript codice, il clientCount è sempre s undefined e la pagina ASPX mostra solo due righe vuote che probabilmente corrispondono ai clienti che sono stati recuperati - ma perché solo 2, non 8 ??

Sono completamente perso e bloccato - qualcuno può vedere cosa sto sbagliando, cosa mi manca qui ??

fonte

2015-03-05 marc_s

Sei decisamente sulla buona strada. Al momento, il problema è dovuto al metodo clientServicegetAllClients.

Si dovrebbe return la promessa e poi i dati saranno catena attraverso il controller:

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

Si consiglia inoltre di dare un'occhiata alla linea conteggio:

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

Prima la promessa viene risolto (e viene richiamata la richiamata), $scope.model.clients sarà undefined. Quindi, mi aspetterei che questa linea fallisse. Inoltre, per ottenere contare di un array, è necessario length.

È necessario impostare la clientCount all'interno della richiamata:

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

Edit:

In genere, è favorita per utilizzare la promessa restituito da $http. Quindi, il controller sarebbe un po 'cambiare per:

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

E poi il servizio cambierebbe a:

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

angolare utilizza promesse da $q invece di callback (per la maggior parte apis). Rendono molto più facile il concatenamento e la gestione delle eccezioni.

Inoltre, dal momento che, in questo caso, sai che sta gestendo una promessa da $http, è possibile utilizzare il metodo success nel controller così:

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

success scarta la risposta e invia solo il corpo attraverso il callback.

fonte

2015-03-05 13:54:36

Grazie - provato questo - ancora non vedo nulla di utile sullo schermo :-(E 'sempre lo stesso di prima .... –

Ho appena realizzato che stai usando un callback invece di un meccanismo di promessa. la risposta per mostrare ciò che è in genere fatto. –

OK, ora sto vedendo i dati - ma il 'clientCount' sembra ancora indefinito .... –

integrazione ASP.NET Webforms, WebAPI e AngularJS

risposta

Problemi correlati