Asp.net mvc 3 MVC将JSON视图模型传递给视图
我有一个MVC应用程序,我正在使用各种Asp.net mvc 3 MVC将JSON视图模型传递给视图,asp.net-mvc-3,knockout.js,jsonp,viewmodel,Asp.net Mvc 3,Knockout.js,Jsonp,Viewmodel,我有一个MVC应用程序,我正在使用各种JsonResult端点来填充javascript视图模型 我已经使用了几个jqueryajax请求来填充模型,但是我希望尽可能多地将初始模型传递给服务器上的视图 ViewModel有3-5个部分(取决于用户在应用程序中的位置): 基本页面链接,这些链接不会经常更改,在整个用户会话中可能完全相同 用户通知 用户数据 (可选)可查看的数据 (可选)杂项数据 我目前正在使用此代码加载前三部分: $(document).ready(function () {
JsonResult
端点来填充javascript视图模型
我已经使用了几个jqueryajax请求来填充模型,但是我希望尽可能多地将初始模型传递给服务器上的视图
ViewModel有3-5个部分(取决于用户在应用程序中的位置):
$(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一样被发送
(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")');
我想做的是,在将页面发送给用户之前,使用现有的JsonResult
端点将Json数据获取到服务器端的ViewModel中
是否有任何选项允许我在不重写控制器的情况下执行此操作?在渲染主视图时,您使用的是视图模型,对吗?在此视图模型中,在返回视图之前,只需填充不希望使用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;
然后在相应的视图中,您可以使用Json.Encode
方法将整个模型序列化为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
var model=@Html.Raw(Json.Encode(model));
//您可以在这里使用model.Prop1和model.Prop2
或者,如果不需要所有属性,也可以序列化单个属性:
@model MyViewModel
<script type="text/javascript">
var prop1 = @Html.Raw(Json.Encode(Model.Prop1));
</script>
@model MyViewModel
var prop1=@Html.Raw(Json.Encode(Model.prop1));
听起来可能有用!让我试试:)我甚至不知道这是可能的!