MVC 4中Async和Angular.js使用

最新推荐文章于 2024-06-16 09:44:00 发布

.NET跨平台

最新推荐文章于 2024-06-16 09:44:00 发布

阅读量545

点赞数

分类专栏： ASP.NET MVC4|MVC5 异步编程文章标签： async MVC4

本文链接：https://blog.csdn.net/WuLex/article/details/78163275

版权

ASP.NET MVC4|MVC5 同时被 2 个专栏收录

122 篇文章 11 订阅

订阅专栏

异步编程

26 篇文章 8 订阅

订阅专栏

类图:

这里写图片描述

实体类

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