Question

WebApi Controller ..如何将此值发送到Angularjs控制器（bill = q.TotalBill;）？我已将此（返回Ok（gridlist）;）发送到JSON格式为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代码：我使用这个（$ scope.gridproducts）将所有数据都显示在HTML中，但我想将这个单一值显示（bill = q.TotalBill;）转换为HTML代码

$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代码：我如何使用{{gridproducts.TotalBill}}显示总帐单价值，但这没有效果。

<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>

Answer 1

如果要向angularjs发送多个值，可以为其创建复杂类型。例如，在c＃代码中

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

    public int TotalBill{get;set}

}

然后将数据返回给js

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

}

return Ok(gridData);

执行此操作后，您可以为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;
            })

如何从Asp.Net WebApi向Angularjs控制器发送多个值？

1 个答案: