Geek Answers Handbook

Angular model binding to MVC Html.TextBoxFOr

I have controls bound to ASP.net MVC5

 @Html.TextBoxFor(model => model.OriginLocation.City, new { @class = "form-control", data_ng_model = "address1.City", test_change = "" })

Thus, when a page loads a text field input value, it is bound and should display the value coming from the service using Razor-related controls, the latter I can manipulate this value, which changes the angular model for this control. I have a text box loaded empty. I see the value when viewing the source, but it is not displayed.

<input class="form-control ng-pristine ng-valid" data-ng-model="address1.City" data-val="true" data-val-length="The field City must be a string with a maximum length of 50." data-val-length-max="50" id="OriginLocation_City" name="OriginLocation.City" test-change="" type="text" value="Manheim">

js

app.controller('LocationCtrl', ["$scope",
function ($scope) {
  $scope.address1 = { Label: 'address1' };
+4
source share
4 answers

ngModel , ( "", ). ...

http://jsfiddle.net/yApeP/

ngInit...

http://jsfiddle.net/D7vh7/

, ngInit ...

@Html.TextBoxFor(model => model.OriginLocation.City,
    new { @class = "form-control", 
         data_ng_model = "address1.City", 
         test_change = "",
         data_ng_init = string.Format("address1.City = '{0}'", Model.OriginLocation.City.Replace("'", @"\'"))  })
+16

Angular , , Angular. , MVC ( ) Angular:

app.controller("TestController", function($scope) {
    $scope.person = @Html.Raw(JsonConvert.SerializeObject(Model.Person));
});

MVC :

@Html.TextBoxFor(x => x.Person.Name, new { ng_model = "person.Name" })
+2

@Alan, , " " . , , ASP MVC Angular.js.

Angular ( Razor), , :

<script>
    //Add the namespace you want to not poluate the global namespace
    window.Model = @Html.Raw(JsonConvert.SerializeObject(Model))
</script>

[ScriptIgnore] , ( ).

public class Classroom {
    public string Title {get;set;}

    [ScriptIgnore]
    //Students could be associated to classroom, and that classroom has  
    //  students etc. If you want those properties, create a new object in a 
    //  PageView withtout circular references
    public List<Students> Students {get;set;}
}

-

app.controller("TestController", function($scope) {
    $scope.model = window.Model;
    //My other stuff...
});

, Angular SAME, ASP MVC.

+2

- value .

Razor yout, Razor.

 <input type="text" class="form-control" id="name" name="name" value="@Model.Name" data-ng-model="myModel.name">
Hide result

@Model.Name , , Angular .

, , "" ngModel, , , Angular . ( "prioriy: 0" , )

function inputDirective(){
    return {
        restrict:'A',
        priority: 0,
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModelCtrl){                      
                  ngModelCtrl.$setViewValue($(elem).val());
              }
    };
}
Hide result

, Razor Angular

0

More articles:


All Articles