Generic CRUD with andgularJs dependency injection

#Controller
public class Result
{
public int Id { get; set; }
public string value { get; set; }
public string info { get; set; }
}
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpDelete] public ActionResult IndexJsonData(string name)
{
var results = new List()
{
new Result { Id = 1, value = “ABC”, info = “ABC” },
new Result { Id = 2, value = “JKL”, info = “JKL” }
};
return Json(results, JsonRequestBehavior.AllowGet);
}

}

#Index

<div>
    Hello index
    <div ng-app="app" ng-controller="createCategoryController">
        <ul ng-repeat="x in records">
            <li>
                {{x.Id}}
            </li>
        </ul>
    </div>
</div>
<script>
    // create angular app
    var app = angular.module('app', []);
    // create angular controller and inject service
    app.controller('createCategoryController', function ($scope, crudService) {
        var url = '/Home/IndexJsonData';

        var result = {};
        result.name = 'akash';
       
        crudService.delete(url, result).then(function (resp) {
            $scope.records = resp.data;
        });
    });
    app.service("crudService", function ($http) {
        //get data
        this.get = function (url) {
            var response = $http({
                method: "GET",
                url: url
            });
            return response;

        };
        // Save
        this.post = function (url,myData) {
            console.log(url + '->' +myData);
            var response = $http({
                method: "post",
                url: url,
                data: JSON.stringify(myData),
                dataType: "json",
                headers: { 'Content-Type': 'application/json;charset=UTF-8' }
            });

            return response;
        };
        //update
        this.put = function (url, myData) {
            // console.log(category);
            var response = $http({
                method: "PUT",
                url: url,
                data: JSON.stringify(myData),
                dataType: "json",
                headers: { 'Content-Type': 'application/json;charset=UTF-8' }
                
            });

            return response;
        };
        //Delete Employee
        this.delete = function (url, myData) {
            var response = $http({
                method: "DELETE",
                url: url,
                data: JSON.stringify(myData),
                dataType: "json",
                headers: { 'Content-Type': 'application/json;charset=UTF-8' }
                
            });
            return response;
        };
    });
</script>

<div>

Hello index

<li>

</li>

</ul>

</div>

// create angular app

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

// create angular controller and inject service

app.controller('createCategoryController', function ($scope, crudService) {

var url = '/Home/IndexJsonData';

var result = {};

result.name = 'akash';

crudService.delete(url, result).then(function (resp) {

$scope.records = resp.data;

});

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

//get data

this.get = function (url) {

var response = $http({

method: "GET",

url: url

});

return response;

};

// Save

this.post = function (url,myData) {

console.log(url + '->' +myData);

var response = $http({

method: "post",

url: url,

data: JSON.stringify(myData),

dataType: "json",

headers: { 'Content-Type': 'application/json;charset=UTF-8' }

});

return response;

};

//update

this.put = function (url, myData) {

// console.log(category);

var response = $http({

method: "PUT",

url: url,

data: JSON.stringify(myData),

dataType: "json",

headers: { 'Content-Type': 'application/json;charset=UTF-8' }

});

return response;

};

//Delete Employee

this.delete = function (url, myData) {

var response = $http({

method: "DELETE",

url: url,

data: JSON.stringify(myData),

dataType: "json",

headers: { 'Content-Type': 'application/json;charset=UTF-8' }

});

return response;

};

});

</script>

#Web.config .By default MVC5 does not allow PUT and DELETE request .So Enable it in web.config

 <system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>

<system.webServer>

</handlers>

</system.webServer>

Leave a Reply Cancel reply