Hi I am just learning knockout and I am facing a problem that I can not seem to understand.
I have this object:
var studentPersonalDetails = ko.observable();
var isInitialized = false;
var vm = {
//bindable
title: ko.observable('Profile'),
dataLoading: ko.observable(false),
hasErrors: ko.observable(false),
errorMessage: ko.observable(''),
//data
profileStudentPersonalDetails: studentPersonalDetails,
//operations
activate: activate
};
return vm;
profileStudentPersonalDetails is the equivalent of this C# object from the server:
public int? StudentNumber { get; set; }
public string Supervisor { get; set; }
public bool CanEdit { get; set; }
public string PersonId { get; set; }
public string FirstName { get; set; }
public string MiddleName { get; set; }
public string LastName { get; set; }
public string FullName { get; set; }
And is populated from a service.My problem is that I do know how to access the data from this object so I can display it on a html view.
I have tryed this versions:
<strong data-bind="text: StudentNumber">
<strong data-bind="text: profileStudentPersonalDetails.StudentNumber">
But non seem to work.The data gets populated into the object the right way of that I am sure and I am able to acces the other fields from the data for example the title:
<strong data-bind="text: title">
And this works.
How can I access the data?
I think you want
profileStudentPersonalDetails().StudentNumber
observables are functions. To get the objects they represent, you need to call the function. You can then access the property off the result of the function.
Related
I have an object in angularjs which I want to pass and map it to custom c# class in mvc controller. but whenever I am doing this class object is null completely.
$scope.Get = function () {
var EService = [{
id: $scope.Id,
servicename: $scope.ServiceName,
servicetype: $scope.ServiceType,
monthlyrental: $scope.MonthlyRental,
serviceremarks: $scope.ServiceRemarks,
servicestatus: $scope.status,
activationdate: $scope.ActivationDate,
deactivationdate: $scope.DeActivationDate
}];
$http.post('/TS/API/Insert', Service).then(function (res) {
debugger;
})
MVC Controller and Class:
[HttpPost]
public string Insert(ServicesMaster Service)
{
GIBCADBEntities gfientity = new GIBCADBEntities();
var record = "Sent"
return Json(record, JsonRequestBehavior.AllowGet);
} public class ServicesMaster
{
public string id { set; get; }
public string servicename { set; get; }
public string servicetype { set; get; }
public int? monthlyrental { set; get; }
public string serviceremarks { set; get; }
public byte servicestatus { set; get; }
public DateTime? activationdate { set; get; }
public DateTime? deactivationdate { set; get; }
}
The javascript variable/object "EService" is ok here, and when passing only the ServicesMaster object is created with null values and no data is mapped to it. I can send single string or any value from here but when sending a complete object its behaving like this.
You are passing an array from front end and fetching object from server end. just remove the "[" and "]" brace while set value to EService . Like :
$scope.Get = function () {
var Service = {};
Service = {
id: $scope.Id,
servicename: $scope.ServiceName,
servicetype: $scope.ServiceType,
monthlyrental: $scope.MonthlyRental,
serviceremarks: $scope.ServiceRemarks,
servicestatus: $scope.status,
activationdate: $scope.ActivationDate,
deactivationdate: $scope.DeActivationDate
};
$http.post('/TS/API/Insert', Service).then(function (res) {
debugger;
});
};
It should work now. :)
How do I make a div(<div id="HoverMe">) hoverable, and display a list of names from AllCarId-list (by return Car.Name in place of Car.Id)?
I got two tables Owner(Id) and Car(Id, OwnerId, Name).
I have a property TotCar in ViewModel where I use Count() in controller to add total Car.OwnerId = Owner.Id in model.TotCar.
I also got public List<Guid> AllCarId { get; set; }inside the ViewModel to pass OwnerId to list for every related Owner.Id = Car.OwnerId.
So far I got this where I currently show the count-value of TotCar:
<div id="HoverMe">
#Html.DisplayFor(model => model.TotCar)
</div>
#*I want this to be hoverable and list all from AllCarId(convert to name) in a "listbox"*#
So how do I make <div id="HoverMe"> hoverable, once it hovers, list every items in AllCarId?
This is how I pass id's to AllCarId in Controller.
List<Guid> GetCarIds = db.Cars.Where(c => c.OwnerId == id).Select(c=> c.OwnerId).ToList();
Then I pass GetCarIds to model public List<Guid> AllCarId { get; set; } property.
EDIT: related property from models:
ViewModel:
public List<Guid> AllCarId { get; set; }
public int TotCar { get; set; }
public virtual Car Car { get; set; }
Car:
public System.Guid Id { get; set; }
public System.Guid OwnerId { get; set; }
public string Name { get; set; }
Owner:
public System.Guid Id { get; set; }
I am trying to create a new row in a table I have hosted in Azure SQL Database. My front end is AngularJS with C# in .NET as the back end.
Here is my code from the front end passing the object:
var insertTicket = function (newTicket) {
return $http.post("http://localhost:50412/api/tickets", JSON.stringify(newTicket))
.then(function (response) {
console.log(response);
console.log("Insert Successful");
return;
});
And here is my backend code that receives the data and tries to add to the database:
[Route("api/tickets")]
public HttpResponseMessage Post(Ticket t)
{
TicketsRepository.InsertTicket(t);
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
return response;
}
In TicketRepisitory:
public static void InsertTicket(Ticket tick)
{
var maxID = (from ticket in dataContext.Tickets
select ticket.id).Max();
var tick = new Ticket();
tick.id = maxID + 1;
dataContext.Tickets.Add(tick);
dataContext.SaveChanges();
}
And Here is my Ticket class:
public partial class Ticket
{
//Properties
public int id { get; set; }
public string title { get; set; }
public string customer { get; set; }
public string barcode { get; set; }
public string assignedTo { get; set; }
public string category { get; set; }
public string importance { get; set; }
public Nullable<System.DateTime> openDate { get; set; }
public Nullable<System.DateTime> dueDate { get; set; }
public Nullable<System.DateTime> closedDate { get; set; }
public string comments { get; set; }
public string condition { get; set; }
public Nullable<int> workHours { get; set; }
//Relationships
public Employee Employee { get; set; }
public Employee Employee1 { get; set; }
public Equipment Equipment { get; set; }
}
I think the issue is with Post() expecting a ticket object. I have tried searching for how to receive JSON data and use that for Ticket, but with out much luck.
My Problem is that I can not create a new row. No changes are reflected in my database.
You don't need to JSON.stringify your object when POSTing data with $httpin AngularJS, just pass the object itself as the second parameter, like this:
var insertTicket = function (newTicket) {
return $http.post("http://localhost:50412/api/tickets", newTicket)
.then(function (response) {
console.log(response);
console.log("Insert Successful");
return;
});
First there is no need to call JSON.stringify() method on newticket javascript object for second paramter of $http.post() method.
Then in the web api method write a parameter of type JObject with the name newTicket to receive the posted object, and use generic version of ToObject method to convert posted data to desired type. Don't forget to use [FromBody] attribute for the method parameter. the code for webapi looks like this:
[Route("api/tickets")]
public HttpResponseMessage Post([FromBody]JObject newTicket)
{
var t = newTicket.ToObject<Ticket>();
TicketsRepository.InsertTicket(t);
HttpResponseMessage = Request.CreateResponse(HttpStatusCode.OK);
return response;
}
I am trying to post a JavaScript item to a C# WebAPI call using AngularJS. Below is what I am trying to do.
Objects
class Address
{
public string Street { get; set; }
public string City { get; set; }
public string State { get; set; }
}
class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public Address address { get; set; }
}
My C# Controller function
[Route("Update/")]
public void Update(Person person)
{
_service.Update(person);
}
AngularJS call
this.update = function (person) {
$http.post("api/Person/Update/", person);
}
When I receive the object in the WebAPI controller the address is null. Why is this data not being received?
Edit
I was wrong in my original question the Person object looked like this
class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public IAddress address { get; set; }
}
When I changed address from IAddress to Address everything worked as expected.
Your post would be in json format which will assign person object to person, Address object must be well formed object as it contain sub properties.
Code
$scope.person = {
'Street': '',
'LastName': '',
'Address': {
'Street': '',
'City': '',
'State': '',
},
}
this.update = function (person) {
$http.post("api/Person/Update/", { person : $scope.person});
}
This approach allows to send complex objects with arrays and sub objects through HTTP GET:
Angular:
$http({
url: '/myApiUrl',
method: 'GET',
params: { personStr: angular.toJson(person, false) }
})
C#:
[HttpGet]
public string Get(string personStr)
{
Person obj = new JavaScriptSerializer().Deserialize<Person>(personStr);
...
}
What you want to do is not possible, but this solution allows you to use your complex object on the .NET side. There is no body in a GET request, so you have to add your object into the URI.
Change your web api method to:
[Route("Update/")]
public void Update([FromUri]Person person)
{
_service.Update(person);
}
Change your angular code to:
this.update = function (person) {
$http.post("api/Person/Update?FirstName=John&LastName=Doe&Address%5BStreet%5D=123%20Main%20St&Address%5BCity%5D=Knoxville&Address%5BState%5D=Tennessee");
}
I have an ASP.NET Web API that accepts a POST with a UserModel in it:
[HttpPost]
public object Post(UserModel userModel)
{
// some logic here
}
The UserModel is a complex type that looks like this:
public class UserModel
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public AddressModel CurrentAddress { get; set; }
}
The AddressModel Model looks like this:
public class AddressModel
{
public string Country { get; set; }
public string City { get; set; }
public string Street { get; set; }
public string Number { get; set; }
}
I'm trying to call this API from javascript and send a JSON object. This is the JSON object I'm sending:
var user = {
Id: 1,
FirstName: 'Hello',
LastName: 'World',
CurrentAddress: {
Country: 'Israel',
City: 'Tel Aviv',
Street: 'Shalom',
Number: '5'
}
};
What I get in my Post method is a UserModel with the UserModel fields filled with the correct information, the CurrentAddrent address is initialized, but the values sent are not there. The values of the parent object (the UserModel object are ok).
What am I doing wrong here? how can you send a complex object to WebAPI Model?
to receive complex data objects in MVC web API actions you have to add [FromBody] attribute to your POST arguments.
The [FromBody] tells the Web API to search for the parameter’s value in the body of a POST request.
[HttpPost]
public void Post([FromBody] UserModel userModel)
{
}
I've made a local test and I obtained the values.
I hope it helps!