Home > DeveloperSection > Forums > bind knockoutjs with mvc view is not work
Kamlakar Singh
Kamlakar Singh

Total Post:28

Points:196
Posted on    November-10-2014 2:32 AM

 ASP.NET MVC View  Knockout.js  Knockout mvc 
Ratings:


 1 Reply(s)
 648  View(s)
Rate this:

Hi Guys

I am new in knockoutjs, i am trying to bind the view, but cannot. Data from server is fetching fine, ajax is working fine, but not binding issue.

Here is my js code:

var UserViewModel = function () {

var self = this;

//Declare observable which will be bind with UI

self.Id = ko.observable("0");

self.FirstName = ko.observable("");

self.LastName = ko.observable("");

 

//The Object which stored data entered in the observables

var UserData = {

    Id: self.Id || 0,

    FirstName: self.FirstName || '',

    LastName: self.LastName || ''

   };

 

//Declare an ObservableArray for Storing the JSON Response

self.Users = ko.observableArray([]);

 

GetUser(12); //This is server side method.

 

function GetUser(userId) {

    //Ajax Call Get All Employee Records

    $.ajax({

        type: "GET",

        url: "/api/Users/" + userId,

        contentType: "application/json; charset=utf-8",

        dataType: "json",

        success: function (response) {

            //alert("success");

            UserData = response.data.UserData;

            alert(UserData.FirstName); //This is showing me correct name.

            self.Users(response.data.UserData); //Put the response in ObservableArray

        },

        error: function (error) {

            alert(error.status);

        }

    });

    //Ends Here

}

}

 

ko.applyBindings(new UserViewModel());

Here is my view: <form class="form-horizontal" data-bind="with: UserData">

                           <div class="row">

                               <div class="control-group">

                                   <label class="control-label">First Name</label>

                                   <label class="control-label" data-bind="text: FirstName"></label>

                               </div>

                            </div>

                            <div class="row">

                              <div class="control-group">

                                   <label class="control-label">Last Name</label>

                                   <input type="text" placeholder="Last Name" data-bind="value: LastName">

                               </div>

                            </div>

 Thanks



Brad Pitt
Brad Pitt

Total Post:61

Points:429
Posted on    November-10-2014 5:24 AM

Your problem is that you are trying to two-way data-bind against a non-observable property, so when you update it it isn't notifying the UI. Make your user an observable and set it to an instance of an object or create a model to derive your properties from.

function userModel(user) {

    var self = this;

    self.Id = ko.observable(user.Id);

    self.FirstName = ko.observable(user.FirstName);

    self.LastName = ko.observable(user.LastName);

}

var viewModel = function () {

    var self = this;   

    //The Object which stored data entered in the observables

    var UserData = ko.observable();

    GetUser(12);

    function GetUser(userId) {

        //Ajax Call Get All Employee Records

        $.ajax({

            type: "GET",

            url: "/api/Users/" + userId,

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (response) {

                //alert("success");

                UserData(new userModel(response.data.UserData));

                alert(UserData().FirstName()); //This is showing me correct name.

                self.Users.push(UserData()); //Put the response in ObservableArray

            },

            error: function (error) {

                alert(error.status);

            }

        });

    }

}

ko.applyBindings(new viewModel());


Don't want to miss updates? Please click the below button!

Follow MindStick