时间戳

首页 > 解决方案 > 将 ViewData 从 C# 控制器传递到视图到 Angular 控制器

c# - 将 ViewData 从 C# 控制器传递到视图到 Angular 控制器

问题描述

所以我是一个非常新的 AngularJS 用户，这是我第一次使用 .NET Core 并尝试修改我继承的代码。我正在使用 StreamReader 读取文件，并将行数成功传递到我的主索引视图。

    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 长度移动到我的视图中，以便我可以将值传递给我的 Angular 控制器以进行简单的计算。

主页索引标题：

        @{
        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);
        }

最终计算将有助于为我的状态栏选择合适的“填充”。

状态栏示例

非常感谢任何建议或建议！

标签： c#angularmodel-view-controller.net-core

解决方案

好吧，我成功地将变量传递给控制器​​。据我所知，这是两件事。首先是 C# Home 控制器：

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;
        }

在 If 循环中返回 View 之前移动 ViewData 人口至关重要。代码以前从未到达过，并且在到达 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>

得到教训。

推荐阅读