Передача ViewData из контроллера C # для просмотра в угловой контроллер

Question

Итак, я довольно новый пользователь AngularJS, и я впервые работаю с .NET Core и пытаюсь изменить унаследованный код. Я читаю в файле, используя StreamReader, и количество строк, успешно переданных в представление Home Index,

    public IActionResult Index(int? period, int? length)
            {
                if (User.Identity.IsAuthenticated)
                {
                    ViewData["Name"] = GetUsersName();
                    return View();
                } else
                {
                    return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
                }
                ViewData["period"] = period;
                ViewData["length"] = length;
            }

Оттуда я собираюсь переместить длину int в мой View, чтобы я мог передать значение моему контроллеру Angular для простого вычисления.

Home Index header:

        @{
        ViewData["Title"] = "Home Page";
        var user = Json.Serialize(ViewData["Name"]);
        var length = Json.Serialize(ViewData["length"]);
    }

    <div class="" ng-controller="homeController as home"
         ng-init="home.initValues(); home.move(@length)">

            <div id="myProgress">
                <div id="myBar">0%</div>
            </div>
            <button style="margin: 5px" ng-click='home.move()'>Refresh Status</button>
            <div>Stream Length: @length</div>

            </div>

Я пытаюсь вывести переменную на экран, чтобы просто увидеть, что значение int проходит правильно, хотя оно всегда отображается как "null".

Конечная цель - заполнить значение в моем контроллере Angular, чтобы заменить жестко запрограммированное значение «23894» на самое последнее число строк в загруженном мной файле.

    self.move = function (streamLength){ 

            var elem = document.getElementById("myBar");
            var percent = self.variances[0].totalVariances;
            console.log("Total variances: " + percent);
            console.log("Stream length: " + streamLength);

            var width = 1;
            var id = setInterval(frame, 10);
            function frame() {
                if (width >= (percent / 23894) * 100) {
                    clearInterval(id);
                } else {
                    width++;
                    elem.style.width = width + '%';
                    elem.innerHTML = width * 1 + '%';
                }
            }
            console.log("Percentage: " + width);
            console.log(percent / 23894);
        }

Окончательный расчет поможет выбрать соответствующую «заливку» для моей строки состояния.

Пример строки состояния

Любые рекомендации или предложения приветствуются!

Answer 1

Хорошо, мне удалось получить переменную, переданную в контроллер. Из того, что я могу сказать, это были две вещи. Первый C # Home Controller:

public IActionResult Index(int? period, int? length)
        {
            if (User.Identity.IsAuthenticated)
            {
                ViewData["Name"] = GetUsersName();
                ViewData["length"] = length;
                return View();
            } else
            {
                return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
            }
            ViewData["period"] = period;
        }

Перемещение совокупности ViewData ПЕРЕД возвращаемым представлением в цикле If было критическим. Код никогда не достигал раньше и выводился из строя до того, как ViewData был когда-либо достигнут.

Во-вторых, похоже, что я неправильно передал переменную в контроллер. Это сработало:

    @{
        ViewData["Title"] = "Home Page";
        var user = Json.Serialize(ViewData["Name"]);
        var length = Json.Serialize(ViewData["length"]);
        var streamLength = (ViewData["length"]);
     }

        <div class="" ng-controller="homeController as home"
             ng-init="home.initValues(); home.move(@length)">
                <div id="myProgress">
                    <div id="myBar">0%</div>
                </div>
                <button style="margin: 5px" ng-click='home.move(@length)'>Refresh Status</button>
                <div>Stream Length: @streamLength </div>

                </div>

Извлеченные уроки.