Easy Code Stuff: December 2015

Dec 16, 2015

Quick Start To ASP.NET Web API 2

In this article, I will explain how you can use ASP .NET Web API 2. ASP .NET Web API is a framework which provides by .NET Framework. We can use ASP .NET Web API's to create restful services. ASP .NET Web API released with MVC 4. That's a small description about ASP .NET Web API.

Lets start from the beginning. You can either create an empty web api project or by creating asp .net wep application and then adding web api's to it. That's completely depend on your and project style. Sometimes you may want to add api's to existing project. So in this kind of situation you have to add web api's configurations to it. Anyway to develop asp .net web api it won't be an issue.

Lets learn this is easy way first.First we should know how this works. Then it will be easy to add manually.

Lets Start.

Go To File -> New Project.

If Empty Web API Project, Then

Or Else MVC Web API Project

In My Example I Have Created An Empty Web API Project. My Solution Explorer Looks Like Below.

Lets Add A Controller To Our Project. Right Click Controller Folder In Solution Explorer.

Then You Will Get Window Like Below.

No Need to Go To Deep First. Select "Web API 2 Controller with read/write actions". This Will Give You Necessary Methods. After You Click "Add", It Will Ask You To Give A Name For Your Controller. Give What Ever Name You Want. But Make Sure It;'s Ends With Word "Controller". I'm Giving As "DefaultController", Which Automatically Comes. After Giving A Name To Controller Press "Add". You Will Get Your Controller Just Like Below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace QuickStartToWebAPI.Controllers
{
    public class DefaultController : ApiController
    {
        // GET: api/Default
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET: api/Default/5
        public string Get(int id)
        {
            return "value";
        }

        // POST: api/Default
        public void Post([FromBody]string value)
        {
        }

        // PUT: api/Default/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE: api/Default/5
        public void Delete(int id)
        {
        }
    }
}

You Will See By Default, Controller Has Created Five Different Methods. Lets Check Our Web API Is Working Fine. Run The Visual Studio Project. You Will See Your Browser Started A New Tab Like Below.

Don't Worry If Your Getting Something Like This. This Is Because, We Have Not Specify The Web API Yet. Go To Your Browser URL And Call Your Web API Like Below. Just After Your Domain "/api". Then Your Controller Name, But Don't Type The Controller Word Here.

http://localhost:50076/api/Default

Now If You Run You Will Get The Browser Just Like Below.

If You Are Getting This Mean You Are Successfully Calling Your Web API Method. If You Keep Break Pints In All Your Methods In Web API, U=You Will See Its Calling "Get()" Method. In Order To Call The "Get(int id)", Adjust Your URL Like Below. That Means Your Passing A Parameter To Your Web API Controller.

http://localhost:50076/api/Default/2

Hope You Had Good Start With ASP.NET Web API 2. You Can Improve Your Web API By Getting Data From Database. Rather Giving Some Default Values Like Our Example.

Dec 15, 2015

Use Optional Parameters For Methods In C#

In C# You Can Create Methods With Optional Parameters. Which Means, When You Are Calling The Method You Don't Need Pass All The Parameters. If You Want You Can Ignore The Optional Ones. Then Methods Will Take The Defaults Values. Important Thing In Optional Parameter Is, You Have To Give A Default Value To The Optional Parameters.

Lets See How We Can Do This. I Have Create A Simple Console Application. In That Create A Static Method Called "SayHello" Which Takes Two String Parameters As "First Name" And "Last Name".

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Optional_Parameter
{
    class Program
    {
        static void Main(string[] args)
        {
            SayHello("Nifal", "Nizar");
            Console.ReadLine();
        }

        static void SayHello(string firstName, string lastName)
        {
            Console.WriteLine("Hello {0} {1}", firstName, lastName);
        }

    }
}

If You Run This You Will Get The Output In The Console As Below.

Hello Nifal Nizar

Lets Make The "Last Name" Parameter Optional. Simply In The Method Give A Default Value To The "Last Name" Parameter. In My Case I'm Giving Empty String To It. Lets See The Code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Optional_Parameter
{
    class Program
    {
        static void Main(string[] args)
        {
            SayHello("Nifal");
            Console.ReadLine();
        }

        static void SayHello(string firstName, string lastName = "")
        {
            Console.WriteLine("Hello {0} {1}", firstName, lastName);
        }

    }
}

Now Run And See The Output.

Hello Nifal

Same Like This You Can Make More Optional Parameters. Hope You Got The Knowledge Of Optional Parameter.

Creating A Table In AngularJS With Filters

In This Article I'm Going To Explain You Guys About Creating A Table In AngularJS Using Repeat (ng-repeat) Along With Filters. AngularJS Repeat Used To Bind HTML Elements Once for Each Item In An Array Or Object Of Data.

Lets Start From The Bottom. Below Codes Give A Simple Table.

<html>
  <body>
    <table border="1">
      <tr>
         <th>Name</th>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
        <td>158</td>
         <td>Nifal</td>
         <td>25</td>
      </tr>
      <tr>
        <td>122</td>
        <td>Dinesh</td>
        <td>24</td>
      </tr>
      <tr>
        <td>133</td>
        <td>Asjad</td>
        <td>21</td>
      </tr>
      <tr>
        <td>134</td>
        <td>Hudhaifa</td>
        <td>22</td>
      </tr>
      <tr>
        <td>165</td>
        <td>Gowtham</td>
        <td>24</td>
      </tr>
    </table>
  </body>
</html>

Lets See How We Can Create Above Table With AngularJS Code Along With A Data Array Which Contains Array Of Students. First Of All I'm Creating A Controller Which Gives The Students Object Array.

var app = angular.module('myApp', []);
app.controller('StudentController', function ($scope) {
    $scope.Students = [
          { Id: 158, Name: "Nifal", Age: 25 },
          { Id: 122, Name: "Dinesh", Age: 24 },
          { Id: 133, Name: "Asjad", Age: 21 },
          { Id: 134, Name: "Hudhaifa", Age: 22 },
          { Id: 165, Name: "Gowtham", Age: 24 }
      ];
});

Now Lets Use This Controller And Bind It To The Table Using AngularJS Repeat And Expressions.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="StudentController">
      <table border="1">
        <tr>
          <th>Id</th>
           <th>Name</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="Student in Students">
          <td>{{Student.Id}}</td>  
          <td>{{Student.Name}}</td>
          <td>{{Student.Age}}</td>
        </tr>
      </table>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('StudentController', function ($scope) {
            $scope.Students = [
           { Id: 158, Name: "Nifal", Age: 25 },
           { Id: 122, Name: "Dinesh", Age: 24 },
           { Id: 133, Name: "Asjad", Age: 21 },
           { Id: 134, Name: "Hudhaifa", Age: 22 },
           { Id: 165, Name: "Gowtham", Age: 24 }
         ];
        });
    </script>
  </body>

Lets Say, You Want To Print The Row Number In The Table. In Order To Do That You Can Use The Table Index ($index). Just Treat The Index As A Variable And Bind It. Normally Index Starts With Zero. So Add One To It.

1	<td>{{$index + 1}}</td>

Lets Say, You Want To Style The Table By Giving Different Colors To Table Rows. You Can Use $even And $odd To Do That. Use AngularJS If Condition(ng-if) To Do That.

<tr ng-repeat="Student in Students">
  <td ng-if="$odd" style="color:red">{{Student.Id}}</td> 
  <td ng-if="$even" style="color:blue">{{Student.Id}}</td>   
  <td ng-if="$odd" style="color:red">{{Student.Name}}</td>
  <td ng-if="$even" style="color:blue">{{Student.Name}}</td>
  <td ng-if="$odd" style="color:red">{{Student.Age}}</td>
  <td ng-if="$even" style="color:blue">{{Student.Age}}</td>
</tr>

You Can Use Filters As You Wish When You Looping Through It. Lets Say, You Want To Order The Table Data Using Students Age. Use "orderby" Filter.

1	<tr ng-repeat="Student in Students \| orderBy : 'Age' ">

See The Full Code Below, Which Used All The Things We Discussed Above.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="StudentController">
      <table border="1">
        <tr>
          <th></th>
          <th>Id</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="Student in Students | orderBy : 'Age' ">
          <td ng-if="$odd" style="color:red">{{$index + 1}}</td>  
          <td ng-if="$even" style="color:blue">{{$index + 1}}</td>  
          <td ng-if="$odd" style="color:red">{{Student.Id}}</td> 
          <td ng-if="$even" style="color:blue">{{Student.Id}}</td>   
          <td ng-if="$odd" style="color:red">{{Student.Name}}</td>
          <td ng-if="$even" style="color:blue">{{Student.Name}}</td>
          <td ng-if="$odd" style="color:red">{{Student.Age}}</td>
          <td ng-if="$even" style="color:blue">{{Student.Age}}</td>
        </tr>
      </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('StudentController', function ($scope) {
            $scope.Students = [
                { Id: 158, Name: "Nifal", Age: 25 },
                { Id: 122, Name: "Dinesh", Age: 24 },
                { Id: 133, Name: "Asjad", Age: 21 },
                { Id: 134, Name: "Hudhaifa", Age: 22 },
                { Id: 165, Name: "Gowtham", Age: 24 }
            ];
        });
    </script>
  </body> 
</html>

Hope You Enjoyed The Article.

Dec 10, 2015

Binding Data To HTML Drop Down Using AngularJS With Defaults

In AngularJS, You Will Find Few Ways To Create Drop-downs. Lets Start From The Beginning. Lets See How Simple Drop-down Going To Be.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp">
      <span>Customer Name</span>
      <select>
        <option value="1">Nifal</option>
        <option value="2">Dinesh</option>
        <option value="3">Asjad</option>
        <option value="4">Hudhaifa</option>
        <option value="5">Gowtham</option>
      </select>
    </div>
  </body> 
</html>

If You See The following Code In The Browser You Will Get A Simple Drop Down. Lets Use AngularJS To Create The Drop-down. In This Example I'm Going To Show You, Two Different Ways To Do This. First Is By Using "ng-repeat". Lets Start Doing It. In Order To Get The Names I Will Be Using A "ng-controller".

var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
    $scope.Customers = [
          { Id: 1, Name: "Nifal" },
          { Id: 2, Name: "Dinesh" },
          { Id: 3, Name: "Asjad" },
          { Id: 4, Name: "Hudhaifa" },
          { Id: 5, Name: "Gowtham" }
      ];
});

Now Lets Use This Controller And Create Drop-down. In Order To Build The Drop-down I'm Looping Through The "Customers" Array In The "<option>" Tag. In Order To Bind The Value & Text To The "<option>" Tag I'm Using AngularJS Expression.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="CustomerController">
      <span>Customer Name</span>
      <select>
        <option ng-repeat="Customer in Customers" value="{{Customer.Id}}">
          {{Customer.Name}}
        </option >
      </select>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('CustomerController', function ($scope) {
            $scope.Customers = [
                { Id: 1, Name: "Nifal" },
                { Id: 2, Name: "Dinesh" },
                { Id: 3, Name: "Asjad" },
                { Id: 4, Name: "Hudhaifa" },
                { Id: 5, Name: "Gowtham" }
            ];
        });
    </script>
  </body> 
</html>

If You Run The Above Code You Will Get The Drop-down. Now Lets See How We Can Improve Our Drop-down Using AngularJS "ng-options". In This Method We Won't Use "ng-repeat". In The "<select>" Tag It Self We Should Use "ng-options" To Load The Drop-down.

1	<select ng-options="Customer.Id as Customer.Name for Customer in Customers"></select>

If You Run The Above Code You Won't Get The Drop-down. But If You Inspect Element, You Will See Your "<select>" Tag. But You Won't Get Options In It. Even After Using "ng-options", You Have To Specify The "ng-model".

1	<select ng-options="Customer.Id as Customer.Name for Customer in Customers" ng-model="MyCustomer"></select>

Lets See The Full Code.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="CustomerController">
      <span>Customer Name</span>
      <select ng-options="Customer.Id as Customer.Name for Customer in Customers" ng-model="MyCustomer"></select>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('CustomerController', function ($scope) {
            $scope.Customers = [
                { Id: 1, Name: "Nifal" },
                { Id: 2, Name: "Dinesh" },
                { Id: 3, Name: "Asjad" },
                { Id: 4, Name: "Hudhaifa" },
                { Id: 5, Name: "Gowtham" }
            ];
        });
    </script>
  </body> 
</html>

If You Run The Above Code You Will Get The Drop-down. But With A Blank Option Like Below.

This Is Happening Because, "ng-options" Will Check For The "ng-model"s Value. But Its Empty. You Can Overcome By Giving A Value To Your Model In The Controller.

var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
    $scope.Customers = [
         { Id: 1, Name: "Nifal" },
         { Id: 2, Name: "Dinesh" },
         { Id: 3, Name: "Asjad" },
         { Id: 4, Name: "Hudhaifa" },
         { Id: 5, Name: "Gowtham" }
      ];
    $scope.MyCustomer = 3;
});

Hope You Enjoyed The Article.

Check My Next Article About AngularJS Tables.

Dec 2, 2015

Quick Start To AngularJS Controllers

In AngularJS Controllers Are Java Script Objects.Controllers use To Control The Data In AngularJS Application. In Order To Define The Directive Controller We Have Use The "ng-controller".

To Define Controller We Have To Use The Below Directive.

ng-controller="myController"

Lets Start From The Beginning. Below Codes Uses "ng-init" To Define Variables.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-init="FName='Nifal'; LName='Nizar'; Qty=2; Price=100">
        <span>Customer Name: {{ FName+ " " + LName}}</span>
        <br/>
        <span>Invoice Total: {{ Qty * Price}}</span>
    </div>
  </body>
</html>

Lets Use A Controller To Get These Details To Our AngularJS HTML Bindings. I'm Going To Name My "ng-app" As "myApp" And "ng-controller" As "myController". So My <div> Going To Be Like Below.

1	<div ng-app="myApp" ng-controller="myController">

So Lets Create A Our Controller Called "myController". This Is Going To Be In Script Section. According To The Developer Practices, There Are Many Ways To Define Controllers. So Lets Have Simple Way Of It.Now Lets Use The Most Basic Way To Create Controller. It's Very Simple

1
2
3

function myController($scope) {

};

According Above Declaration "myController" Is A Simple Function. But It's Takes "$scope" Object As Parameter. You Can Pass Many More Objects, Like "$http" And All. But Now Will Only Go With "$scope".

"$scope" Is The Application Object In AngularJS, Which Contains The Variables And Methods. Now We Will Add All Our Variables, Which We Have Initialized In The "$scope". So Lets Finish The Codes.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myController">
      <span>Customer Name: {{ FName+ " " + LName}}</span>
      <br/>
      <span>Invoice Total: {{ Qty * Price}}</span>
    </div>
    <script type="text/javascript" >
        function myController($scope) {
            $scope.FName = 'Nifal';
            $scope.LName = 'Nizar';
            $scope.Qty = 2;
            $scope.Price = 100;
        }
    </script>
  </body> 
</html>

Now Run And Happy.

Customer Name: Nifal Nizar
Invoice Total: 200

That Was A One Define Controller. But That Is Not A Good Practice. Lets Do In A More Modular Approach. First Of All We Have To Define The Module. Then We Will Add The Controller To It.

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
});

Now Lets See Another Way Of It. In This Way Will Define Controller Separately And Then Add It To The Application.

var app = angular.module('myApp', []);
function myController($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
};
app.controller('myController', myController);

Now Lets See Another Way Of It. In This Way We Will Create A Variable Called "controllers" And We Add All The Controllers To It. Later We Will Add This Controller Variable To The Application.

var app = angular.module('myApp', []);
var controllers = {};

controllers.myController = function ($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
};

controllers.TvController = function ($scope) {
    $scope.Channel = 'FOX';
};

app.controller(controllers);

Hope You Had Good Start With AngularJS Controllers.

Check My Next Article About AngularJS Drop-downs.

Quick Start With AngularJS Repeat Along With Filters

In This Article I'm Going To Explain You Guys About Using AngularJS Repeat (ng-repeat) Along With Filters. AngularJS Repeat Used To Bind HTML Elements Once for Each Item In An Array Or Object Of Data.

Hope You Have A Simple Idea About AngularJS And ng-init.If You Are New To These Please Click Here Before Start.

Lets Start With Simple AngularJS Code Along With A Data Array Which Contains Array Of Names.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
    </div>
</body>
</html>

Now Lets Bind These Names Into A Un-Ordered List. ng-repeat Will Loop Through The Array Just Like A Simple For Each Loop In JQuery. So Lets Do It. I Will Loop Through All The Names And Bind It Inside The <li> Tag Using AngularJS Expression.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
     <ul>
       <li ng-repeat = "Name in Names">
         {{Name}}
       </li>
     </ul>
   </div>
  </body>
</html>

If You See This In Browser You Will Get The Following Output.

Nifal
Gowtham
Dinesh
Hudhaifa
Sam
Anderson

So We Are Done With ng-repeat. Lets See How We Can Use Filters. Actually What Filters Does Is, Its Return A Subset Of Items From An Array. AngularJS Provides Following Filters To Use.

lowercase : Converts A String To Lower Case.
uppercase : Converts A String To Upper Case.
filter : Selects A Subset Of Items From An Array.
orderby : Order The Array Elements By Using Given Expression.
currency : Formats A Number Into Currency.

Lets Use These Filters. I'm Going To Make All The Names To Upper Case Now By Using Following Expression.

1	{{ Name \| uppercase }}

If You Want To Make It Lowercase Simply Use Replace The "uppercase" With "lowercase".

1	{{ Name \| lowercase }}

Lets See How We Can Use Filters.This Is How We Create Strings In AngularJS. For That I'm Using A Text Field To Enter The Filter Text.

1	Filter Text: <input type="text" ng-model="FilterText">

Lets Apply This Filter To Our Code.

1	ng-repeat = "Name in Names \| filter:FilterText"

Lets See Our Full Code.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    Filter Text: <input type="text" ng-model="FilterText">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
     <ul>
       <li ng-repeat = "Name in Names | filter:FilterText">
         {{ Name | uppercase }}
       </li>
     </ul>
   </div>
  </body>
</html>

If You See This In Browser You Will Get The Following Output.

Hope You Had Good Knowledge About AngularJS Expressions And Variables.

Check My Next Article About AngularJS Controllers.