knockoutjs mapping from/to POCO object

Viewed 3463

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.

1 Answers
Related