Binding the C# list to knockout observable array

Question

I have list of objects in my MVC model as below.

   @Html.EditorFor(model => model.LstEmploymentHistory)
   <button id="btnAddHistory" data-bind="click: addHistory">Add one</button>

I need to bind this to Knockout observable array on load.

<script type="text/javascript">
    //Data
    var History = function () {
        var self = this;
        self.CompanyName = ko.observable();
        self.Designation = ko.observable();
        self.StartDate = ko.observable();
        self.EndDate = ko.observable()
    };
    var viewModelEmploymentHistory = function () {
        // Operations
        var self = this;
        self.historyList = ko.observableArray([new History()]); // Put one line in by default           
        self.addHistory = function () { self.historyList.push(new History()) }
        self.removeHistory = function (history) {
            self.historyList.remove(history)


        }
        self.educationList = ko.observableArray([new Education()]); // Put one line in by default  
        self.addEducation = function () { self.educationList.push(new Education()) };
        self.removeEducation = function (education) {
            self.educationList.remove(education)

        }
    };
    //Data
    var Education = function () {
        var self = this;
        self.Degree = ko.observable();
        self.YearOfPassing = ko.observable();
        self.Percentage = ko.observable();
        self.Institute = ko.observable()

    };


    //var masterVM = (function () {
    //    this.viewModelEducationalDetails = new viewModelEducationalDetails(),

    //    this.viewModelEmploymentHistory = new viewModelEmploymentHistory();
    //})();

    //ko.applyBindings(masterVM)
    ko.applyBindings(new viewModelEmploymentHistory());

    // ko.applyBindings(new viewModelEducationalDetails(), document.getElementById("containerEducation"));
    //ko.applyBindings(new viewModelEmploymentHistory(), document.getElementById("containerHistory"));     
</script>

Can any one please help me with the way to bind the C# list to the observable array on page load.?

@Liam - let me rephrase; What has any of this got to do with MVC? — Jamiec, May 07 '15 at 13:45
Thanks for the comment Liam. I have implemented the feature to add the divs dynamically. And i am able add the divs. And on page load the div will be one by default bcoz of the below code self.addHistory = function () { self.historyList.push(new History()) } I need a feature for updating or displaying the divs now. Where in on load i will have the list of items and i need to bind them using knockout. Please guide me how can i achieve this or what is the best way to do this.? — Syed Amanulla, May 08 '15 at 15:46

score 1 · Answer 1 · edited May 23 '17 at 12:08

You will need to use a format that JavaScript understands, like JSON..

So in your controller you'll need to serialise the model into a JSON string

something like:

Model.JsonString = JsonConvert.SerializeObject(Model.LstEmploymentHistory);

You can then consume this in your JavaScript/MVC, several way to do this. The easiest is to simply write it to an input

@Html.HiddenFor(h => h.JsonString);

Then read it in your js:

var Json = document.getElementById('JsonString').value;

and then turn this back into an array:

var array = JSON.Parse(Json);

You then need to bind that into your observable. You've not actually explained how this is supposed to work so I'll leave this one to you...

score 0 · Answer 2 · answered Mar 09 '19 at 01:32

0

If you bind in Razor then you can use the following:

var myModel = {
    LstEmploymentHistory: @Html.Raw(Json.Encode(Model.LstEmploymentHistory))
};

answered Mar 09 '19 at 01:32

nickornotto

1,946
4
36
68

Binding the C# list to knockout observable array

2 Answers2