2016-06-10 43 views
1

我是angularjs的新手。尝试编码单人记录的编辑功能。与AngularJS和Razor绑定值

<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是未定义的。

+1

这是一个使用Razor和AngularJS的奇怪概念。看到他们都做大致相同的事情。一般来说,你只需要一个或另一个,即使不是更多,你也可以获得同样的收益。根据我的经验,让他们站在我的身边导致了比解决问题更多的问题。 –

回答

0

而不必ng-value(单程约束力的)指令,将ng-model指令在你的文本框,使两路像ng_model="Name"结合。因此,在文本框中发生的任何时间变化都会反映各个ng-model范围变量中的变化。

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

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