Code Snippet
public class DynamicModel
{
public List<string> PayoutID { get; set; }
public List<string> PayoutType { get; set; }
}
Controller Implementation
[HttpPost]
public ActionResult DynamicDiv(DynamicModel model)
{
return View();
}
View Using AngularJs Model Binding
<script src="~/Scripts/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller("myController", function ($scope, $http) {
$scope.Payout = {
PayoutID: '',
PayoutType: ''
};
$scope.SendDynamicData = function () {
$http({
method: 'post',
url: '/Home/DynamicDiv',
data: { model: $scope.Payout }
}).success(function (data) {
alert(data.Message);
}).error(function () {
alert("Something went Wrong");
});
};
});
</script>
<div ng-app="myApp" ng-controller="myController">
@using (@Html.BeginForm("DynamicDiv", "Home", FormMethod.Post))
{
<div>
<div class="form-group">
<label>Enter Payout ID</label>
<input type="text" class="form-control" ng-model="Payout.PayoutID" name="Payout.PayoutID" />
</div>
<div class="form-group">
<label>Enter Payout Type</label>
<input type="text" class="form-control" ng-model="Payout.PayoutType" name="Payout.PayoutType" />
</div>
<div class="form-group">
<input type="button" class="btn btn-success" ng-click="SendDynamicData()" value="Submit" />
</div>
</div>
}
</div>
If multiple text-boxes are added dynamically in the front end, the values should be in the form of list<string>. However, one text-box works fine with a single ng-model.
How can these dynamic input values be sent to the controller?