I am programing a CRUD application. The add and edit do not want to work properly. For Adding, it shows me the successful message that the row is added, but nothing added in reality in my database. For Edit, I have a NullReferenceException after he tries to find the reclamation by his id :
In Debug mode, I can see that ng-model is doing his job, the add or edit modifications are take in account.
Here is my code :
reclamations-controller.js :
(function () {
'use strict';
angular
.module('app')
.controller('ReclamationsController', function ($scope, $http) {
$scope.Reclamations = [];
$scope.Reclamations.RecTitle = "";
$scope.Reclamations.RecDescription = "";
$scope.Reclamations.RecStatus = "";
$scope.Reclamations.RecResponsible = "";
$scope.Reclamations.RecComment = "";
// Popup variables
$scope.showModal = false;
$scope.buttonClicked = "";
$scope.toggleModal = function (btnClicked) {
$scope.buttonClicked = btnClicked;
$scope.showModal = !$scope.showModal;
};
// Export Data to Excel file
$scope.Export = function () {
$("#tblReclamations").table2excel({
filename: "Reclamations.xls",
exportOptions: {
columns: [1, 2]
}
});
}
$scope.showAddAndEditModal = false;
$scope.showAddAndEditModalFunction = function () {
if ($scope.showAddAndEditModal == false) {
$scope.showAddAndEditModal = true;
}
else {
$scope.showAddAndEditModal = false;
}
};
$scope.showImportModal = false;
$scope.showImportModalFunction = function () {
if ($scope.showImportModal == false) {
$scope.showImportModal = true;
}
else {
$scope.showImportModal = false;
}
};
// Add new reclamation function
$scope.InsertData = function () {
var Action = document.getElementById("btnSave").getAttribute("value");
if (Action == "Submit") {
$scope.Reclamations = [];
$scope.Reclamations.RecTitle = $scope.RecTitle;
$scope.Reclamations.RecDescription = $scope.RecDescription;
$scope.Reclamations.RecStatus = $scope.RecStatus;
$scope.Reclamations.RecResponsible = $scope.RecResponsible;
$scope.Reclamations.RecComment = $scope.RecComment;
$http({
method: "post",
url: "/Data/Insert_Reclamation",
datatype: "json",
data: JSON.stringify($scope.Reclamations)
}).then(function (response) {
alert(response.data);
$scope.GetAllData();
$scope.RecTitle = "";
$scope.RecDescription = "";
$scope.RecStatus = "";
$scope.RecResponsible = "";
$scope.RecComment = "";
})
} else {
$scope.Reclamations = [];
$scope.Reclamations.RecTitle = $scope.RecTitle;
$scope.Reclamations.RecDescription = $scope.RecDescription;
$scope.Reclamations.RecStatus = $scope.RecStatus;
$scope.Reclamations.RecResponsible = $scope.RecResponsible;
$scope.Reclamations.RecComment = $scope.RecComment;
$scope.Reclamations.RecId = document.getElementById("RecID_").value;
$http({
method: "post",
url: "/Data/Update_Reclamation",
datatype: "json",
data: JSON.stringify($scope.Reclamations)
}).then(function (response) {
alert(response.data);
$scope.GetAllData();
$scope.RecTitle = "";
$scope.RecDescription = "";
$scope.RecStatus = "";
$scope.RecResponsible = "";
$scope.RecComment = "";
document.getElementById("btnSave").setAttribute("value", "Submit");
document.getElementById("btnSave").style.backgroundColor = "cornflowerblue";
document.getElementById("spn").innerHTML = "Add New Reclamation";
})
}
};
// Get all reclamations function
$scope.GetAllData = function () {
$http({
method: "get",
url: "/Data/Get_AllReclamation"
}).then(function (response) {
$scope.Reclamations = response.data;
}, function () {
alert("Error Occur");
})
};
// Delete function
$scope.DeleteReclamation = function (Rec) {
$http({
method: "POST",
url: "/Data/Delete_Reclamation",
datatype: "JSON",
data: JSON.stringify(Rec)
}).then(function (response) {
alert(response.data);
$scope.GetAllData();
})
};
// Update function
$scope.UpdateReclamation = function (Rec) {
document.getElementById("RecID_").value = Rec.RecId;
$scope.RecDate = new Date(Rec.RecDate);
$scope.RecTitle = Rec.RecTitle;
$scope.RecDescription = Rec.RecDescription;
$scope.RecStatus = Rec.RecStatus;
$scope.RecResponsible = Rec.RecResponsible;
$scope.RecComment = Rec.RecComment;
document.getElementById("btnSave").setAttribute("value", "Update");
document.getElementById("btnSave").style.backgroundColor = "Yellow";
document.getElementById("spn").innerHTML = "Update Reclamation Information";
};
});
})();
index.cshtml :
<p class="text-info text-center"><h3>Reclamations list</h3></p>
<div ng-app="app">
<div ng-controller="ReclamationsController" ng-init="GetAllData()" class="divList">
@*Reclamation Menu options*@
<div id="container" class="container">
<div class="row">
<input type="text" ng-model="searchFilter" placeholder="Search" />
<button ng-click="showAddAndEditModalFunction()" class="btn btn-primary a-btn-slide-
text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Add</strong></span>
</button>
<button class="btn btn-primary a-btn-slide-text" onclick="history.go(0);">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
<span>
<strong>Refresh</strong>
</span>
</button>
</div>
</div>
<br /><br /><br />
@* Reclamation table *@
<table id="tblReclamations" class="tableData" width="80" border="0" cellpadding="0"
cellspacing="0">
<thead>
<tr>
<th>Reclamation ID</th>
<th>Title</th>
<th>Description</th>
<th>Status</th>
<th>Responsible</th>
<th>Comment</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Rec in Reclamations | filter: searchFilter" ng-class-odd="'odd'" ng-class-
even="'even'">
<td>{{Rec.RecId}}</td>
<td>{{Rec.RecTitle}}</td>
<td>{{Rec.RecDescription}}</td>
<td>{{Rec.RecStatus}}</td>
<td>{{Rec.RecResponsible}}</td>
<td>{{Rec.RecComment}}</td>
<td>
<button ng-click="UpdateReclamation(Rec); showAddAndEditModalFunction()"
class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Edit</strong></span>
</button>
<a ng-click="DeleteReclamation(Rec)" class="btn btn-danger a-btn-slide-text">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span><strong>Delete</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
@* Add and edit part *@
<br /><br /><br /><br />
<div ng-show="showAddAndEditModal" class="form-horizontal" role="form">
<div class="container">
<div class="row">
<h2>
<span id="spn">Add New Reclamation</span>
</h2>
</div>
<div class="row">
@*<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">Date :</label>
<div class="col-md-8">
<input type="date" class="form-control" id="inputDate" placeholder="Date"
ng-model="RecDate">
</div>
</div>
</div>*@
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">Title :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputTitle"
placeholder="Title" ng-model="RecTitle">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">Description :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputDescription"
placeholder="Description" ng-model="RecDescription">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">Status :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputStatus"
placeholder="Status" ng-model="RecStatus">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">Responsible :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputResponsible"
placeholder="Responsible" ng-model="RecResponsible">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">Comment :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputComment"
placeholder="Comment" ng-model="RecComment">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4">
<input type="button" id="btnSave" class="form-control btn-space" value="Submit"
ng-click="InsertData()" />
</div>
</div>
</div>
</div>
</div>
@Html.Hidden("RecID_")
</div>
@section scripts {
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js">
</script>
<script src="~/Scripts/app/controllers/reclamations-controller.js"></script>
<script src="~/Scripts/app/controllers/import-controller.js"></script>
<script>
function refreshPage() {
window.location.reload();
}
</script>
}
DataController :
public JsonResult Get_AllReclamation ()
{
using (GestReclamationDBEntities Obj = new GestReclamationDBEntities())
{
List<Reclamation> Rec = Obj.Reclamations.ToList();
return Json(Rec, JsonRequestBehavior.AllowGet);
}
}
public JsonResult Get_ReclamationById (string Id)
{
using (GestReclamationDBEntities Obj = new GestReclamationDBEntities())
{
int RecId = int.Parse(Id);
return Json(Obj.Reclamations.Find(RecId), JsonRequestBehavior.AllowGet);
}
}
public string Insert_Reclamation (Reclamation Rec)
{
if (Rec != null)
{
using (GestReclamationDBEntities Obj = new GestReclamationDBEntities())
{
if (ModelState.IsValid)
{
try
{
Obj.Reclamations.Add(Rec);
Obj.SaveChanges();
}
catch (DbEntityValidationException ex)
{
ErrorPrinter(ex.EntityValidationErrors);
}
catch (Exception ex)
{
Console.WriteLine("Exception not managed :");
Console.WriteLine(ex.Message);
}
}
return "Reclamation Added Successfully";
}
}
else
{
return "Reclamation Not Inserted! Try Again";
}
}
public string Update_Reclamation (Reclamation Rec)
{
if (Rec != null)
{
using (GestReclamationDBEntities Obj = new GestReclamationDBEntities())
{
Reclamation RecObj = Obj.Reclamations.Where(a => a.RecId ==
Rec.RecId).FirstOrDefault();
RecObj.RecTitle = Rec.RecTitle;
RecObj.RecDescription = Rec.RecDescription;
RecObj.RecStatus = Rec.RecStatus;
RecObj.RecResponsible = Rec.RecResponsible;
RecObj.RecComment = Rec.RecComment;
Obj.SaveChanges();
return "Reclamation Updated Successfully";
}
}
else
{
return "Reclamation Not Updated! Try Again";
}
}
Thank you !