2015-05-05 6 views
5

Ich bin ziemlich neu in C# und ich bin völlig ratlos, was soll ich als nächstes tue Eingaben von einem Benutzer zu verarbeiten innerhalb einer Eingabeform I mit Bootstrap und Html zusammen mit einem erstellt habe Winkel js Controller.Controller für Web API, RESTful Web Methoden. (Mit kantigen)

jedes Mal, wenn ich versuche, für meinen api meiner Get-Methoden zurückzukehren Werte mit, meines ganzen Controller bricht.

Ich habe so viele Tutorials und know-hows über REST-api Web-Methoden gelesen und ich fange an, mich viel zu viel zu verwirren und darüber nachzudenken, weil ich verstehe, dass es ein einfacher Prozess ist.

Hier ist der Code für meinen Controller unten.

public class FeedbackController : ApiController 
    { 
     // GET: api/Feedback 
     public IEnumerable<string> Get() 
     { 
      return new string[] { "value1", "value2" }; 
     } 

     // GET: api/Feedback/ 
     public string (Feedback id); 
     { 

     } 

     // POST: api/Feedback 
     public void Post([FromBody]Feedback value) 
     { 

     } 

     // PUT: api/Feedback 
     public void Put([FromBody]Feedback value) 
     { 
      var test = value.FeedbackRating; 
     } 

     // DELETE: api/Feedback/ 
     public void Delete(Feedback id) 
     { 
     } 
     public string post([FromUri]Feedback value) 
     { 
      return "Put returning: " + value; 
     } 

// Winkel js commonModule.controller ('feedbackController' [ '$ Umfang', '$ modal', '$ timeout', 'AuthenticationService', Funktion ($ Umfang, $ modal, $ Timeout, AuthenticationService) {

 var init = function() { 
      $scope.feedbackPopup(); 
     } 

     $scope.feedbackPopup = function() { 

      var modalInstance = $modal.open({ 
       templateUrl: '/Scripts/app/common/views/popup.tpl.html', 
       resolve: { 

       }, 
       controller: function ($scope, $modalInstance) { 

        $scope.close = function() { 
         $modalInstance.close(); 
        }; 

        $scope.submitFeedback = function() { 
         $scope.feedback = { 

         FeedbackRating: 1, 
          FeedbackSubject: 1, 
          FeedbackUpload: 1, 
          FeedbackDescription:1 

         }; 

         authenticationService.submitFeedback($scope.feedback).then(
         // Success Handler 
         function (result) { 
          $modalInstance.close(); 
          $scope.message = "Feedback submitted"; 
          $timeout(function() { 
           $scope.message = ""; 
          }, 3000); 
         }, 
         // Failure Handler 
         function() { 
          $scope.message = "Error updating specialization"; 
         }); 
        } 
       } 
      }); 
     } 

     init(); 

     }]); 
    })(); 

Feedback-Klasse

{ 
    public class Feedback 
    { 
    public int FeedbackRating { get; set; } 
    private string EncryptedHexPuid { get; set; } 
    public string FeedbackDescription { get; set; } 
    public string FeedbackSubject { get; set; } 
    } 
} 
+0

Web-Aufbau Können Sie Ihre Angular Controller-Code posten? Speziell Ihr '$ http'-Aufruf, aber vorzugsweise mehr – azium

+0

Wenn Sie sagen" jedes Mal, wenn ich versuche, Werte mit meinen Get-Methoden für meine API zurückzugeben, bricht mein gesamter Controller. "Meinst du deinen angular.js-Controller, der $ macht http Anruf oder meinst du deinen wep api-Controller, der die Anfrage bearbeitet? – seangwright

+0

Wenn Sie Ihre API-URLs im Browser treffen, erhalten Sie die erwartete Antwort? – azium

Antwort

1

Hier sind die wichtigen Teile der Einrichtung eines App Angularjs und Asp.Net Web Api up

index.html

<!doctype html> 
<html class="no-js" lang="" ng-app="demo"> 
<head> 
    <meta charset="utf-8"> 
    <base href="/"> 
</head> 
<body ng-controller="MainController as vm'> 
    <h1>Demo</h1> 
    <div>{{vm.value[0]}}</div> 
    <div>{{vm.value[1]}}</div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
    <script src="js/app/app.js"></script> 
</body> 
</html> 

app.js

(function() { 
    'use strict'; 

    var app = angular.module('demo', []); 

    app.config(config); 

    function config($locationProvider, $routeProvider) { 
     $locationProvider.html5Mode(true); 
    } 

    var controller = angular 
     .module('demo') 
     .controller('MainController', MainController); 

    function MainController($http) { 
     var vm = this; 
     // Here localhost is where your asp.net web api server is serving from 
     // The /api/feedback is the url that the FeedbackController 
     // in your asp.net web api project answers requests to 
     // It returns a json array of two strings 
     $http.get('http://localhost:12312/api/feedback'). 
      success(function (data, status, headers, config) { 
       console.log("Success: " + data); 
       vm.values = data; 
      }). 
      error(function (data, status, headers, config) { 
       console.log("Error: " + data); 
       vm.error = data; 
}()); 

Hier ist FeedbackController.cs

public class FeedbackController : ApiController 
{ 
    // GET: api/Feedback 
    public IEnumerable<Feedback> Get() 
    { 
     return new Feedback[] { new Feedback(), new Feedback() }; 
    } 

    // GET: api/Feedback/5 
    public Feedback Get(int id) 
    { 
     return new Feedback(); 
    } 

    // POST: api/Feedback 
    public IHttpActionResult Post([FromBody]Feedback value) 
    { 
     return Ok(value); 
    } 

    // PUT: api/Feedback/5 
    public IHttpActionResult Put(int id, [FromBody]Feedback value) 
    { 
     return Ok(value); 
    } 

    // DELETE: api/Feedback/5 
    public void Delete(int id) 
    { 
    } 
} 

Hinweis I IHttpActionResults von meinem Posten zurückkehre und Methoden Put. Es gibt passendere Ergebniscodes, die für diese Aktionen zurückgegeben werden, aber das bringt Sie weiter.

Hinweis: Ich habe diesen Code aus getestet und es funktioniert alles einwandfrei, wenn der api-App mit der asp.net web api Vorlage in Visual Studio 2013

+0

Das ist richtig in meinem Code kompiliert! Ich glaube, mein Problem war, dass ich diese nicht vollständig verstanden habe. Das war eine große Hilfe, welche Schritte sollte ich beim nächsten Mal einplanen, um Verwirrung zu vermeiden? – Royalgambino

+1

@Royalgambino Ich würde empfehlen, durch die Web-API-Tutorials (http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api) zu gehen. Dieses Buch (http://www.apress.com/9781484201107) hat mir auch geholfen, dieses Framework zu verstehen, das aus einem MVC-Hintergrund stammt. Dieser Kurs über MVA (http://www.microsoftvirtualacademy.com/training-courses/web-api-design-jump-start) ist ziemlich gut darin, die Grundlagen von HTTP-Anfragen/Antworten in Web-API zu behandeln. Nur wissen, REST wird mit Konzepten helfen, aber nicht Syntax und Ausführung mit einer asp.net-Anwendung. Das oben genannte wird mit denen helfen. – seangwright

0

basiert einfach auf den begrenzten Informationen, die Sie zur Verfügung gestellt haben, hier ist ein Beispiel Winkel servic e, die die Werte von Ihrem asp.net Controller erhalten wird:

angular.module('MyModule', []) 
    .service('feedbackService', ['$http', function($http){ 
     this.getFeedback = function(){ 
       return $http.get('/api/Feedback'); 
     } 
}]); 

angular.module('MyModule',[]) 
    .controller('pageCtrl', ['$scope','feedbackService', function(scope, feedbackService){ 
      $scope.$watch('someObj.someProperty', function(){ 
       feedbackService.getFeedback() 
       .then(function(res){ 
          // Success 
        }, 
        function(err) { 
          // error 
        } 
       ); 
      } 
}]); 

In Anbetracht dieser ein REST-API ist, möchten Sie vielleicht $ resource statt $ http verwenden, da es intuitiv ist, wenn mit RESTful Services arbeiten. Weitere Details:

https://docs.angularjs.org/api/ngResource/service/ $ resource

+0

Also nehme ich an, das Problem ist mit meinen eckigen Methoden und nicht meine C#? – Royalgambino

+0

Hängt davon ab, wenn Sie eine Ausnahme-Server-Seite bekommen, wenn Ihr Ajax-Anruf ausgeht (überprüfen Sie die Netzwerk-Registerkarte in den Browser-Dev Tools gibt einen Fehlerstatus von 500/404/etc). Wenn Sie einen 500-Fehler erhalten, haben Sie ein Problem mit Ihrem ASP.net-Code. Wenn Sie einen 404 erhalten, haben Sie wahrscheinlich ein Routing-Problem oder haben die falsche URL in Ihrem eckigen Code. Wenn Sie keine Anfragen sehen, suchen Sie nach JavaScript-Fehlern, die darauf hinweisen, dass Ihr eckiger Code das Problem ist. –