Как отправить объект json в модель бритвы затем angularjs - PullRequest
Новая
       3

Как отправить объект json в модель бритвы затем angularjs

0 голосов
/ 22 февраля 2019

Так я отправлял свою модель в угловой контроллер.

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 Jsfile: 

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 # на угол, отличный от объекта глобального окна?

Вы можете использовать$ http get from angular, однако, поскольку он обрабатывается на стороне клиента, перед его отображением всегда есть небольшая задержка, потому что ему нужно вызвать контроллер c # и получить данные.Так что я зарезервировал $ http get только для обновлений.

Другой способ, которым я думал, это сразу отправить представление Json-объекта:

c # controller: 

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 на этом этапе и отправить его в угловой файл и снова, если есть лучший вариант, чем объект глобального окна javascripts ... открой для предложений!

1 Ответ

0 голосов
/ 22 февраля 2019

В настоящее время мы делаем это для начальной загрузки набора данных, который позже обновляется вызовом в WebAPI.

Причина, по которой мы это делаем, заключается в том, что мы обнаружили случаи, когда данные при начальной загрузке через вызов API возвращались слишком медленно, что давало плохой опыт нашим пользователям.

В нашемпросмотр бритвы: 

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

Тогда, когда наше угловое приложение будет 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);
    }]);

Это позволит получить данные, доступные длясразу под углом, не дожидаясь завершения запроса $http, который должен решить вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...