如何将json对象发送到剃须刀模型然后angularjs答案

【问题标题】：How to send json object to razor model then angularjs如何将json对象发送到剃须刀模型然后angularjs
【发布时间】：2019-07-16 00:54:42
【问题描述】：

这是我将模型发送到角度控制器范围的方式。

c#控制器：

public class AreaMenuController : RootController
{
    // GET: Menu
    public PartialViewResult Index()
    {
        var mod = Modules.Instance.ModuleList.FirstOrDefault(m => m.Prefix.Equals(base.GetArea(), StringComparison.CurrentCultureIgnoreCase));
        return PartialView("_AreaMenu", mod.ModuleMenus);
    }
}

查看cshtml：

@using Nuclei.Models
@model IEnumerable<Nuclei.Models.Menu>
<script type="text/javascript">
    @{ var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); }
    window.areaMenus = @Html.Raw(serializer.Serialize(Model));
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/AngularControllers/_AreaMenuController.js")"></script>
<div ng-controller="AreaMenuController as vm" ng-init="vm.initializeController()">
    <div id="accordion" ng-class="accordian-menu" style="visibility: visible;">
        <ul>
            <li ng-repeat="menu in vm.areaMenus">
                ...
            </li>
        </ul>
    </div>
</div>

Angular Js 文件：

var NucleiApp = angular.module('NucleiApp');
NucleiApp.controller('AreaMenuController', ['$scope', '$http', '$location', function ($scope, $http, $location) {

    "use strict";

    var vm = this;

    vm.initializeController = function () {
        vm.areaMenus = window.areaMenus;
    }
}]);

问题 1：除了通过全局窗口对象之外，有没有更流畅的方式将您的 c# 模型发送到 Angular？

您可以使用 $http 从 angular 获取，但是因为这是在客户端处理的，所以在显示之前总是有一点延迟，因为它需要调用 c# 控制器并获取数据。所以我只保留 $http get 用于更新。

我想的另一种方法是直接向视图发送一个 Json 对象：

c#控制器：

public class AreaMenusController : RootController
{
    // GET: Menu
    public PartialViewResult Index()
    {
        return PartialView("_AreaMenu", GetAreaMenus());
    }

    public JsonResult GetAreaMenus()
    {
        var mod = Modules.Instance.ModuleList.FirstOrDefault(m => m.Prefix.Equals(base.GetArea(), StringComparison.CurrentCultureIgnoreCase));

        return Json(new { areaMenus = mod.ModuleMenus }, JsonRequestBehavior.AllowGet);
    }
}

查看cshtml：

@using System.Web.Mvc
@model JsonResult
<script type="text/javascript">
    window.areaMenus = @Model;
</script>

问题 2： 我不确定此时如何初始化 @model 并将其发送到 angular 文件，如果有比 javascripts 全局窗口对象更好的选项...欢迎提出建议！

【问题讨论】：

Really angular 旨在与 SPA 模型一起使用，您可以通过返回 JSON 的 api 调用从服务器获取所需的一切，而不是通过您在这里使用 razor 进行的那种模板。跨度>
我以友好的方式问这个问题。如果是这种情况，您是否发现我在一直加载页面时通过角度呈现内容时所谈论的滞后。实际上，我发现 Angular 对于模板与 razor 和 jquery 组合相比要好得多？而且它非常适合更新您的客户端模型，而不是用于初始加载，这就是我将其混合起来的原因。
但是这仍然不能回答初始化剃须刀模型的问题，这正是我现在正在寻找的。span>
这就是为什么 Angular 更适合 SPA 的原因 - 正是因为您不会一直重新加载页面。角度的初始加载时间并不重要。所以你只加载一次，之后的一切都只是 JSON API 调用。
是的@Hank，我知道我没有回答直接问题。这就是我提供此评论的原因。通常，问题的真正答案是换一种方式思考问题或改变思路。你当然可以在任何地方将 razor 内容注入到 javascript 文件中，当我第一次开始使用 Angular 时，我就是这样做的。从未通过窗口对象。我不知道你为什么觉得有必要。但是，如果您切换到 API 调用而不是页面加载，那么一切都会变得有意义并且运行得更顺畅。不过，我知道过渡是一项重大投资。

标签： c# angularjs json asp.net-mvc model-view-controller

【解决方案1】：

我们目前这样做是为了引导一组数据，这些数据稍后会通过调用 WebAPI 进行更新。

我们这样做的原因是，我们发现数据在通过 API 调用引导时返回的速度太慢，这给我们的用户带来了糟糕的体验。

在我们看来：

<html>
    <head>
        <script>
            window.areaMenus = '@Html.Raw(Model.SerializedJsonString)';
        </script>
    </head>
</html>

然后当我们的 Angular 应用程序是 Run() 时，我们反序列化数据，并从那里使用它：

var app = angular.module('myApp', ["stuff"])
    .run(["menuService", (menuService) => {
        // deserialize the json string into my object
        var areaMenus = angular.fromJson(window.areaMenus);
        // do something with it
        menuService.Load(areaMenus);
    }]);

这将立即获得可用于 Angular 的数据，而无需等待 $http 请求完成，这应该可以解决您的问题。

【讨论】：

这正是我的想法，你有点两全其美。第一组示例运行良好，我只是想对其进行改进。在第二个示例中，我没有发送实际的 ModuleMenu 对象，而是在服务器上进行序列化并将 json 对象发送到视图。所以最终起作用的是稍微调整你的答案：window.areaMenus = @Html.Raw(Model);
我不可能有这个权利，它停止工作了。如果我将 json 数据直接发送到模型，我不应该在将其添加到 window.areaMenus 和角度之前进行任何序列化吗？
您还使用任何@using 声明来初始化模型吗？如果 window.areaMenus 是 json 格式，难道 Angular 不能按原样读取它吗？
那你@Model的内容是什么？这是一个序列化的 json 字符串吗？您没有将 object 分配给 window.areaMenus，您需要传递一个包含序列化 json 的字符串，然后在 angular 端对其进行反序列化。
啊，我正在序列化一个 JsonResult，它可以工作，但在角度上得到了奇怪的结果，正如你所料。我不必这样做： angular.fromJson() 没有它就可以工作。不确定 SerializedJsonString 来自哪里，这是您自己的扩展吗？