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;

}

Saturday, November 4, 2017

Pagination in the angular js

Today we are going to see how to add the pagination to the table in angular js application there are many different ways to do it but I do it using the pagination library on GitHub. GitHub is one of the best platforms for the developers there are lots of libraries created by the developers like us we can use them instead of creating out on our own using the existing thing is much better and time-saving
The link to the library is here dirpagination
Lets start
<html data-ng-app="app">

<head>
    <script src="…\angular.min.js"></script>
    <script src="…\dirPagination.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous"/>

    <script >
        var app = angular.module('app', ['angularUtils.directives.dirPagination']);
        app.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {

            $scope.items = [

                {
                    name: "ram",
                    age: "23"
                },
                {
                    name: "vijay",
                    age: "25"

                },
                {
                    name: "sham",
                    age: "24"

                },
                {
                    name: "raju",
                    age: "59"

                },
                {
                    name: "babu j",
                    age: "20"

                },
                {
                    name: "kml r",
                    age: "12"

                }
            ]

        }]);
    </script>

   
</head>

<body>
    <h1 class="page-header" style="text-align:center">Basic Angular App</h1>
    <div class="container" data-ng-controller="MyCtrl">
      <div class="container">
        <div class="row">
            <div class="col-sm-2">Search</div>
            <div class="col-sm-2">
                <input type="text" class="form-control input-sm" data-ng-model="txtSearch">
            </div>
        </div>
    </div>
    <hr>
   
    <div class="container">
            <table class="table table-responsive table-hover table-bordered">
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr dir-paginate="item in items | itemsPerPage: 5 | filter : txtSearch">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </table>
            <dir-pagination-controls></dir-pagination-controls>
          
        </div>
    </div>
</body>

</html>

In the above example we have used the dirPagination.js for the pagination but we need to replace the data-ng-repeat which we use to bind the data to the table to dir-paginate we can also see that we have used the itemsPerPage: 5 and also there are many different options in that directive ex-

<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]
[auto-hide=""]>
</dir-pagination-controls>

In that way, we can add the pagination in angular application for better understanding of the directive go through the documentation 

Git Commands

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