MVCはJSON ViewModelをViewに渡します

Question

私はMVCアプリケーションを使用して、さまざまなJsonResultエンドポイントを使用してJavaScriptのViewModelを設定しています。

私はモデルにデータを入れるためにいくつかのjQuery Ajaxリクエストを使用していますが、サーバー上のビューに渡す必要があるのは、初期モデルの多くです。 ViewModelには、（ユーザーがアプリケーションにある場所に応じて）3-5枚あり

は：

1. 基本的なページのリンクを、これらは非常に頻繁に変更しないと全体のユーザーの全体まったく同じかもしれませんセッション
2. ユーザー通知。
3. ユーザデータ。
4. （オプション）表示可能なデータ
5. （オプション）その他のデータ

私は現在、最初の3枚をロードするために、このコードを使用しています：

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

私はこのような何かをやってみました、しかし、私は@Html.Action("HomeViewModelJson", "Home")を使って、HTTPヘッダが変更され、JSONであるかのようにページ全体が送信されることを確認しています。

私がしたいのは、既存のJsonResultエンドポイントを使用して、ページがユーザーに送信される前にJsonデータをサーバー側の自分のViewModelに取得することです。

コントローラーの書き換えを行わずにそのオプションを使用できるようにするオプションはありますか？

Answer 1

あなたがビューモデルを使用しているメインビューをレンダリングするとき、右ですか？

：あなたはAJAX要求に使用され、次のアクションを持っている場合、例えば

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

：このビューモデルでは、単にビューを返す前にAJAXでフェッチされないようにするプロパティを移入

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

あなたは個々のプロパティ移入するために、メインのアクションからそれを使用することができ

：

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

をしてから対応するビューの内側にあなたがを使用することができます3210 JSON文字列にモデル全体をシリアル化する方法：

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

またはあなたがそれらのすべての必要がない場合は、また、個々のプロパティをシリアル化できます。それがうまくいくかもしれないように聞こえること

@model MyViewModel 
<script type="text/javascript"> 
    var prop1 = @Html.Raw(Json.Encode(Model.Prop1)); 
</script>