As a newcomer to the world of web development, I find myself struggling with what may be a simple question to others. Despite my efforts, I have hit a roadblock in solving this issue and could really use some guidance.
My current task involves extracting data from an ASP.NET Web API running on my local machine. To accomplish this, I have written a small JavaScript snippet using AngularJS:
function MainController($scope, $http) {
$http.get("http://localhost/DBLayerDLL/api/tablets/1005").
then(function(response) {$scope.data=response;},
function(response){$scope.data=response;});
}
The structure of the HTML page used for this operation is quite straightforward:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="scripts/main.js"></script>
</head>
<body ng-controller="MainController">
<h1>Hello World!</h1>
<div>
<div>Data: {{data}}</div>
</div>
</body>
</html>
Below is an excerpt showing how the controller action is implemented in my Web API:
[RoutePrefix("api/tablets")]
public class TabletsController : ApiController
{
[Route("{ID}")]
[HttpGet]
public TabletRecord GetTablet(int ID)
{
TabletRecord tablet = new TabletRecord();
tablet.LoadFromID(ID);
return tablet;
}
}
The issue arises with the response received from the HTTP request. The output displayed on the page appears incorrect as it shows empty data, status 0, and other misleading information. Strangely enough, when inspecting the request through Fiddler, the response seems to differ significantly:
Being relatively inexperienced in this field, I am at a loss on how to proceed...
- Could there be an error in my JavaScript code?
- Do I need to make adjustments within the HTML page?
- Or is there a specific requirement for my Web API?
Any insights or assistance would be greatly appreciated!