asp.net-mvc-3 – MVC将JSON ViewModel传递给View

发布时间：2020-12-15 21:02:17 所属栏目：asp.Net 来源：网络整理

导读：我有一个MVC应用程序,我正在使用各种JsonResult端点来填充 javascript ViewModel. 我一直在使用几个jQuery Ajax请求来填充模型,但我希望将尽可能多的初始模型传递给服务器上的视图. ViewModel有3-5个部分(取决于用户在应用程序中的位置)：基本页面链接,这些

我有一个MVC应用程序,我正在使用各种JsonResult端点来填充 javascript ViewModel.

我一直在使用几个jQuery Ajax请求来填充模型,但我希望将尽可能多的初始模型传递给服务器上的视图.

ViewModel有3-5个部分(取决于用户在应用程序中的位置)：

>基本页面链接,这些链接不会经常更改,并且可能在整个用户的会话中完全相同
>用户通知.
>用户数据.
>(可选)可视数据
>(可选)misc数据

我目前正在使用此代码加载前三个部分：

$(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
<script type="text/javascript">
    var prop1 = @Html.Raw(Json.Encode(Model.Prop1));
</script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!