DOTNET POINT: July 2015

Thursday 30 July 2015

kendo gride example

Tuesday 28 July 2015

How to clear cache in angularjs

for angular

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

myApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {

$httpProvider.defaults.cache = false;

if (!$httpProvider.defaults.headers.get) {

$httpProvider.defaults.headers.get = {};

}

// disable IE ajax request caching

$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';

//.....here proceed with your routes

}]);

for jquery

<script type="text/javascript">

$(function () {

$.ajaxSetup({
cache: false

})

});
</script>

CRUD Operations in MVC with AngularJs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication3.Models;

using System.Data;

namespace MvcApplication3.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

public ActionResult Index()

{

return View();

}

public JsonResult GetAll()

{

using (Database1Entities obj = new Database1Entities())

{

return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);

}

}

public JsonResult GetById(int id)

{

using (Database1Entities obj = new Database1Entities())

{

return Json(obj.EMPs.Single(m => m.EID == id), JsonRequestBehavior.AllowGet);

}

}

public string Add(EMP emp)

{

using (Database1Entities obj = new Database1Entities())

{

obj.Entry(emp).State = EntityState.Added;

obj.SaveChanges();

return "Data Saved.";

}

}

public string Put(EMP emp)

{

using (Database1Entities obj = new Database1Entities())

{

EMP emp1 = obj.EMPs.Single(m => m.EID == emp.EID);

emp1.NAME = emp.NAME;

obj.Entry(emp1).State = EntityState.Modified;

obj.SaveChanges();

return "Data Updated.";

}

}

public string Delete(EMP emp)

{

using (Database1Entities obj = new Database1Entities())

{

EMP emp1 = obj.EMPs.Single(m => m.EID == emp.EID);

obj.Entry(emp1).State = EntityState.Deleted;

obj.SaveChanges();

return "Data Deleted.";

}

}

}

}

1. Module.js : write the following code in it.

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

Service.js : Write the following code in it.

app.service("angularService", function ($http) {

    //get All Eployee

    this.getEmployees = function () {

        return $http.get("/Home/GetAll");

    };

    this.getEmployee = function (employeeID) {

        var response = $http({

            method: "post",

            url: "/Home/GetById",

            params: {

                id: JSON.stringify(employeeID)

            }

        });

        return response;

    }

    this.AddEmp = function (employee) {

        var response = $http({

            method: "post",

            cache: false,

            url: "/Home/Add",

            data: JSON.stringify(employee),

            dataType: "json"

        });

        return response;

    }

    this.PutEmp = function (employee) {

        var response = $http({

            method: "post",

            cache: false,

            url: "/Home/Put",

            data: JSON.stringify(employee),

            dataType: "json"

        });

        return response;

    }

    this.DelEmp=

        function (employee) {

            var response = $http({

                method: "post",

                cache: false,

                url: "/Home/Delete",

                data: JSON.stringify(employee),

                dataType: "json"

            });

            return response;

        }

});

 Controller.js : Write the following code .

app.controller("myCntrl", function ($scope, angularService) {

    $scope.divEmployee = false;

    GetAllEmployee();

    function GetAllEmployee() {

        var getData = angularService.getEmployees();

        getData.then(function (emp) {

            $scope.employees = emp.data;

        }, function () {

            alert('Error in getting records');

        });

    }

    $scope.edit = function (employee) {

        var getData = angularService.getEmployee(employee.EID);

        getData.then(function (emp) {

            $scope.employee = emp.data;

            $scope.EID = employee.EID;

            $scope.NAME = employee.NAME;

        }, function () {

            alert('Error in getting records');

        });

    }

    $scope.save = function ()

    {

        var Employee = {

            EID: $scope.EID,

            NAME: $scope.NAME

        };

        var getData = angularService.AddEmp(Employee);

        getData.then(function (msg) {

            GetAllEmployee();

            alert(msg.data);

            ClearFields();

        }, function () {

            alert('Error in adding record');

        });

    }

    $scope.update = function ()

    {

        var Employee = {

            EID: $scope.EID,

            NAME: $scope.NAME

        };

        var getData = angularService.PutEmp(Employee);

        getData.then(function (msg) {

            GetAllEmployee();

            alert(msg.data);

            ClearFields();

        }, function () {

            alert('Error in adding record');

        });

    }

    $scope.del = function (emp)

    {

        if (confirm('Do you want to delete it.'))

        {

            var getData = angularService.DelEmp(emp);

            getData.then(function (msg) {

                GetAllEmployee();

                alert(msg.data);

                ClearFields();

            }, function () {

                alert('Error in adding record');

            });

        }

    }

    $scope.reset = function ()

    {

        ClearFields();

    }

    function ClearFields()

    {

        $scope.EID = "";

        $scope.NAME = "";

    }

});

view

@{

    ViewBag.Title = "Index";

    Layout = null;

}

<script src="~/Scripts/jquery-1.8.2.js"></script>

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

<script src="~/Scripts/Module.js"></script>

<script src="~/Scripts/Service.js"></script>

<script src="~/Scripts/Controller.js"></script>

<html ng-app="myApp">

<body ng-controller="myCntrl">

    <table align="center">

        <tr><td>EID</td><td><input type="text" ng-model="EID" /></td></tr>

        <tr><td>NAME</td><td><input type="text" ng-model="NAME" /></td></tr>

        <tr><td>&nbsp;</td><td>

            <input type="button" value="Save" ng-click="save()" />

            <input type="button" value="Update" ng-click="update()" />

            <input type="button" value="Reset" ng-click="reset()" />

            </td></tr>

        <tr>

            <td>&nbsp;</td>

            <td>

                <table border="1" cellpadding="0" cellspacing="0" width="100%">

                    <tr><th>EID</th><th>NAME</th><th>UPDATE</th><th>DELETE</th></tr>

                    <tbody ng-repeat="emp in employees">

                        <tr>

                        <td>{{emp.EID}}</td>

                        <td>{{emp.NAME}}</td>

                            <td><a href="#" ng-click="edit(emp)">Edit</a></td>

                            <td><a href="#" ng-click="del(emp)">Delete</a></td>

                        </tr>

                    </tbody>

                </table>

            </td>

        </tr>

    </table>

</body>

</html>

<script type="text/javascript">

    $(function () {

        $.ajaxSetup({

            cache: false

        })

    });

</script>