Uncaught ReferenceError: Unable To Process Binding With Ajax

I have two layered MVC4 .NET Application with DAL and Web layers. I am having problems when trying to bind data with Ajax returned data. On Html, i am trying to get SubcriteriaList

Solution 1:

Your data binding is Code, but your observable is code. Variable names are case sensitive. You'll need to fix all of them that do not match, as once you fix this one, the others will fail.

You've got some other issues though. You're not actually mapping the response to your view model. You should probably have a parent and child viewModel. The child would have the properties, and would be the map for the ajax response. The child would maintain the list, do the ajax request, etc.

function SubCriteriaViewModel(data) {
    var self = this;

    self.id = ko.observable(data.id);
    self.code = ko.observable(data.code);
    self.name = ko.observable(data.name);
    self.weight = ko.observable(data.weight);
    self.goal = ko.observable(data.goal);
    self.achieved = ko.observable(data.achieved);
    self.isActive = ko.observable(data.isActive);        
}

function ViewModel() {
    var self = this;
    self.SubcriteriaList = ko.observableArray();

    // Initializing the view-model
    $.ajax({
        url: "/Subcriteria/GetAllSubcriteria",
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            var subcriteriaList = data.map(function (item) { return new SubCriteriaViewModel(item); });
            self.SubcriteriaList(subcriteriaList); //Putting the response in ObservableArray
        }
    });
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

Then, remember to fix all of the casing issues. Here's just one:

<input class="input-large" placeholder="Code" data-bind="value:Code" />

should be

<input class="input-large" placeholder="Code" data-bind="value:code" />