How to Send multiple values from Asp.Net WebApi to Angularjs Controller?

Question

WebApi Controller.. How to send this value to Angularjs controller (bill = q.TotalBill;)? I have send this (return Ok(gridlist);) into JSON form into angularjs controller

public static double bill;  // this is static variable on top of a class
     [System.Web.Http.Route("api/Products/gridpro/{id}")]


           public IHttpActionResult GetGrid(int id)
            {

                var q = db.products.Find(id);
                if (q != null)
                {
                    var check = gridlist.Where(x => x.Id == id).FirstOrDefault();
                    if (check != null)
                    {
                        check.ProductQty += 1;
                        check.TotalAmount = check.ProductQty * check.ProductRate;
                    }
                    else
                    {
                        q.ProductQty = 1;
                        q.TotalAmount = q.ProductQty * q.ProductRate;

                        gridlist.Add(q);
                    }
                    q.TotalBill = gridlist.Sum(x => x.TotalAmount);
                    foreach (var item in gridlist)
                    {
                        item.TotalBill = q.TotalBill;
                    }
                    bill = q.TotalBill;   //How to send this value to Angularjs controller

                    return Ok(gridlist);
                }
                else
                {
                    return NotFound();
                }
            }

Anagularjs Code: I see all the data into the HTML using this ($scope.gridproducts) but I want to show (bill = q.TotalBill;) this single value into HTML code

$scope.OnProChange = function (Pro) {
            var id = Pro.Id;
            $http.get("/api/Products/gridpro/" + id).then(function (response) {
                console.log(JSON.stringify(response.data))
                $scope.gridproducts = response.data;
            })
        }

HTML code:How I can show total bill value I use {{gridproducts.TotalBill}} this but nothing works.

<tbody>
    <tr ng-repeat="item in gridproducts">
        <td>
            <a class="delete"><i class="fa fa-times-circle-o"></i></a>
        </td>
        <td class="name">{{item.ProductName}}</td>
        <td>{{item.ProductRate}}</td>
        <td>
            <input class="form-control qty" style="width:50px" onchange="UpdatePurchaseItem('36',this.value)" value="{{item.ProductQty}}">
        </td>
        <td>{{item.TotalAmount}}</td>
    </tr>
    <tr></tr>
    <tfoot>
        <tr>
            <th colspan="2"></th>
            <th colspan="2"><b>Total</b></th>
            <th><b>{{gridproducts.TotalBill}}</b></th>
        </tr>
        <tr>
            <th colspan="2"><b></b></th>
            <th colspan="2"><b>Total Items</b></th>
            <th><b>25</b></th>
        </tr>
    </tfoot>
</tbody>

bill = q.TotalBill; how to send this seperate value to angularjs code?? — Umar Asif
– Umar Asif, Commented May 30, 2018 at 8:57
send back a DTO which has space for both that value and the list...you'll have to make a custom class which has one property to contain the list, and one property to contain the TotalBill variable. Just like a ViewModel, if you've used MVC at all. — ADyson
– ADyson, Commented May 30, 2018 at 9:04
@ADyson Thanks for your response now my issue is ..bill = q.TotalBill; how to send this seperate value to angularjs code?? — Umar Asif
– Umar Asif, Commented May 30, 2018 at 9:09

Mehmet Emin Yalçın · Accepted Answer · 2018-05-30 09:06:14Z

1

if you want send multiple values to angularjs , you may create complex type for that. for example, in c# code

Public Class GridDataModel<T>
{
    public T ItemList{get;set;}

    public int TotalBill{get;set}

}

then when you return data to js

var gridData=new GridDataModel<products>()
{
    ItemList=gridlist,
    TotalBill=q.TotalBill

}

return Ok(gridData);

after doing this , you can create another propert for js scope

 $http.get("/api/Products/gridpro/" + id).then(function (response) {
                console.log(JSON.stringify(response.data))
                $scope.gridproducts = response.data.ItemList;
                $scope.totalBill = response.data.TotalBill;
            })

answered May 30, 2018 at 9:06

Mehmet Emin Yalçın

1281 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Send multiple values from Asp.Net WebApi to Angularjs Controller?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related