Base64 Encode and Decode any file in web api.

Base64 Encode and Decode  any file using Postman and web API

namespace
===============================
using System.Net.Http;
using System.Web;
using System.Web.Http;



Action
===============================
        [HttpPost]
        public HttpResponseMessage updateprofileImage()
        {
            HttpResponseMessage response = new HttpResponseMessage();
            var httpRequest = HttpContext.Current.Request;
            string FileName1 = string.Empty;
            string base64 = string.Empty;
            String file64 = string.Empty;
            if (httpRequest.Files.Count > 0)
            {
                HttpPostedFile file = httpRequest.Files[0];
                string fileOriginalPath = string.Empty;
                fileOriginalPath = "~/FileUploaded";
                string strTutorImg = string.Empty;

                if (file != null)
                {
                    string Customerfile;
                    Customerfile = DateTime.UtcNow.Ticks + "-" + 'C' + "-" + file.FileName;

                    var filepath = httpRequest.MapPath(fileOriginalPath);
                    var base63 = httpRequest.MapPath(base64);
                    if (!Directory.Exists(filepath))
                        Directory.CreateDirectory(filepath);
                    filepath = Path.Combine(filepath, System.IO.Path.GetFileName(Customerfile));
                    file.SaveAs(filepath);

                    /*Convert Pdf into base64 formate start here(Encode)*/
                    Byte[] bytes = File.ReadAllBytes(filepath);
                    file64 = Convert.ToBase64String(bytes);
                    /*end here*/

                    /*where you need to save 64 file*/
                    string Base64file;
                    Base64file = DateTime.UtcNow.Ticks + "-" + "base64-" + "decod.pdf";
                    var filepath1 = httpRequest.MapPath(fileOriginalPath);
                    filepath1 = Path.Combine(filepath1, System.IO.Path.GetFileName(Base64file)); 
                    /*end here */

                    /*Convert base64 file into pdf file start here(Decode)*/
                    Byte[] bytes2 = Convert.FromBase64String(file64);               
                    File.WriteAllBytes(filepath1, bytes2);
                    /*End here*/


                    FileName1 = file.FileName;
                    var CustomerImage1 = Customerfile;
                }
            }
            return Request.CreateResponse(HttpStatusCode.OK, file64); ;
        }

Pass Base64 data(Img,pdf,etc) into web API using Postman.

Decode base64 to pdf in web API

Web API:=>


NameSpace
==========================================================
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;

==========================================================

        #region Upload Base64 formate and save into database and folder.
        [HttpPost]
        public HttpResponseMessage updateprofileImage()
        {          
                var httpRequest = HttpContext.Current.Request;  
                string fileOriginalPath = "~/FileUploaded";
                var file64 = httpRequest.Form[0];
           
                string strTutorImg = string.Empty;
           
                if (!string.IsNullOrEmpty(file64))
                {                        
                    /*where you need to save 64 file*/
                    string Base64file;
                    Base64file = DateTime.UtcNow.Ticks + "-" + "base64-" + "decod.pdf";
                    var filepath1 = httpRequest.MapPath(fileOriginalPath);
                    filepath1 = Path.Combine(filepath1, System.IO.Path.GetFileName(Base64file));
                    /*end here */

                    /*Convert base64 file into pdf file start here*/                  
                    Byte[] bytes2 = Convert.FromBase64String(file64);                   
                    File.WriteAllBytes(filepath1, bytes2);
                /*End here*/

                /*if you need to save this base64 in to database so save  this variable value=>   file64*/

            }
            return Request.CreateResponse(HttpStatusCode.OK, file64); ;
        }

        #endregion

IntelliSense for angular in visual studio

There 3 simple steps to get better IntelliSense for angular in visual studio

Step 1: Download AngularJS extension for Visual Studio from the following link. The link displays the script in a web page.

https://raw.githubusercontent.com/jmbledsoe...

Step 2: Copy and paste the script into a new notepad. Name it angular.intellisense.js and save it to the following folder on your computer
C:\Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References
Step 3 : Now drag and drop the following 2 files from Scripts folder onto script.js file
angular.min.js
angular-route.min.js

Visual Studio will automatically add references to the above 2 files in script.js
/// [reference path="angular.min.js" /]
/// [reference path="angular-route.min.js" /]


like this:

/// <reference path="angular.js" />
/// <reference path="angular-route.js" />

  var app = angular.module("demo", ["ngRoute"])

routing in angular js

Routing in Angular js and remove # in URL


Main.js:

  var app = angular
            .module("demo", ["ngRoute"])
            .config(function ($routeProvider, $locationProvider) {
                <!--$routeProvider.caseInsensitiveMatch = true;-->
                $routeProvider
                    .when("/home", {
                        templateUrl: "UI/home.html",
                        controller: "homeController"
                    })
                    .when("/courses", {
                        templateUrl: "UI/courses.html",
                        controller: "coursesController"
                    })
                    .when("/students", {
                        templateUrl: "UI/students.html",
                        controller: "studentsController"
                    })
                   .when("/students/:id", {    <!--using a parameter in routing-->
                         templateUrl: "/UI/studentsdetails.html",
                         controller: "studentsdetailsController"
                     })
                    .otherwise({
                        redirectTo: "/home"
                    })
                $locationProvider.html5Mode(true);
            })
            .controller("homeController", function ($scope) {
                $scope.message = "Home Page";
            })
            .controller("coursesController", function ($scope) {
                $scope.message = "courses Page";            
            })
            .controller("studentsController", function ($scope) {
                 $scope.message = "Student Page";          
             })
           .controller("studentsdetailsController", function ($scope, $routeParams) {
           $scope.message = "Student details Page" + $routeParams.id;  <!--get a parameter value -->       
             }

Index.html :


<!DOCTYPE html>
<html ng-app="demo">
<head>
    <title></title>
<meta charset="utf-8" />
     <base href="/" />      <!--this base href is alwase top of style sheets and js file --> 
    <script src="RoutingApp/angular.js"></script>
    <script src="RoutingApp/angular-route.js"></script>
    <script src="RoutingApp/main.js"></script>
    <link href="RoutingApp/Styles.css" rel="stylesheet" />  

</head>
<body>
    <table style="font-family: Arial">
        <tr>
            <td colspan="2" class="header">
                <h1>
                    WebSite Header
                </h1>
            </td>
        </tr>
        <tr>
            <td class="leftMenu">
                <a href="home">Home</a>
                <a href="courses">Courses</a>
                <a href="students">Students</a>
               <a href="students/1">Students using param</a> <!--pass a parameter in url -->
            </td>
            <td class="mainContent">
                <ng-view></ng-view>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="footer">
                <b>Website Footer</b>
            </td>
        </tr>
    </table>
</body>

</html>


Partial HTML Pages:

home.html:

<h1>{{message}}</h1>

courses.html:

<h1>{{message}}</h1>

studentsdetails.html:

<h1>{{message}}</h1>

student.html:

<h1>{{message}}</h1>
Write a rules in Web config:

<system.webServer>
   <!--Routing URl rules start here-->
  <rewrite>
    <rules>
      <rule name="RewriteRules" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
   <!--Routing URl rules End here-->
  </system.webServer>

Hide and show table column in Angular js

Will discuss ng-hide and ng-show directives in Angular:

Controler:

var app = angular

        .module("myModule", [])

        .controller("myController", function ($scope) {

            var employees = [

                { name: "Ben", gender: "Male", city: "London", salary: 55000 },

                { name: "Sara", gender: "Female", city: "Chennai", salary: 68000 },

                { name: "Mark", gender: "Male", city: "Chicago", salary: 57000 },

                { name: "Pam", gender: "Female", city: "London", salary: 53000 },

                { name: "Todd", gender: "Male", city: "Chennai", salary: 60000 }

            ];

            $scope.employees = employees;

        });

Html:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/angular.min.js"></script> 

</head>

<body ng-app="myModule">

    <div ng-controller="myController">

        <input type="checkbox" ng-model="hideSalary" />Hide Salary

        <br /><br />

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Gender</th>

                    <th>City</th>

                    <th ng-hide="hideSalary">Salary</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="employee in employees">

                    <td> {{ employee.name }} </td>

                    <td> {{ employee.gender}} </td>

                    <td> {{ employee.city}} </td>

                    <td ng-hide="hideSalary"> {{ employee.salary  }} </td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>

If you need to masks (####) and unmasks the Salary column values using ng-hide and ng-show directives, depending on the checked status of the Hide Salary checkbox

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/angular.min.js"></script>

    <script src="Scripts/Script.js"></script>

    <link href="Styles.css" rel="stylesheet" />

</head>

<body ng-app="myModule">

    <div ng-controller="myController">

        <input type="checkbox" ng-model="hideSalary" />Hide Salary

        <br /><br />

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Gender</th>

                    <th>City</th>

                    <th ng-hide="hideSalary">Salary</th>

                    <th ng-show="hideSalary">Salary</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="employee in employees">

                    <td> {{ employee.name }} </td>

                    <td> {{ employee.gender}} </td>

                    <td> {{ employee.city}} </td>

                    <td ng-hide="hideSalary"> {{ employee.salary  }} </td>

                    <td ng-show="hideSalary"> ##### </td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>

how to create a custom filter in Angular

We use the custom gender filter like any other angular built-in filter with a pipe character:

In this custom filter that converts integer values 1, 2, 3 to Male, Female and Not disclosed respectively. gender is the name of the filter.

Controler:

var app = angular
        .module("myModule", [])
        .filter("gender", function () {
            return function (gender) {
                switch (gender) {
                    case 1:
                        return "Male";
                    case 2:
                        return "Female";
                    case 3:
                        return "Not disclosed";
                }
            }
        })
        .controller("myController", function ($scope) {

            var employees = [
                { name: "Ben", gender: 1, salary: 55000 },
                { name: "Sara", gender: 2, salary: 68000 },
                { name: "Mark", gender: 1, salary: 57000 },
                { name: "Pam", gender: 2, salary: 53000 },
                { name: "Todd", gender: 3, salary: 60000 }
            ];

            $scope.employees = employees;
        });

HtmlPage1.html : 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script> 
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees">
                    <td> {{ employee.name }} </td>
                    <td> {{ employee.gender | gender}} </td>
                    <td> {{ employee.salary  }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

single textbox search multiple column like- name and city in angular,

Single textbox search multiple properties - name and city.

ControlerScript.js :

var app = angular
        .module("myModule", [])
        .controller("myController", function ($scope) {

            var employees = [
                { name: "Ben", gender: "Male", salary: 55000, city: "London" },
                { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
                { name: "Mark", gender: "Male", salary: 57000, city: "London" },
                { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
                { name: "Todd", gender: "Male", salary: 60000, city: "London" },
            ];

            $scope.employees = employees;

            $scope.search = function (item) {
                if ($scope.searchText == undefined) {
                    return true;
                }
                else {
                    if (item.city.toLowerCase()
                                 .indexOf($scope.searchText.toLowerCase()) != -1 ||
                        item.name.toLowerCase()
                                 .indexOf($scope.searchText.toLowerCase()) != -1) {
                        return true;
                    }
                }

                return false;
            };
        });

HtmlPage1.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>
    <link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        Search : <input type="text" placeholder="Search city & name"
                        ng-model="searchText" />
        <br /><br />
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Salary</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees | filter: search">
                    <td> {{ employee.name }} </td>
                    <td> {{ employee.gender }} </td>
                    <td> {{ employee.salary  }} </td>
                    <td> {{ employee.city  }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Styles.css

body {
    font-family: Arial;
}

table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    padding: 5px;
}

th {
    border: 1px solid black;
    padding: 5px;
    text-align: left;

}