I work in durandal project and use breeze entities.
In my project, I need to create client entity, and on the creating, give initialValues.
Normally, whant you want to give initialValues to new entity, you pass it to createEntity function.
For example:
dataContext.createEntity('employee', {age:40, city:'OurCity'});
So you get new empty instance of employee with default data for age and city.
I want to do it with entity type that contain complexFields.
But it doesn't work.
My entity is client-entity.
Here is the code:
addFormType(store);
function addFormType(store) {
store.addEntityType({
shortName: "FormDTO",
autoGeneratedKeyType: AutoGeneratedKeyType.Identity,
dataProperties: {
key: {//auto primary key. numeratorA and Code cannot be key, becose for new records thier aren't unique
dataType: DataType.Int32, isNullable: false, isPartOfKey: true
}
TaxYear: {
dataType: DataType.String, validators: [Validator.required({ message: 'דרוש' })]
},
Unit_A: {
name: "FormUnit_A",
complexTypeName: 'FormUnit_A:#'
}
}
});
store.registerEntityTypeCtor("FormDTO", null, FormInit);
}
function FormInit(entity) {
validationHelper.initializer(entity);
}
addFormUnit_AType(store);
function addFormUnit_AType(store) {
store.addEntityType({
shortName: "FormUnit_A",
isComplexType: true,
dataProperties: {
CompanyName: {
dataType: DataType.String
},
CompanyAddress: {
dataType: DataType.String
}
}
});
store.registerEntityTypeCtor("FormUnit_A", null, null);
}
I tried to initial it by the follwing rows:
var defaultData = {
TaxYear:0,
Unit_A:{
CompanyName:'ourCompany',
CompanyAddress:'Zar 200 OurCity'
}
};
clientManager.createEntity('FormDTO', defaultData);
But it throws exception: "Object doesn't support property or method 'getProperty'"
I tried also to pass an One-layer object with all of the properties:
var defaultData = {
TaxYear:0,
CompanyName:'ourCompany',
CompanyAddress:'Zar 200 OurCity'
};
clientManager.createEntity('FormDTO', defaultData);
But it throws exception:Object doesn't support property or method 'CompanyName'
So what is the correct way to create-entity with initialValues whan entity contain complex type?
Based of what is working in your project it sounds like you are using something like a camelCase strategy for naming your client side properties. If that is not the case please excuse this answer.
If that is the case then why aren't you using camelCased properties when creating your complex types? Seems simple enough -
var defaultData = {
taxYear:0,
unit_A:{
companyName:'ourCompany',
companyAddress:'Zar 200 OurCity'
}
};
clientManager.createEntity('FormDTO', defaultData);
Related
how do I decorate a custom method inside my CrudController so that the Swagger documentation would be shown as the one from getManyBase? Meaning I need to have all of the filter fields.
I tried this way
#Get('/projects')
#UseInterceptors(CrudRequestInterceptor)
#ApiResponse({ status: 200, type: Project, isArray: true })
getManyProjects(#ParsedRequest() req: CrudRequest, #Request() request)
: Promise<GetManyDefaultResponse<Project> | Project[]> {
const { id, role } = request.user;
if (role === UserRoles.User) {
req.parsed.filter.push({
field: 'userId',
operator: 'eq',
value: id,
});
}
return this.projectService.getMany(req);
}
but the Swagger docs shows empty for the query parameters,
while I'm expecting something like getManyBase.
Funny thing is, the method would work properly if I send the filter string, but I need Swagger to display them as well.
Advice?
See this area in the nestjsx/crud repo.
If you add something like this to your constructor that should do it:
import { Swagger } from '#nestjsx/crud/lib/crud';
...
constructor() {
const metadata = Swagger.getParams(this.getManyProjects);
const queryParamsMeta = Swagger.createQueryParamsMeta('getManyBase');
Swagger.setParams([...metadata, ...queryParamsMeta], this.getManyProjects);
}
In my version "#nestjsx/crud": "^5.0.0-alpha.3"
import { Swagger } from '#nestjsx/crud/lib/crud';
...
constructor() {
const metadata = Swagger.getParams(this.getManyProjects);
const queryParamsMeta = Swagger.createQueryParamsMeta('getManyBase',{
model: { type: MyModel },
query: {
softDelete: false,
},
});
Swagger.setParams([...metadata, ...queryParamsMeta], this.getManyProjects);
}
If the constructor approach does not work for you. Then probably your controller has scope: REQUEST. So controller instance is not created while application initialisation. In this case, you can have custom method inside a controller, like
initSwagger() {
const metadata = Swagger.getParams(this.getManyProjects);
const queryParamsMeta = Swagger.createQueryParamsMeta('getManyBase',{
model: { type: MyModel },
query: {
softDelete: false,
},
});
Swagger.setParams([...metadata, ...queryParamsMeta], this.getManyProjects);
}
then in your main entrypoint file you can write:
app.get(YourController).initSwagger();
It will do the trick
I have a bootstrap nav-tab and I want to display dynamically content when I select a tab. Ajax returns an array of Results. Each result has Price,Logo,Companyname and an array of Covers. Each cover has Price,MaxCover,Optional and Description.
Rest of html code is here link but now I want to return a more complex type.
<script type='text/javascript'>
var cover = new
{
Price: ko.observable(),
MaxCover: ko.observable(),
Optional: ko.observable(),
Description: ko.observable(),
}
var result = new
{
Price: ko.observable(),
InsLogo: ko.observable(),
CompanyName: ko.observable(),
Covers: ko.observableArray()
};
var tab = function (Id, name, selected) {
this.Id = Id;
this.name = name;
this.Results = ko.observableArray();
this.isSelected = ko.computed(function () {
return this === selected();
}, this);
}
var ViewModel = function () {
var self = this;
self.selectedTab = ko.observable();
self.tabs = ko.observableArray([
new tab(0, 'Tab1', self.selectedTab),
new tab(1, 'Tab2', self.selectedTab),
new tab(2, 'Tab3', self.selectedTab)
]);
self.selectedTab(self.tabs()[0]);
self.selectedTab.subscribe(function () {
$.ajax({
url: '#Url.Action("GetSection")',
data: { Id: self.selectedTab().Id },
type: 'GET',
success: function (data) {
self.selectedTab().Results(data.Results); //Here I want to fill the results!!!!!!
}
});
});
}
ko.applyBindings(new ViewModel());
Your approach is okay with a few small glitches. Some suggestions to improve it:
Make your viewmodels so that they initialize themselves from a parameters object.
Don't introduce dependencies between viewmodels when you don't have have to. I'm thinking of the isSelected property here, this can be taken care of in the view. For example, when inside a foreach: tabs: data-bind="css: {selected: $data === $parent.selectedTab()}"
You have a timing issue: Subscribe to selectedTab first, then initialize it with self.selectedTab(self.tabs()[0]);. It should be obvious why. (Generally it's useful to split viewmodel creation into a "setup" and an "init" phase.)
Only send an Ajax request for tab details when tab details are still empty.
Subscribtions receive the new value of the observable as an argument, use it.
Observables are functions:
If you want to store an Ajax response in them you can use them as a callback directly.
In the same way you can use them as an event handler:
data-bind="click: $parent.selectedTab".
JS convention is to use PascalCase for constructor names (like in viewmodels) and camelCase for all other identifiers.
With all that, we get:
function Tab(data) {
this.Id = data.Id;
this.name = data.name;
this.Results = ko.observableArray();
}
function ViewModel(data) {
var self = this;
// setup
self.selectedTab = ko.observable();
self.selectedTab.subscribe(function (selectedTab) {
if (selectedTab.Results()) return;
$.get('#Url.Action("GetSection")', {Id: selectedTab.Id}).done(selectedTab.Results);
});
// init
self.tabs = ko.observableArray(ko.utils.arrayMap(data.tabs, function (tabData) {
return new Tab(tabData);
}));
self.selectedTab(self.tabs()[0]);
}
ko.applyBindings(new ViewModel({
tabs: [
{Id: 0, name: 'Tab1'},
{Id: 1, name: 'Tab2'},
{Id: 2, name: 'Tab3'}
]
}));
To convert plain data structures that come from the server (like your array results and covers) into a structure of viewmodels, observables and observable arrays I recommend looking into the mapping plugin.
Here's my issue. I'm making an ajax request to obtain an object from a controller. The object (or something) is being brought back, but I don't know how to access the attributes of that object being brought back. The object is of type "Address" and thus has attributes like Address.Address1, Address.City, etc. Here is my code: After a button is clicked,
function showEditAddress(addressid) {
$.get("/Website/Accommodation/AddressGet",
{ guid: addressid.toString() },
function(data) {
//Get values from variable 'data' such as described above
//and append to form 'dialog'
$("#dialog").dialog({
// autoOpen: false,
show: {
effect: "explode",
duration: 250
},
hide: {
effect: "explode",
duration: 250
},
buttons: {
"Save": {
text: "Save",
class: "",
click: function () {
//save form
$(this).dialog("close");
}
},
"Cancel": {
text: "Cancel",
class: "",
click: function () {
$(this).dialog("close");
}
}
},
modal: true
});
});
}
Controller action:
public Address AddressGet(string guid)
{
Guid g = new Guid(guid);
return _iCoreRepository.Addresses.Where(p => p.AddressID == g).SingleOrDefault();
}
Any help will be greatly appreciated!!! Thank you!!!
Jose is quite simple. You already answer the question. To get the value of the properties of Address you only need put a dot in front of data and type de property name. like this:
//(....)
function(data) {
//Get values from variable 'data' such as described above
//and append to form 'dialog'
//show address id.
alert(data.AddressID);
Remember that javascript is case sensitive, so you need use upper case to A and ID in AddressID like you did in C#.
And in controller you need replace the last line to something like this:
var address = _iCoreRepository.Addresses.Where(p => p.AddressID == g).SingleOrDefault();
return Json(address, JsonRequestBehavior.AllowGet);
the method must be return JsonResult. The method Json serialize the object, in this case address, in a json format before response the data to the client.
If you need the Json method accepts IEnumerables to, like List<> or Array. In javascript your data object will be a lenght property and will acess each element by using indexer like:
data[0].AddressID.
Instead of returning just your Address object you can try returning a JsonResult.
public ActionResult AddressGet(string guid)
{
Guid g = new Guid(guid);
var address = _iCoreRepository.Addresses.Where(p => p.AddressID == g).SingleOrDefault();
return Json(address, JsonRequestBehavior.AllowGet);
}
Then in your jquery, the returned data is your address object and you can access the fields as they appear in your C# class:
function showEditAddress(addressid) {
$.get("/Website/Accommodation/AddressGet",
{ guid: addressid.toString() },
function(data) {
//Get values from variable 'data' such as described above
//and append to form 'dialog'
//Access it like: data.Address1, data.City etc...
});
}
}
I started using knockout.js and i really like it.
I use ASP.Net mvc , jQuery and knockout.js
My question is this:
lets say i have a management screen of a user, the user is my view model
inside the user i want an array of permissions
my user viewModel:
var userViewModelClass = function () {
var self = this;
ko.mapping.fromJS({
ID: "",
permissions: []
}, {}, self);
}
now.. if i do an ajax request to the server and get a JSON back i user the mapping plugin, and everything goes as expected
but... now i want my rendered permissions list to have an action like delete.
so i will need a permission object and then the array of permissions will be an array of permission objects. but how do i do that? how will the mapping plugin know that the object returned to him from the server in an array is actually on object like this one:
function permission() {
var self = this;
this.delete = function () {
};
ko.mapping.fromJS({
name: "",
level: ""
}, {}, self);
}
that's my first part of the question.
the second part:
lets say i got the model with an array of all permissions and they are all of this permission object. now i want each delete button in my view to be bind the the delete function inside the permission object.
using:
data-bind="click: delete"
what is the best implementation for a delete function? i thought about something like: makeing an ajax call to the server which will actually delete the permission from the user. then if the call succeeds remove the current permission from the observable array, then the view will update...
is that a good practice?
thanks!
First part. You need to use mapping options. In your userViewModelClass do this.
var userViewModelClass = function () {
var self = this;
ko.mapping.fromJS({
ID: "",
permissions: []
}, {
permissions: {
create: function(options) {
return new permission(options.data);
}
}
}, self);
}
And modify your permission object like so
function permission(config) {
var self = this;
this.delete = function () {
};
ko.mapping.fromJS($.extend({
name: "",
level: ""
}, config), {}, self);
}
Note I added the extend in so that your default structure will remain and be overwritten by incoming data.
Second part of your question. One possible way would be to pass a reference to the parent in your constructor. So the above mapping options would become
permissions: {
create: function(options) {
return new permission(options.data, self);
}
}
Then your delete could be something like.
this.delete = function () {
$.ajax(deleteurl, yourdata, function(result) {
// success
parent.permissions.remove(self);
}, function() {
// failure
display error message
}
};
EDIT
Alternate way as discussed in comments.
var userViewModelClass = function () {
var self = this;
ko.mapping.fromJS({
ID: "",
permissions: []
}, {
permissions: {
create: function(options) {
return new permission(options.data);
}
}
}, self);
this.delete = function(permission) {
self.permissions.remove(permission);
};
}
data-bind="click: $parent.delete"
Hope this helps.
Is there a way to map from/to a POCO and knockoutjs observable?
I have a Note class:
public class Note
{
public int ID { get; set; }
public string Date { get; set; }
public string Content { get; set; }
public string Category { get; set; }
public string Background { get; set; }
public string Color { get; set; }
}
and this is my javascript:
$(function () {
ko.applyBindings(new viewModel());
});
function note(date, content, category, color, background) {
this.date = date;
this.content = content;
this.category = category;
this.color = color;
this.background = background;
}
function viewModel () {
this.notes = ko.observableArray([]);
this.newNoteContent = ko.observable();
this.save = function (note) {
$.ajax({
url: '#Url.Action("AddNote")',
data: ko.toJSON({ nota: note }),
type: "post",
contentType: "json",
success: function(result) { }
});
}
var self = this;
$.ajax({
url: '#Url.Action("GetNotes")',
type: "get",
contentType: "json",
async: false,
success: function (data) {
var mappedNotes = $.map(data, function (item) {
return new note(item.Date, item.Content, item.Category, item.Color, item.Background);
});
self.notes(mappedNotes);
}
});
}
Ignore the fact that the save function is not used (to simplify the code here).
So, when I load the page I call the server and I retrieve a list of Note objects and I map it in javascript. Notice how ID is not mapped because I dont need it in my view.
So far so good, I see the notes on screen, but how I can save the notes back to the server?
I tried to convert the note (Im saving just the new note and not the entire collection) to JSON and send it to my controller but I don't know how to access to the note in the controller. I tried:
public string AddNote(string date, string content, string category, string background, string color)
{
// TODO
}
but is not working. I want to have something like:
public string AddNote(Note note) {}
(Btw, what's the best return for a method that just save data on DB? void?)
So, How I do this? I tried knockout.mapping plugin but it is quite confusing and I don't get it working for me.
Thank you.
ASP.NET MVC's model binder will look for properties that are case-sensitive. You need to pass your JSON object back to the server with the property names matching your poco object.
I usually do 1 of 2 things:
Make my javascript object property names capital (that way in JS, I know that this object will at some point be a DTO for the server)
function Note(date, content, category, color, background) {
this.Date = date;
this.Content = content;
this.Category = category;
this.Color = color;
this.Background = background;
};
In my AJAX call i will just create an anonymous object to pass back to the server (note this does not require ko.toJSON):
$.ajax({
url: '#Url.Action("AddNote")',
data: JSON.stringify({ note: {
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
}),
type: "post",
contentType: "application/json; charset=utf-8",
success: function(result) { }
});
(note the different contentType parameter as well)
You will want to make your ActionMethod take in a (Note note) and not just the array of parameters.
Also, because the modelbinders look through the posted values in a couple different ways. I've had luck posting JSON objects with out specifying the ActionMethod parameter name:
instead of:
{ note: {
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
}
just do:
{
Date: note.date,
Content: note.content,
Category: note.category,
Color: note.color,
Background: note.background
}
(but this can get dicey with arrays binding to collections and complex types...etc)
As far as the 'Best' signature for a return on a method that does a db call, we generally prefer to see boolean, but that also depends on your needs. Obviously if it is trivial data, void will be fine, but if its a bit more critical, you may want to relay a boolean (at the least) to let your client know it might need to retry (especially if there's a concurrency exception).
If you really need to let your client know what happened in the database, you can foray into the world of custom error handling and exception catching.
Also, if you need to display very specific information back to your user depending upon a successful/unsuccessful database commit, then you could look at creating custom ActionResults that redirect to certain views based upon what happened in the database transaction.
Lastly, as far as getting data back from the server and using Knockout...
again the mapping plugin will work if your property names are the same case or you create a slightly more explicit mapping
My own trick with my JS objects is below. The initialize function is something i created that should be reusable across all your objects as it just says "if the property names match (after being lowercased), either set them by calling the function (knockout compatible) or just assign the value.:
function Note(values){ //values are what just came back from the server
this.date;
this.content;
this.category;
this.color;
this.background;
initialize(values); //call the prototyped function at the bottom of the constructor
};
Note.prototype.initialize = function(values){
var entity = this; //so we don't get confused
var prop = '';
if (values) {
for (prop in values) {
if (values.hasOwnProperty(prop.toLowerCase()) && entity.hasOwnProperty(prop.toLowerCase())) {
//the setter should have the same name as the property on the values object
if (typeof (entity[prop]) === 'function') {
entity[prop](values[prop]); // we are assuming that the setter only takes one param like a Knockout observable()
} else {// if its not a function, then we will just set the value and overwrite whatever it was previously
entity[prop] = values[prop];
}
}
}
}
};