Hi mahesh213,
You code is working at our end.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult getAll()
{
NorthwindEntities db = new NorthwindEntities();
try
{
var employeeList = (from obj in db.Employees
select new
{
Id = obj.EmployeeID,
Name = obj.FirstName,
ToDate = obj.BirthDate
}).ToList();
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
catch (Exception exp)
{
return Json("Error in getting record !", JsonRequestBehavior.AllowGet);
}
}
public JsonResult getEmployeeByNo1(string EmpNo)
{
NorthwindEntities db = new NorthwindEntities();
try
{
int no = Convert.ToInt32(EmpNo);
var employeeList = (from obj in db.Employees
where obj.EmployeeID == no
select new
{
Id = obj.EmployeeID,
Name = obj.FirstName,
ToDate = obj.BirthDate
}).ToList();
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
catch (Exception exp)
{
return Json("Error in getting record !", JsonRequestBehavior.AllowGet);
}
}
public string UpdateState1(Employee st)
{
if (st != null)
{
//int no = Convert.ToInt32(st.Id);
//var stateList = db.Dates.Where(x => x.Id == no).FirstOrDefault();
////stateList.STI_Id = st.STI_Id;
//stateList.Name = st.Name;
//stateList.ToDate = st.ToDate;
//db.SaveChanges();
return "State Updated Successfully";
}
else
{
return "Invalid state";
}
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);
app.filter("dateFilter", function () {
return function (item) {
if (item != null) {
return new Date(parseInt(item.substr(6)));
}
return "";
};
});
app.directive("datepicker", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, elem, attrs, ngModelCtrl) {
var updateModel = function (dateText) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateText);
});
};
var options = {
dateFormat: "dd/mm/yy",
showButtonPanel: true,
changeMonth: true,
changeYear: true,
onSelect: function (dateText) {
updateModel(dateText);
}
};
elem.datepicker(options);
}
}
});
app.controller("myCntrl", ['$scope', '$http', '$filter', 'myService', function ($scope, $http, $filter, myService) {
$scope.mahesh = false;
GetAllTerms();
function GetAllTerms() {
var getData = myService.getterms();
getData.then(function (tc) {
$scope.terms = tc.data;
}, function (tc) {
alert("Records gathering failed!");
});
}
function ConvertJsonDateToDateTime(date) {
var parsedDate = new Date(parseInt(date.substr(6)));
var newDate = new Date(parsedDate);
var month = ('0' + (newDate.getMonth() + 1)).slice(-2);
var day = ('0' + newDate.getDate()).slice(-2);
var year = newDate.getFullYear();
return day + "/" + month + "/" + year;
}
$scope.editState = function (state) {
var date = $scope.ToDate;
$scope.mahesh = true;
var getData = myService.getState(state.Id);
getData.then(function (emp) {
$scope.employee = emp.data;
$scope.Id = state.Id;
$scope.Name = state.Name;
$scope.ToDate = ConvertJsonDateToDateTime(state.ToDate);
$scope.Action = "Edit";
$("#myModal").modal('show');
},
function (msg) {
alert(msg.data);
$scope.msg = msg.data;
});
//$scope.apply();
ClearFields();
}
$scope.AddUpdateEmployee = function () {
debugger;
$scope.mahesh = $scope.mahesh ? false : true;
var state = {
EmployeeId: $scope.Id,
FirstName: $scope.Name,
BirthDate: $scope.ToDate,
};
var getAction = $scope.Action;
if (getAction == "Edit") {
state.Id = $scope.Id;
var getData = myService.updateSta(state);
getData.then(function (msg) {
GetAllTerms();
alert(msg.data);
$scope.msg = msg.data;
}, function (msg) {
alert(msg.data);
$scope.msg = msg.data;
});
}
}
}]);
app.service("myService", function ($http) {
//get All employees
this.getterms = function () {
return $http.get("/Home/getAll");
};
// get Employee By Id
this.getState = function (employeeID) {
var response = $http({
method: "post",
url: "/Home/getEmployeeByNo1",
params: {
EmpNo: JSON.stringify(employeeID)
}
});
return response;
}
this.updateSta = function (employee) {
var response = $http({
method: "post",
url: "/Home/UpdateState1",
data: JSON.stringify(employee),
dataType: "json"
});
return response;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
<div class="container">
<br />
<br />
<br />
<div>
<div id="wrapper" class="clearfix" ng-show="mahesh">
<div>
<div>
<div>
<label for="ToDate">
Date
</label>
<input type="text" ng-model="ToDate" name="Todate" datepicker />
</div>
<div>
<div>
<label for="Name">
Name
</label>
<input type="text" name="Name" ng-model="Name" />
</div>
</div>
</div>
</div>
<button ng-click="AddUpdateEmployee()">Submitt</button>
</div>
<div>
<div class="table-responsive ">
<table id="dvData" class="table">
<tr>
<th>
<b>Id</b>
</th>
<th>
<b>Name</b>
</th>
<th>
<b>Date</b>
</th>
<th>
<b>Actions</b>
</th>
</tr>
<tr dir-paginate="state in terms|orderBy:sortKey:reverse|itemsPerPage:10" ng-model="search">
<td>
{{state.Id}}
</td>
<td>
{{state.Name}}
</td>
<td>
{{state.ToDate | dateFilter | date:"dd-MM-yyyy"}}
</td>
<td>
<button type="button" ng-click="editState(state)">
Edit
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
