title: MVC pass JSON ViewModel to View
body: <p>I have an MVC application that I'm using various <code>JsonResult</code> endpoints to populate the javascript ViewModel.</p>
  
  <p>I have been using several jQuery Ajax requests to populate the model, but I'd like as much of the inital model to be passed to the view on the server.</p>
  
  <p>The ViewModel has 3-5 pieces (depending on where the user is in the application):</p>
  
  <ol>
  <li>Basic page links, these don't change very often and could be the exact same throughout the entire user's session</li>
  <li>User notifications.</li>
  <li>User data.</li>
  <li>(optional) Viewable data</li>
  <li>(optional) misc data</li>
  </ol>
  
  <p>I'm currently using this code to load the first three pieces:</p>
  
  <pre><code>$(document).ready(function () {
  
      ko.applyBindings(viewModel);
      @Html.Raw(ViewBag.Script)
  
      // Piece 1.  Almost always the same thing
      postJSON('@Url.Action("HomeViewModelJson", "Home")', function (data) {
  
          if (data == null)
              return;
  
          for (var i in data.Tabs) {
              viewModel.tabs.push({ name: data.Tabs[i] });
          }
  
          for (var i in data.Buttons) {
              viewModel.metroButtons.push({ name: data.MetroButtons[i] });
          }
  
          for (var i in data.Ribbons) {
              viewModel.ribbons.push(data.Ribbons[i]);
          }
          ApplyButtonThemes();
      });
  });
  
  
  // Piece 2.  Changes constantly. OK as is
  postJSON('@Url.Action("GetNotifications", "NotificationAsync")', function (nots) {
      viewModel.notifications.removeAll();
  
      ko.utils.arrayForEach(nots, function (item) {
          item.readNotification = function () {
              hub.markNotificationAsRead(this.Id);
              return true;
          };
          viewModel.notifications.push(item);
      });
  });
  
  // Piece 3. Changes but should also be loaded at startup
  postJSON('@Url.Action("GetUser", "UserAsync")', function (user) {
      viewModel.user(koifyObject(user));
  });
  
  
  postJSON = function(url, data, callback) {
      if($.isFunction(data)) {
          callback = data;
          data = {};
      }
      $.ajax({
          'type': 'POST',
          'url': url,
          'contentType': 'application/json',
          'data': ko.toJSON(data),
          'dataType': 'json',
          'success': callback
      });
  };
  </code></pre>
  
  <p>I tried doing something like this, but I'm finding that by using the <code>@Html.Action("HomeViewModelJson", "Home")</code> is causing the HTTP headers to get changed and the whole page is sent as if it were JSON</p>
  
  <pre><code>       (function (data) {
  
              if (data == null)
                  return;
  
              for (var i in data.Tabs) {
                  viewModel.tabs.push({ name: data.Tabs[i] });
              }
  
              for (var i in data.MetroButtons) {
                  viewModel.metroButtons.push({ name: data.MetroButtons[i] });
              }
  
              for (var i in data.Ribbons) {
                  viewModel.ribbons.push(data.Ribbons[i]);
              }
              ApplyMetroButtonThemes();
          })('@Html.Action("HomeViewModelJson", "Home")');
  </code></pre>
  
  <p>What I'd like to do is use the existing <code>JsonResult</code> endpoints to get Json data into my ViewModel on the server side, before the page is sent to the user.</p>
  
  <p>Are there any options that will allow me to do that w/o rewriting my controllers?</p>