使用 AngularJS 和 Razor 绑定值答案

【问题标题】：Bind values with AngularJS and Razor使用 AngularJS 和 Razor 绑定值
【发布时间】：2016-10-11 01:47:09
【问题描述】：

我是 angularjs 的新手。尝试编写单个人员记录的编辑功能。

<div ng-app="myapp">
        <div class="container">
            <div ng-controller="mycontroller">
                <div class="col-md-12 col-sm-12">

                    @Html.HiddenFor(o=>o.ID, new { @class = "form-control", ng_value="ID" })

                    <div class="form-group">
                        <label>Name</label>
                        @Html.TextBoxFor(o => o.Name, new { @class = "form-control", ng_value="Name" })
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        @Html.TextBoxFor(o => o.Address, new { @class = "form-control", ng_value="Address" })
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        @Html.TextBoxFor(o => o.Telephone, new { @class = "form-control", ng_value="Telephone" })
                    </div>

                    <div class="form-group">
                        <input type="button" value="Update" class="btn btn-primary" ng-click="updatedata()" />
                    </div>
                </div>
            </div>
        </div>
    </div> 

  <script>

        var app = angular.module("myapp", []);

        app.controller("mycontroller",function($scope,$http){

            $scope.updatedata = function () {
                alert($scope.Name);
                $http({ method: "post", url: "/Person/Edit", data: { id: $scope.ID, Name: $scope.Name, Address: $scope.Address, Telephone: $scope.Telephone } })
                .success(function () { alert("Success."); });

            }

        })

    </script>

当我点击更新按钮时。 $scope 不会将值传递给服务器端的 Edit 方法。所有的参数值都是空的，但实际上，值确实存在于文本框中。

看起来 AngularJS ng_value 和 Razor 加载的值之间存在冲突。

例如：$scope.Name 未定义。

【问题讨论】：

同时使用 Razor 和 AngularJS 是一个奇怪的概念。看到他们都做大致相同的事情。一般来说，你只需要一个或另一个，你仍然会受益于它们并排的好处，如果不是更多的话。根据我的经验，让他们站在我这边造成的问题多于解决的问题。

标签： javascript c# angularjs asp.net-mvc razor

【解决方案1】：

ng_value 不会将您的文本框值与范围变量绑定，因为它是一种绑定方式，而不是使用 ng_model 将您的模型数据与 angularjs 控制器范围绑定。

【讨论】：

【解决方案2】：

不要使用ng-value（单向绑定）指令，而是将ng-model 指令放在您的文本框上以启用像ng_model="Name" 这样的双向绑定。因此，文本框中发生的任何更改都将反映相应 ng-model 范围变量中的这些更改。

@Html.TextBoxFor(o => o.Telephone, 
   new { @class = "form-control", ng_value="Telephone", ng_model="Name" })

【讨论】：