将ViewData从C#控制器传递到View到Angular控制器

时间:2019-01-17 20:52:01

标签: c# angular model-view-controller .net-core

所以我是一个相当新的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长度移动到View,以便可以将值传递给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);
        }

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

Status Bar Example

任何建议或建议都将不胜感激!

1 个答案:

答案 0 :(得分:0)

我成功地将变量传递给了控制器。据我所知,这是两件事。首先是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;
        }

在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>

经验教训。