Posts

Showing posts with the label AngularJS

Donate

Calling Web API not working in AngularJS using $http service

When calling ASP.NET Web API service inside the solution, I encountered an issue that is 404 not found. Given that this issue persists, I tried adding a forward slash before the url in the Ajax call which works. AngularJS $http({ //url: "EmployeeRoute/GetAll", //404 error url: "/EmployeeRoute/GetAll" , dataType: 'json' , method: 'POST' , data: GetAll, headers: { "Content-Type" : "application/json" } }).then( function (resp) { if ( typeof resp.data === 'object' ) { return resp.data; } else { return $q.reject(response.data); } }, function (err) { return $q.reject(err.data); }); I also make sure that the WebApiConfig.Register method gets executed in Global.asax.cs. Global.asax.cs protected void Application_Start( object sender, EventArgs e) { GlobalConfiguration.Configure(WebApiConfig.Register); }

AngularJS $http service returns html instead of JSON string

Good day! I've been trying to consume an ASP.NET Web Method using AngularJS $http service and all I get from the response is the html page source instead of string data. After investigating and doing some searching, the workaround is to set the responseType to json and pass an empty data to the Web Method given that the Web Method has no parameter. var myapp = angular.module( 'myApp' , []); myapp.controller( 'ctrl' , function ($scope, $http) { $http({ url: "63MakeAjaxCallAndReturnJSONWebService.aspx/HelloWorld" , dataType: 'json' , method: "POST" , responseType: 'json' , data: {}, headers: { "Content-Type" : "application/json;" } }).then( function (response) { $scope.value = response.data.d; }); }); And also declare the Web Method as static. [WebMethod()] public static string HelloWorld() { return "Hello World!" ; }

Disable Button In AngularJS Using ng-disabled On It's First Page Load In ASP.NET MVC

Hello, One might notice that during page load of an ASP.NET MVC application, the button with ng-disabled attribute and have values such as $invalid or $dirty does not disable the button. Thus, this will enable the user to submit the form with empty values to the controller method. In order to disable the button on page load, add $pristine values in the ng-disabled attribute such as the code below. Original Code <input type= "submit" id= "btnAddEmployee" class = "btn btn-primary" value= "Save" ng-click= "Save()" ng-disabled= "AddEmp.fname.$dirty && AddEmp.fname.$invalid || AddEmp.lname.$dirty && AddEmp.lname.$invalid || AddEmp.salary.$dirty && AddEmp.salary.$invalid" /> Modified code with $pristine <input type= "submit" id= "btnAddEmployee" class = "btn btn-primary" value= "Save" ng-click= "Save()" ng-disabled= &qu

$location.path() Method Not Reloading New Data In ASP.NET MVC Web API With AngularJS

Hello, I was trying to integrate AngularJS into a simple ASP.NET MVC Web API application with Save functionality. Basically, when you have finished posting data the next logic will be to redirect the user to the display all page. However, I stumbled into an issue in which the $location service does not reload data. According to the docs,the $location service allows you to change only the URL; it does not allow you to reload the page. So after placing breakpoints in the Api Controller, I noticed that the GetAll() method is called first next is the Save() method. The solution to this dilemma is to transfer the $location.path() method inside the success function so that the Save() method in the Api Controller is executed first. Code With Issue: $location.path() is outside the success function. $scope.Add = function () { $http({ method: "POST" , data: $scope.employee, url: "/api/employees" }) .then( function (response) { $scope.employees = response.data;

Simple Array CRUD Manipulation Using AngularJS Framework

Image
This weekend I decided to create a simple AngularJS CRUD array application. This example was based on Dan Wahlin's AngularJS tutorial. I simply reused the css and js files for simplicity sake. So, let's proceed with the actual scripts and html. Main HTML (Contains the input controls and div with ng-view directive which is the container of the partial view: <div data-ng-controller= "CustomerController" > <h3>CRUD application in AngularJS Array</h3> <hr /> Name:<br /> <input id= "inName" type= "text" data-ng-model= "inputData.name" placeholder= "name" /> <br /> City:<br /> <input id= "inCity" type= "text" data-ng-model= "inputData.city" placeholder= "city" /> <br /> <button class= "btn btn-pr

HTTP Error 403.14 - Forbidden The Web server is configured to not list the contents of this directory (AngularJS)

Recently interested on AngularJS, I started reading Dan Wahlin's AngularJS material and downloaded the samples in Visual Studio 2012. Upon running the code, I encountered an error which is the title of this post. After days of testing, I noticed that the url doesn't change on runtime since each examples are treated as partial views loaded into a main view. This lead me to the right direction which is a solution from Microsoft on enabling defaultDocument in web.config. Web.config: <system.webServer> <defaultDocument enabled= "true" > <files> <add value= "home.html" /> </files> </defaultDocument> </system.webServer> Where home.html is the main html document which the partial views are loaded.

Donate