MVC 4中Async和Angular.js使用

发布时间：2020-12-17 08:43:50 所属栏目：安全来源：网络整理

导读：类图: 实体类 Categories.cs namespace MvcApplication2.Models{ using System; using System.Collections.Generic; public partial class Categories { public Categories () { this .Products = new HashSetProducts(); } public int CategoryID { get ; s

类图:

实体类

Categories.cs

namespace MvcApplication2.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Categories
    {
        public Categories()
        {
            this.Products = new HashSet<Products>();
        }

        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
        public string Description { get; set; }
        public byte[] Picture { get; set; }

        public virtual ICollection<Products> Products { get; set; }
    }
}

Products.cs

namespace MvcApplication2.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Products
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public Nullable<int> SupplierID { get; set; }
        public Nullable<int> CategoryID { get; set; }
        public string QuantityPerUnit { get; set; }
        public Nullable<decimal> UnitPrice { get; set; }
        public Nullable<short> UnitsInStock { get; set; }
        public Nullable<short> UnitsOnOrder { get; set; }
        public Nullable<short> ReorderLevel { get; set; }
        public bool Discontinued { get; set; }

        public virtual Categories Categories { get; set; }
    }
}

ProductsController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Data.Entity;
using System.Threading.Tasks;

namespace MvcApplication2.Controllers
{
    [RoutePrefix("api/products")]
    public class ProductsController : ApiController
    {
        Models.NorthwindEntities entity = new Models.NorthwindEntities();

        [HttpGet]
        [Route("categories")]
        public async Task<List<Models.Categories>> Get()
        {
            return await entity.Categories.ToListAsync<Models.Categories>();
        }

        [HttpGet]
        [Route("categories/{id}")]
        public async Task<Models.Categories> GetByID(int id)
        {
            await Task.Delay(5000);
            return await entity.Categories.Include("Products").FirstAsync(x => x.CategoryID == id);
        }
    }
}

index.html

<html> <head> </head> <body> <script src="node_modules/angular/angular.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="category in categories"> <h3>{{category.CategoryName}}</h3> <div ng-repeat="product in category.Products"> <span>{{product.ProductName}}</span> </div> </div> </div> <div id="timeresult"> </div> <script src="script.js"></script> </body> </html>

script.js

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http) {
    $http({
        method: 'GET',url: 'http://localhost:62801/api/products/categories'
    }).then(function successCallback(response) {
        $scope.categories = response.data;
        document.getElementById("timeresult").innerHTML += new Date().getSeconds() + "<br/>"
        angular.forEach($scope.categories,function(category) {
            setTimeout(function() {
              $http({
                  method: 'GET',url: 'http://localhost:62801/api/products/categories/' + category.CategoryID
              }).then(function successCallback(response) {
                  document.getElementById("timeresult").innerHTML += new Date().getSeconds() + "<br/>";
                  category.Products = response.data.Products;
              },function errorCallback(response) {});
            },1000);

        }); 

    },function errorCallback(response) {});
});

运行结果如图:

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!