如何将多个值从 Asp.Net WebApi 发送到 Angularjs 控制器？答案

【问题标题】：How to Send multiple values from Asp.Net WebApi to Angularjs Controller?如何将多个值从 Asp.Net WebApi 发送到 Angularjs 控制器？
【发布时间】：2018-05-30 18:06:28
【问题描述】：

WebApi Controller.. 如何将此值发送到 Angularjs 控制器（bill = q.TotalBill;）？我已经将这个（返回 Ok（gridlist）；）以 JSON 形式发送到 angularjs 控制器中

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 中看到所有数据，但我想在 HTML 代码中显示 (bill = q.TotalBill;) 这个单一值

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

【问题讨论】：

你试过了吗？ {{gridproducts[0].TotalBill}}
感谢他的工作......
账单 = q.TotalBill;如何将这个单独的值发送到 angularjs 代码？？
发回一个 DTO，其中包含该值和列表的空间...您必须创建一个自定义类，该类具有一个包含列表的属性和一个包含 TotalBill 的属性多变的。就像一个 ViewModel，如果你用过 MVC。
@ADyson 感谢您的回复，现在我的问题是 ..bill = q.TotalBill;如何将这个单独的值发送到 angularjs 代码？？

标签： angularjs asp.net-mvc entity-framework asp.net-web-api

【解决方案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 范围创建另一个属性

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

【讨论】：