---
title: "bind knockoutjs with mvc view is not work"  
description: "bind knockoutjs with mvc view is not work"  
author: "Mark M"  
published: 2014-11-10  
updated: 2014-11-10  
canonical: https://www.mindstick.com/forum/2550/bind-knockoutjs-with-mvc-view-is-not-work  
category: "asp.net mvc"  
tags: ["view", "knockout.js", "knockout mvc"]  
reading_time: 2 minutes  

---

# bind knockoutjs with mvc view is not work

Hi Guys

I am new in [knockoutjs](https://www.mindstick.com/forum/157857/what-is-knockoutjs-and-how-does-it-differ-from-other-javascript-frameworks), i [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to bind the [view](https://yourviews.mindstick.com/view/84701/layoffs-in-google-india-2023-view), but cannot. [Data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science) from [server](https://www.mindstick.com/articles/43769/what-is-serverless-architecture-is-it-worth-switching-over) is fetching fine, [ajax](https://www.mindstick.com/articles/1541/check-availability-of-user-name-or-email-using-asp-dot-net-ajax-and-jquery) is [working fine](https://answers.mindstick.com/qa/95550/why-is-the-safari-browser-not-working-fine), but not [binding](https://www.mindstick.com/blog/146/dynamic-binding-in-c-sharp) issue.

**Here is my js [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii):**

```
var UserViewModel = function () {var self = this;//Declare observable which will be bind with UIself.Id = ko.observable("0");self.FirstName = ko.observable("");self.LastName = ko.observable(""); //The Object which stored data entered in the observablesvar UserData = {    Id: self.Id || 0,    FirstName: self.FirstName || '',    LastName: self.LastName || ''   }; //Declare an ObservableArray for Storing the JSON Responseself.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

## Replies

### Reply by Anonymous User

Your problem is that you are [trying](https://answers.mindstick.com/qa/93698/6-mistakes-couples-are-trying-to-save-money) 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());
```


---

Original Source: https://www.mindstick.com/forum/2550/bind-knockoutjs-with-mvc-view-is-not-work

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.