如何使用带有 Angular ng-bind 属性的 MVC 模型绑定答案

【问题标题】：How to use MVC Model binding with an Angular ng-bind attribute如何使用带有 Angular ng-bind 属性的 MVC 模型绑定
【发布时间】：2016-03-08 06:19:51
【问题描述】：

在我看来，我有一个带有 ng-bind 属性的标签，它显示了正确的布尔值：

<span id="ShowFlag" name="ShowFlag" ng-bind="session.view.showFlag"></span>

当表单发布到服务器端时，我想将其绑定到相关模型上的属性。

public bool ShowFlag { get; set; }

但是，这总是返回 false，而 Span 标记中显示的值在页面上正确显示为 true。我这里有什么明显的遗漏吗？

【问题讨论】：

在 chrome 开发者控制台的网络选项卡中，检查您实际发回服务器的内容。也许答案就在那里。
问题似乎与 MVC 模型绑定有关 - 我可以看到在调试 POST 控制器操作时，模型的属性中已将其设置为 false。
所以您确定实际帖子在 ShowFlag 中包含“真实”？其他字段是否设置正确？

标签： c# angularjs asp.net-mvc

【解决方案1】：

我认为您对 AngularJs 绑定的工作方式有所欠缺。如果你想从服务器获取一个值到一个 Angular 模型中，你可以使用 Razor 将该数据获取到 JavaScript（最好的位置是在你的 Angular 控制器中。）

这是我整理的一个快速示例。

这是来自 MVC 控制器的代码。在此示例中，我们使用模型数据和 ViewBag 数据。

public ActionResult Index()
{
    dynamic model = new ExpandoObject();
    model.ShowFlag = "True";

    ViewBag.ShowFlag = "ViewBag True";
    return View(model);
}

这是视图的样子，包括参考 Angular、JQuery 以及 AngularJs 应用和控制器的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
</head>
<body>
    <div>
        <h2>Sample For Stack Overflow</h2>

        <div ng-app="glennapp">
            <div ng-controller="testController">
                <input type="text" ng-model="showFlag" />
                <input type="text" ng-model="showFlag2" />

                <div>
                    <span ng-bind="showFlag" ></span>
                    <span ng-bind="showFlag2" ></span>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="//code.angularjs.org/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var mainApp = angular.module('glennapp', ['glennControllers']);
        var glennControllers = angular.module('glennControllers', []);
        glennControllers.controller('testController', ['$scope', function ($scope) {

            $scope.showFlag = '@ViewBag.ShowFlag';
            $scope.showFlag2 = '@Model.ShowFlag';
        }]);
    </script>
</body>
</html>

另一种选择是创建一个返回 JsonResult 的 MVC 操作，然后编写一些 JavaScript 来进行 Ajax 调用并检索数据。

【讨论】：

【解决方案2】：

发布表单时，只有输入和选择标记值会传递给服务器在您的情况下，ShowFlag 是一个跨度，因此您需要将其作为输入：

<input type="checkbox" id="ShowFlag" name="ShowFlag" ng-bind="session.view.showFlag"/>

如果您使用 ajax 发布到服务器，请确保正确序列化模型：

例如对于以下操作：

public ActionResult (FlagsConatiner container)
{
   //
} 

public class FlagsConatiner 
{
   public bool ShowFlag { get; set; }
}

序列化模型应如下所示：

{
   "ShowFlag":"true"
}

【讨论】：

【解决方案3】：

如上所述，您必须使用输入才能使绑定成功。我使用了以下现在正在工作的：

<input type="hidden" id="ShowFlag" name="ShowFlag" ng-value="session.view.showFlag">

【讨论】：