I just want to pass the list to the asp.net web api using angularjs

Question

I'm working on EAV database pattern. My model is like this:

public class LeadsModel
{
    public int? CompId { get; set; }
    public int LeadID { get; set; }
    public string LeadName { get; set; }
    public string source { get; set; }
    public string status { get; set; }
    public int UserId { get; set; }

    [Required]
    public List<AttributesModel> AList { get; set; }

}

My view is like this. In view I'm fetching the list of attributes and I want to post back the using angularjs.

<div class="form-group" ng-repeat="At in Attributes" >
                        <label for="{{At.Attri}}" class="col-md-4 control-label">{{At.Attri}}</label>
                        <div class="col-md-8">
                            @*<input type="hidden" name="{{At.AID}}" data-ng-model="newLead.NewAlist" />*@
                            <input type="text" class="form-control" id="{{At.Attri}}" name="{{At.Attri}}" pl placeholder="Enter {{At.Attri}}" data-ng-model="newLead.AList.AttriValue" ng-blur="AddItemToList(newLead.Alist.AttriValue)" />
                        </div>
                    </div>

My Angular code is like this

 $scope.add = function ()
    {
        $scope.loading = true;
        this.newLead.AList = $scope.listt;
        $http.post('/api/Leads/Posttbl_Lead', this.newLead).success(function (data) { 
            alert("Added Successfully!!");
            $scope.loading = false;
            $scope.addLMode = false;
        })
        .error(function () {
            $scope.error = "An Error has occured while loading posts!";
            $scope.loading = false;
        });
    }

and my web api controller is like this

public IHttpActionResult Posttbl_Lead(LeadsModel tbl_Lead)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }
        tbl_Lead newLead = new tbl_Lead();
        newLead.LeadName = tbl_Lead.LeadName;
        newLead.source = tbl_Lead.source;
        newLead.status = tbl_Lead.status;
        newLead.LeadName = tbl_Lead.LeadName;
        newLead.CompId = tbl_Lead.CompId;

        db.tbl_Lead.Add(newLead);
        db.SaveChanges();

        return CreatedAtRoute("DefaultApi", new { id = tbl_Lead.LeadID }, tbl_Lead);
    }

Answer 1

Use this code to post your newLead of AngularJs to tbl_Lead of your API contoller. This is the complementary link for You to pass the list/ array object to You API.

$http({

    contentType: "application/json; charset=utf-8",//required

    method: "POST",

    url: '/api/Leads/Posttbl_Lead',

    dataType: "json",//optional

    data:{ "tbl_Lead": newLead },

    async: "isAsync"//optional

})
  .success( function (response) {

       alert('Saved Successfully.');                    

   })
  .error(function () {
        $scope.error = "An Error has occured while loading posts!";
        $scope.loading = false;
   });

Edit-1

Below mentioned is the way to send AList inside LeadsModel to your api.

LeadsModel to send onto the server via API.

{
    CompId=compId,
    LeadID=leadID,
    AList=[{FirstObject=firstObject},{SecondObject=secondObject}]
}