JavaScript

Tuesday 13 October 2015

Create Cross Page Posting in web api through angular javascript

Develop you first web api application Using .Net IDE

   [ActionName("GetValues")]
        public IEnumerable<string> Get(string UserName, string Password)
        {
            return new string[] { "value1", "value2" };
        }

This API return array of string then we consume
using angular javascript

var phoneCateApp = angular.module('PhoneCatApp', ['ngRoute']);

phoneCateApp.controller('PhoneCateController', function ($scope, $http) {
   
    $http({
        url: 'http://localhost:52600/api/Values/GetValues',
        method: "GET",
     
        contentType: "application/json",
        headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
  
        data: '{ UserName: fsdfsda, Password: fsdfsda }'
    }).success(function (data) { $scope.PhoneList = data; });

});

inject the ngRoute in angular javascript

then set the web.config web api

 <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE" />
      </customHeaders>
    </httpProtocol>

in <system.webserver>


Then your application call all your rest service successfully

No comments:

Post a Comment