Xem qua MVC JSON ViewModel để xem

Question

Tôi có một ứng dụng MVC mà tôi đang sử dụng nhiều điểm cuối JsonResult để điền ViewModel javascript.

Tôi đã sử dụng một số yêu cầu jQuery Ajax để điền vào mô hình, nhưng tôi muốn phần lớn mô hình bộ phận sinh dục được chuyển đến chế độ xem trên máy chủ.

ViewModel có 3-5 miếng (tùy thuộc vào nơi người dùng đang ở trong ứng dụng):

1. liên kết trang cơ bản, những không thay đổi rất thường xuyên và có thể là chính xác cùng khắp người sử dụng toàn bộ của phiên
2. Thông báo của người dùng.
3. Dữ liệu người dùng.
4. (không bắt buộc) dữ liệu thể xem
dữ liệu
5. (không bắt buộc) misc

Tôi hiện đang sử dụng mã này để nạp ba phần đầu tiên:

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

tôi đã cố gắng làm một cái gì đó như thế này, nhưng tôi thấy rằng bằng cách sử dụng @Html.Action("HomeViewModelJson", "Home") đang khiến tiêu đề HTTP bị thay đổi và toàn bộ trang được gửi như thể đó là 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")'); 

Điều tôi muốn làm là sử dụng các điểm cuối JsonResult hiện có để nhận dữ liệu Json vào ViewModel của tôi ở phía máy chủ, trước khi trang được gửi tới người dùng.

Có bất kỳ tùy chọn nào cho phép tôi thực hiện điều đó bằng cách viết lại bộ điều khiển của mình không?

Answer 1

Khi hiển thị chế độ xem chính bạn đang sử dụng mô hình chế độ xem, phải không? Trong mô hình quan điểm này chỉ đơn giản là cư các thuộc tính mà bạn không muốn được lấy với AJAX trước khi trở về quan điểm:

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

ví dụ nếu bạn có những hành động sau đây được sử dụng cho các yêu cầu AJAX:

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

bạn có thể sử dụng nó từ hành động chính để cư thuộc tính cá nhân:

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

và sau đó bên trong khung nhìn tương ứng bạn có thể sử dụng Json.Encode phương pháp để serialize toàn bộ mô hình thành một chuỗi JSON:

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

hoặc bạn cũng có thể serialize tính cá nhân nếu bạn không cần tất cả trong số họ:

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