MVC passer JSON ViewModel de Vue

J'ai une application MVC que je suis en utilisant divers JsonResult points de terminaison pour remplir le javascript ViewModel.

J'ai été en utilisant plusieurs requêtes Ajax jQuery pour alimenter le modèle, mais j'aimerais autant le premier modèle à être passé à la vue sur le serveur.

Le ViewModel a 3-5 pièces (selon l'emplacement de l'utilisateur dans l'application):

  1. De base de la page de liens, ceux-ci ne changent pas très souvent et pourrait être exactement le même tout au long de l'ensemble de la session de l'utilisateur
  2. Notifications à l'utilisateur.
  3. Les données de l'utilisateur.
  4. (en option) données Affichables
  5. (facultatif) divers data

Je suis actuellement en utilisant ce code pour charger les trois premiers morceaux:

$(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
});
};

J'ai essayé de faire quelque chose comme ça, mais je trouve qu'en utilisant le @Html.Action("HomeViewModelJson", "Home") est à l'origine de l'en-tête HTTP de se changer et de l'ensemble de la page est envoyée comme si c'était JSON

       (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")');

Ce que je voudrais faire est d'utiliser l'existant JsonResult d'extrémité afin d'obtenir des données Json dans mon ViewModel sur le côté serveur, avant que la page est envoyé à l'utilisateur.

Sont là toutes les options qui me permettra de le faire w/o la réécriture de mon contrôleurs?

InformationsquelleAutor joe_coolish | 2012-05-04
  1. 9

    Lors du rendu de l'écran principal vous utilisez un modèle de vue, non? Dans ce modèle de vue simplement remplir les propriétés que vous ne voulez pas être récupérées avec AJAX avant de retourner la voir:

    public ActionResult Index()
{
MyViewModel model = ...
model.Prop1 = ...
model.Prop2 = ...
return View(model);
}

    par exemple, si vous avez l'action suivante qui est utilisé pour les requêtes AJAX:

    public JsonResult GetProp1()
{
Property1ViewModel model = ...
return Json(model, JsonRequestBehavior.AllowGet);
}

    vous pouvez l'utiliser à partir de l'action principale à remplir des propriétés individuelles:

    model.Prop1 = (Property1ViewModel)GetProp1().Data;
model.Prop2 = (Property2ViewModel)GetProp2().Data;

    et puis à l'intérieur de la vue correspondante, vous pouvez utiliser les Json.Encode méthode pour sérialiser l'ensemble du modèle dans une chaîne JSON:

    @model MyViewModel
<script type="text/javascript">
var model = @Html.Raw(Json.Encode(Model));
//You could use model.Prop1 and model.Prop2 here
</script>

    ou vous pouvez aussi les sérialiser les propriétés individuelles si vous n'avez pas besoin de tous:

    @model MyViewModel
<script type="text/javascript">
var prop1 = @Html.Raw(Json.Encode(Model.Prop1));
</script>
    • Qui sonne comme il pourrait travailler! Permettez-moi de l'essayer 🙂 je ne savais même pas que c'était possible!
    • Oublié de les accepter. A très bien fonctionné!
    • +1 Belle .............
    InformationsquelleAutor Darin Dimitrov