Pages

Wednesday 21 October 2015

Recurring Deposite Calculator using AngularJs and HTML5

Here I have created Recurring Deposit Calculator using angularjs and HTML5

&lt!DOCTYPE html&gt
&lthtml&gt
&lthead&gt

&ltscript 
src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt
&lt/script&gt

&ltlink rel="stylesheet" 
 href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt

&ltstyle&gt
#tbl ,th, td {
  border: 1px solid grey;

  padding: 5px;
}
#tbl 
{
   width:100%;
}

div 
{
 margin:5%;
 width:500px;
}


.label
{
   background-color: #707070;
}

#tbl tr:nth-child(odd) {
  background-color: #f1f1f1;
}
#tbl tr:nth-child(even) {
  background-color: #ffffff;
}

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

    legend.scheduler-border {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 10px;
        border-bottom:none;
    }
&lt/style&gt

&lt/head&gt

&ltbody&gt

&ltdiv  ng-app="myApp"  ng-controller="rdCtrl"&gt
&ltfieldset class="scheduler-border"&gt
&ltlegend class="scheduler-border"&gtRd Calculator&lt/legend&gt
&ltform name="myForm" step="any" ng-model="formModel" 
ng-submit="Calculate()" &gt 
&lttable&gt
&lttr&gt
&lttd&gtMonthly Installment(R) :&lt/td&gt
&lttd&gt&ltinput type="number" step="any" class="form-control" 
name="rdamount" ng-model="rdamount" required&gt&lt/td&gt
&lt/tr&gt
&lttr&gt
&lttd&gtRate of Interest :&lt/td&gt
&lttd&gt&ltinput type="number" step="any" class="form-control" 
name="interestrate" ng-model="interestrate" required&gt&lt/td&gt
&lt/tr&gt
&lttr&gt
&lttd&gtNumber of Months(n)  : &lt/td&gt
&lttd&gt
&ltselect name="rdperiod" class="form-control" ng-model="rdperiod" &gt 
 &ltoption data-ng-repeat="month in months" value="{{month.value}}"&gt
{{month.text}}
&lt/option&gt
&lt/select&gt
&lt/td&gt
&lt/tr&gt
&lttr&gt
&lttd&gtMaturity : &lt/td&gt
&lttd&gt{{rdmaturity | number:2}}&lt/td&gt
&lt/tr&gt
&lttr&gt
&lttd colspan="2"&gt
&ltinput type="submit" class="form-control btn btn-info" &gt
&lt/td&gt
&lt/tr&gt
&lt/table&gt
&lt/form&gt
 &lt/fieldset&gt
&lt/div&gt
&lt/body&gt
&lt/html&gt

&ltscript&gt

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

app.controller('rdCtrl', function($scope) {
/****Initialisation at start ********/
 $scope.rdamount= 3000;
 $scope.interestrate = 8.7;
 $scope.rdperiod = 3;

$scope.Calculate = function() { 
 $scope.interestrate1=$scope.interestrate/400;
 $scope.quarter=$scope.rdperiod/3;
 $scope.rdmaturity=
 ($scope.rdamount*[ (Math.pow((1+$scope.interestrate1),$scope.quarter))-1])/
( 1- Math.pow((1+$scope.interestrate1),-1/3));
       }

$scope.months=[];

for(i=3;i&lt=120;i=i+3)
$scope.months.push({value:i,text:i});

});
&lt/script&gt

Monday 12 October 2015

CRUD Operation, Searching, sorting and pagination using AngluarJs

This is one simple angularjs Application with  Searching,Sorting, Pagination,
along with CRUD  Operation on simple array of object.

Before doing copy paste kindly add one additional JS file i.e
dirPagination.js.
After that just change the reference address of that file which is 
specified in head section.

To get dirPagination.js Click here. 

<div dir="ltr" style="text-align: left;" trbidi="on">


<!DOCTYPE html>
<html>
<head>

<script 
src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src="D:/Study/anugular/dirPagination.js"></script>
<link rel="stylesheet"
 href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<style>
#tbl ,th, td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
#tbl 
{
   width:100%;
}

div 
{
 margin:5%;
 width:500px;
}

.label
{
   background-color: #707070;
}

#tbl tr:nth-child(odd) {
  background-color: #f1f1f1;
}
#tbl tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

</head>

<body>

<div  ng-app="myApp"  ng-controller="personCtrl">

<!-- Create New Employee -->
<div ng-hide="editorEnabled">
<form name="myForm" ng-model="formModel" ng-submit="addEmployee()" 
novalidate> <table id="tbl">
<tr>
<td>Name: </td>
<td>
<input type="text" name="username" ng-model="name" required>
 
</td>
</tr>
<tr>
<td>Country:</td>
<td><input type="text" ng-model="country" required></td>
</tr>
<tr>
<td>Age:</td>
<td> <input type="number" ng-model="age" required></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="emailid" ng-model="email" required>

</td>
</tr>
<tr>
<td>Gender:</td>
<td><label data-ng-repeat="gender in genders">
    <input name="Gender"  type="radio"  value="{{gender.value}}" 
  ng-model="$parent.personGender" />  {{gender.text}}   
</label></td>
</tr>
<tr>
<td>Department:</td>
<td>
 <select name="dept" ng-model="department" > 
 <option  data-ng-repeat="dept in departments" 
       value="{{dept.value}}">{{dept.text}}</option>
 </select>
<span style="color:red" ng-show="myForm.dept.$dirty && myForm.dept.$invalid">
  <span ng-show="myForm.dept.$error.required">Department is required.</span>
  </span> </span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" >
</td>
</tr>
</table>
</form>
</div>

<!-- Edit Employee -->
<div ng-show="editorEnabled">
<form name="editablemyForm" ng-model="editableformModel" ng-submit="saveEmployee()" 
 novalidate>
<table id="tbl">
<tr>
<td>Name: </td>
<td>
<input type="text" name="editableusername" ng-model="editablename" required>
 
</td>
</tr>
<tr>
<td>Country:</td>
<td><input type="text" ng-model="editablecountry" required></td>
</tr>
<tr>
<td>Age:</td>
<td> <input type="number" ng-model="editableage" required></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" ng-model="editableemail" required></td>
</tr>
<tr>
<td>Gender:</td>
<td><label data-ng-repeat="gender in genders">
    <input name="editableGender"  type="radio"  value="{{gender.value}}"
   ng-model="$parent.editablepersonGender"/>  {{gender.text}}   
</label></td>
</tr>
<tr>
<td>Department:</td>
<td>
 <select name="dept" ng-model="editabledepartment">
 <option   data-ng-repeat="dept in departments" 
       value="{{dept.value}}">{{dept.text}}</option>
 </select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Update" >
<input type="button" value="Cancel"  ng-click="CancelEdit()" >
</td>
</tr>
</table>
</form>
</div>

<br/>

<span class="label">Ordered By: {{orderByField}}, 
Reverse Sort: {{reverseSort}}</span><br><br>
            <label>Search</label>
            <input type="text" ng-model="search" class="form-control" 
         placeholder="Search">
 <b>  Size :</b> <input type="text" ng-model="pagesize" 
class="form-control" placeholder="Size">
 </br>
<table class="table table-bordered">
<thead>
<th>
Edit
</th>
<th> 
 <a href="#" ng-click="orderByField='id';
   reverseSort = !reverseSort">Id
 <span ng-show="orderByField == 'id'">
 <span ng-show="!reverseSort">^</span>
 <span ng-show="reverseSort">v</span></span>
 </a>
</th>
<th> 
 <a href="#" ng-click="orderByField='name';
       reverseSort = !reverseSort">Name
 <span ng-show="orderByField == 'name'">
 <span ng-show="!reverseSort">^</span>
 <span ng-show="reverseSort">v</span></span>
 </a>
</th>
<th>Country</th>
<th>
 <a href="#" ng-click="orderByField='age';
        reverseSort = !reverseSort">
   Age <span ng-show="orderByField == 'age'">
 <span ng-show="!reverseSort">^</span>
 <span ng-show="reverseSort">v</span>
 </span>
          </a>
</th>
<th>Email</th>
<th>Gender</th>
<th>Department</th>
<th>Remove</th>
</thead>
<tr dir-paginate="employee in employees| orderBy:orderByField:reverseSort | 
filter:{name:search || ''}:strict | itemsPerPage:pagesize">
<!-- <tr ng-repeat="employee in employees| orderBy:orderByField:reverseSort | 
filter:{name:search || ''}:strict "> -->
 <td>
      <button class="btn" ng-click="editEmployee(employee.id)">
        <span class="glyphicon glyphicon-pencil"></span>  Edit
      </button>
</td>
<td>{{employee.id}}</td>
 <td>{{employee.name}}</td>
<td>{{employee.country}}</td>
<td>{{employee.age}}</td>
<td>{{employee.email}}</td>
<td>{{getGenderTextFromValue(employee.gender)}} </td>
<td>{{getDepartmentTextFromValue(employee.department)}}</td>
<td><input type="button" value="Remove" class="btn btn-primary" ng-disabled="editorEnabled" ng-click="deleteEmployee(employee.id)"/>
</td>
</tr>
</table>
<!--Pagination Control-->
  <dir-pagination-controls   max-size="pagesize" direction-links="true" boundary-links="true" >
    </dir-pagination-controls>
</div>
</body>
</html>
<script>
var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);

app.controller('personCtrl', function($scope) {
/****Initialisation at start ********/
 $scope.orderByField = 'id';
$scope.reverseSort = false;
$scope.pagesize = 4;
$scope.personGender=3;
$scope.editorEnabled = false;


 $scope.employees = [
        {id:1,name:'Jani',country:'Norway',age:30,email:'aq@b.com', gender:1,department:2},
        {id:2,name:'Hege',country:'Sweden',age:20,email:'aw@b.com',gender:3,department:4},
        {id:3,name:'Kai',country:'Denmark',age:22,email:'ad@b.com',gender:2,department:1},
        {id:4,name:'Raj',country:'India',age:25,email:'aa@b.com',gender:1,department:3},
        {id:5,name:'Rani',country:'Nepal',age:24,email:'as@b.com',gender:2,department:1}
    ];

 $scope.genders =
        [
           {value:1, text: "Male"}, {value:2, text:"Female"}, {value:3, text:"Other"}
        ];

 $scope.departments =
        [
           {value:1, text: "HR"}, {value:2, text:"Admin"}, {value:3, text:"IT"}, {value:4, text:"Finance"}
        ];



/******find gender text from value**********/
 
$scope.getGenderTextFromValue = function(value) { 
  for (i in $scope.genders) {
            if ($scope.genders[i].value==value) {
  return $scope.genders[i].text ;
 }
         }
};



/******find department text from value**********/
 
$scope.getDepartmentTextFromValue = function(value) { 
  for (i in $scope.departments) {
            if ($scope.departments[i].value==value) {
  return $scope.departments[i].text ;
 }
         }
};



  /****** Add a Item to the list**********/
    $scope.addEmployee = function () {

/*finding max id from exiting to generate new max id for new record*/
$scope.maxId=0;
for (i in $scope.employees) {
            if ($scope.employees[i].id >$scope.maxId) {
  $scope.maxId=$scope.employees[i].id ;
 }
}

        $scope.employees.push({
         id:  $scope.maxId+1,
                        name: $scope.name,
                        age: $scope.age,
                        country: $scope.country,
                        email: $scope.email,
                        gender:$scope.personGender,
         department:$scope.department
        });
    $scope.name='';
    $scope.age='';
   $scope.country='';
   $scope.email ='';        
}


/*********Get Item to Edit from list********** */
$scope.id='';
$scope.editEmployee = function(id) {

/*this id is used at the time of sving edited employee records*/
    $scope.id=id;

    $scope.editorEnabled = true;
    $scope.editablename = $scope.employees[id-1].name;
    $scope.editablecountry= $scope.employees[id-1].country;
    $scope.editableage= $scope.employees[id-1].age;
    $scope.editableemail= $scope.employees[id-1].email; 
   $scope.editablepersonGender= $scope.employees[id-1].gender; 
    $scope.editabledepartment= $scope.employees[id-1].department;
}


/*********Save Edited Records***********/
$scope.saveEmployee = function() { 
                $scope.employees[$scope.id-1].name=$scope.editablename;
                $scope.employees[$scope.id-1].age=$scope.editableage;
                $scope.employees[$scope.id-1].country=$scope.editablecountry;
                $scope.employees[$scope.id-1].email=$scope.editableemail;
 $scope.employees[$scope.id-1].gender=$scope.editablepersonGender;
 $scope.employees[$scope.id-1].department=$scope.editabledepartment; 
 
  $scope.editorEnabled = false;
       }


/*******Cacnel edit operation*********/
$scope.CancelEdit=function(){
  $scope.editorEnabled = false;
}


/*********Delete row from list***********/
$scope.deleteEmployee = function (id) {
        for (i in $scope.employees) {
            if ($scope.employees[i].id == id) {
               if( confirm("This Record will get deleted permanently"))
  {
                     $scope.employees.splice(i, 1);                    
 }
            }
        }
    }

});
</script>


</div>

Monday 8 December 2014

Role based Access to MVC4 Action/Controller using Custom Attribute

Custom Attribute in mvc4: Here I created one Custom Attribute named "CustomUserTypeAttribute" which is used to check user type. If user type matches with restricted user type then only this will redirect user to assigned error page. To pass restricted user type I used one string variable named "UserLevel" and implemented it's "get set" property. And then I compared that with the current user level which is stored in session variable.

Custom Attribute class : using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Routing; using System.Web.Mvc; namespace AuthenticationModule.Web.Common { [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = false, Inherited = true)] public class CustomUserTypeAttribute : ActionFilterAttribute { public string UserLevel { get; set; } public override void OnActionExecuting(ActionExecutingContext filterContext) { try { if(HttpContext.Current.Session["user_level"].ToString().Equals(UserLevel)) { RouteValueDictionary redirectTargetDictionary = new RouteValueDictionary(); redirectTargetDictionary.Add("action", "ErrorPage"); redirectTargetDictionary.Add("controller", "Home"); filterContext.Result = new RedirectToRouteResult(redirectTargetDictionary); } } catch(Exception) { throw; } } } }

Using following you can apply this action filter on any action or controller. Here I passed the on string argument named "UserLevel" with value 2 to the action filter.

[CustomUserType(UserLevel = "2")] public ActionResult Add() {

Thursday 4 December 2014

Json size problem in mvc4

Json Size limitation : While using json in mvc4 there is a problem when you transfer data using Ajax with JsonResult. So here is a solution for this. you have to just set the "MaxJsonLength" property to maxvalue.

var jsonResult = Json(result, JsonRequestBehavior.AllowGet); jsonResult.MaxJsonLength = int.MaxValue; return jsonResult;

Tuesday 2 December 2014

Change date formate of Jquery datepicker in mvc4

Following Code is used to change jquery date picker formate to accept the date as "dd/mm/yy" format instead of any other formate.

$(function () { $.validator.addMethod('date', function (value, element) { if (this.optional(element)) { return true; } var ok = true; try { $.datepicker.parseDate('dd/mm/yy', value); } catch (err) { ok = false; } return ok; }); $(".date").datepicker({ dateFormat: 'dd/mm/yy', changeYear: true }); });