Wednesday, February 21, 2018

Few things to remember on WebApi


1) Use the Attribute routing which is the best and easy way I guess you can use for routing and the best part is it avoids the confusion.
2) Use the [RoutePrefix("api/v1/new")] attribute on the controller so that you don't need to declare "api/v1/new"  inside each and every method you write.

    public class NewController : ApiController
    {
        [Route("api/v1/new/UserDetails")]
        [HttpGet]
        public HttpResponseMessage UserDetails()
        {
            return Request.CreateResponse(HttpStatusCode.OK, "Hello People.");
        }
    }
AFTER
    [RoutePrefix("api/v1/new")]
    public class NewController : ApiController
    {
        [Route("UserDetails")]
        [HttpGet]
        public HttpResponseMessage UserDetails()
        {
            return Request.CreateResponse(HttpStatusCode.OK, "Hello People.");
        }
    }
3) Never use the Http verbs (GET,POST,PUT,DELETE) in your method names like GetUserDetails instead use UserDetails().
4) Make use of the http tags like so it makes difficult for others to identify which verb you are using for your WebApi

        [Route("UserDetails")]
        [HttpGet] //like this one
        public HttpResponseMessage UserDetails()
        {
            return Request.CreateResponse(HttpStatusCode.OK, "Hello People.");
        }
5) Try to use the HttpResponseMessage as the return type.
6) WebApi by default returns the JSON format.
7) We can also override the RoutePrefix by using (~) symbol for ex-
    [RoutePrefix("api/v1/new")]
    public class NewController : ApiController
    {
        [Route("~/api/v1/old/Data")]
        [HttpGet]
        public HttpResponseMessage Data()
        {
            return Request.CreateResponse(HttpStatusCode.OK, "Hello People.");
        }   
   
     }

Now instead of using the http://localhost:1234/api/v1/new/Data use this http://localhost:1234/api/v1/old/Data because the root has been overridden
8) We can also add the parameters to the route and also give the default values
        [Route("DataByID /{ID}")] //Passing parameter
        [HttpGet]
        public HttpResponseMessage DataByID(int ID = 2) //Default value 2 will be passed if not specified any value.
        {
            if (ID == 1)
            {
                return Request.CreateResponse(HttpStatusCode.OK, "Hello People.");
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest, "No Result Found");
            }

        }

9) We can also add the constraint on the WebApi methods
        [Route("DataByID /{ID:int}")] //The ID must be integer or else the method will not execute
        [HttpGet]
        public HttpResponseMessage DataByID(int ID)
        {
            if (ID == 1)
            {
                return Request.CreateResponse(HttpStatusCode.OK, "Hello People.");
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest, "No Result Found");
            }

        }

Progress Bar in Angular Js


When I was working on the progress bar I went through lots of examples on the net but all of them where create it from scratch. But I found one library on the git hub created by Wes Cruver which is very easy and useful to create the progress bar actually you don't need to do anything extra you just need to add the library and inject into the file and that's it rest of the things will be taken care on its own.
Libraries to add -



GitHub Link -


Dependency Injection -

['angular-loading-bar']

<html data-ng-app="app">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>

    <script>
            var app = angular.module('app', ['angular-loading-bar']);
            app.controller('demoCtrl', ['$scope', '$http', function ($scope, $http) {          
                $http.get('https://rallycoding.herokuapp.com/api/music_albums').then(function (response) {
                    $scope.items = response.data;
                }, function (error) {
                    $scope.items = null;
                })}]);
    </script>

</head>

<body data-ng-controller="demoCtrl">
    <table>
        <tr>
            <th>Title</td>
            <th> Artist</td>
            <th> Url</td>
            <th>Image</td>
            <th>Thumbnail Image</td>
        </tr>
        <tr data-ng-repeat="item in items">
            <td data-ng-bind="item.title"></td>
            <td data-ng-bind="item.artist"></td>
            <td data-ng-bind="item.url"></td>
            <td data-ng-bind="item.image"></td>
            <td data-ng-bind="item.thumbnail_image"></td>
        </tr>
    </table>
</body>
</html>


Self referencing loop detected with type 'System.Data.Entity.DynamicProxies.XXXXXX'

under the edmx.context.cs add the below two lines  inside the edmx constructor

this.Configuration.LazyLoadingEnabled = false;
this.Configuration.ProxyCreationEnabled = false;


public YourDBEntities(): base("name=YourDBEntities")
{
       this.Configuration.LazyLoadingEnabled = false;
       this.Configuration.ProxyCreationEnabled = false;

}

Git Commands

Git Version   To check the git version Git -v       Git Clone To clone the repository, use the following command: Git clone [u...