I have two tables in my database: People and Payband. Let me simplify the relationship below:
dbo.People
PersonId : int (Primary Key)
FirstName : string
MiddleInitial: string
LastName : string
DateOfBirth: datetime
PaybandId : int (Foreign Key)
dbo.Paybands
Id : int (Primary Key)
Name : string
Currently, I have set up an ASP.NET Web API service for the backend and utilized HTML/CSS along with AngularJS for the frontend. Data retrieval, display, and editing are working smoothly. Here's a glimpse of my form layout:
https://i.sstatic.net/ct9zx.jpg
Although I can retrieve the current Payband value assigned to a person, I am facing a challenge in fetching all other Payband values and presenting them in an HTML dropdown for easy payband selection for any individual. Your assistance on how to achieve this would be highly appreciated. Thank you beforehand, and feel free to ask if you have any queries.
Additionally, here is my AngularJS controller code (note that I am currently hardcoding the person's ID for testing purposes):
angular
.module("personnelService")
.controller("PersonnelEditCtrl",
PersonnelEditCtrl);
function PersonnelEditCtrl(personnelResource) {
var vm = this;
vm.person = {};
vm.message = '';
personnelResource.get({ id: 2 },
function (data) {
vm.person = data;
vm.person.dob = new Date(vm.person.dob);
vm.originalPerson = angular.copy(data);
});
if (vm.person && vm.person.personId) {
vm.title = "Edit: " + vm.person.firstName + " " + vm.person.lastName;
}
else {
vm.title = "New Person";
}
vm.submit = function () {
vm.message = '';
if (vm.person.personId) {
vm.person.$update({ id: vm.person.personId },
function (data) {
vm.message = '... Save Complete';
})
}
else {
vm.person.$save(
function (data) {
vm.originalPerson = angular.copy(data);
vm.message = '... Save Complete';
})
}
};
vm.cancel = function (editForm) {
editForm.$setPristine();
vm.person = angular.copy(vm.originalPerson);
vm.message = "";
};
}