angularjsasp.net-mvcapiwep

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


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);
    }

Solution

  • 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}]
    }