title: Get database record using AJAX, Knockout and JSON
body: <p>I am fairly new to Knockout and Entity Framework and I have a problem where I cannot seem to output any JSON from an MVC 4 controller action via an AJAX call using Knockout onto an html page.</p>
  
  <p>The table includes fields Email and RegsitrationNumber, these are used to validate the user. </p>
  
  <p>If the user exists in the table then their country is displayed on the screen. </p>
  
  <p>The profiler states a Status Code of 200 i.e OK. Can anyone help?</p>
  
  <p>HTML ------</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;script src="./Scripts/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div&gt;
          &lt;div&gt;
              &lt;h2 id="title"&gt;Login&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;label for="email"&gt;Email&lt;/label&gt;
              &lt;input data-bind="value: $root.Email" type="text" title="Email" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label for="registrationnumber"&gt;Registration Number&lt;/label&gt;
              &lt;input data-bind="value: $root.RegistrationNumber" type="text" title="RegistrationNumber" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;button data-bind="click: $root.login"&gt;Login&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;table id="products1" data-bind="visible: User().length &gt; 0"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Country&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody data-bind="foreach: Users"&gt;
              &lt;tr&gt;
                  &lt;td data-bind="text: Country"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
  
      &lt;/table&gt;
  
  
      &lt;script src="./Scripts/knockout-2.2.0.js"&gt;&lt;/script&gt;
      &lt;script src="./Scripts/knockout-2.2.0.debug.js"&gt;&lt;/script&gt;
      &lt;script src="./Scripts/functions.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JAVASCRIPT -----</p>
  
  <pre><code>function UserViewModel() {
  
      //Make the self as 'this' reference
      var self = this;
      //Declare observable which will be bind with UI
      self.Name = ko.observable("Robbie");
      self.Email = ko.observable("rob@test.com");
      self.Occupation = ko.observable("Designer");
      self.Country = ko.observable("UK");
      self.RegistrationNumber = ko.observable("R009");
      self.UserDate = ko.observable("06-04-2014");
  
      var User = {
          Name: self.Name,
          Email: self.Email,
          Occupation: self.Occupation,
          Country: self.Country,
          RegistrationNumber: self.RegistrationNumber,
          UserDate: self.UserDate
      };
  
      self.User = ko.observable();  //user
      self.Users = ko.observableArray(); // list of users
  
      //Login
      self.login = function ()
      {
          alert("login");
  
          if (User.Email() != "" &amp;&amp; User.RegistrationNumber() != "") {
  
  
              $.ajax({
                  url: '/Admin/Login',
                  cache: false,
                  type: 'GET',
                  contentType: 'application/json; charset=utf-8',
                  data: ko.toJSON(User),
                  success: function (data) {
                      self.Users.push(data);
                      $('#title').html(data.Email);
                  }
              }).fail(
                  function (xhr, textStatus, err) {
                      console.log('fail');
                      console.log(xhr.statusText);
                      console.log(textStatus);
                      console.log(err);
                  });
  
          } else {
              alert('Please enter an email and registration number');
          }
  
      };
  
  
  }
  var viewModel = new UserViewModel();
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>ACTION -----</p>
  
  <pre><code>   public ActionResult Login(string Email, string RegistrationNumber)
          {
  
              var user = from s in db.Users
                                select s;
  
              user = user.Where(s =&gt; s.Email.ToUpper().Equals(Email.ToUpper())
                                                   &amp;&amp; s.RegistrationNumber.ToUpper().Equals(RegistrationNumber.ToUpper())
                                                   );
  
              if (user == null)
              {
                 return HttpNotFound(); 
              }
              return Json(user, JsonRequestBehavior.AllowGet);
          }
  </code></pre>