在MVC加载视图时显示一个Loading Overlay

Display a Loading Overlay while MVC is loading the View

本文关键字：一个 Loading Overlay 加载 MVC 视图 显示      更新时间：2023-09-26

我有一个MVC Razor站点，并希望在视图加载时显示我的loading.gif。我的设置看起来像这样:

    MainPage是一个带有客户的网格。
  • 当我点击网格中的客户时，我切换到CustomerPage。
  • 在CustomerPage是另一个网格，填充他们的信息

目前它显示加载覆盖，只要我点击客户在MainPage，只有改变视图时，一切都已经完成加载。我不想那样。这会带来奇怪的用户体验。它需要在加载信息

时在CustomerPage上显示网格

这是我的_Layout.cshtml:

中的相关部分
<div loading-Overlay></div>
<div id="MainBody" ng-if="!isRouteLoading" ui-view="main">
    @RenderBody()
</div>
这是我的加载叠加指令: 
(function () {
"use strict";
angular
    .module("myApp")
    .directive("loadingOverlay", ["$http",
        function ($http) {
            return {
                restrict: "A",
                replace: true,
                templateUrl: "./Scripts/app/loading.overlay.html",
                scope: {},
                link: function (scope, element) {
                    scope.isLoading = function () {
                        return $http.pendingRequests.length > 0;
                    };
                    scope.$watch(scope.isLoading,
                        function (value) {
                            return value ? element.addClass("show") : element.removeClass("show");
                        });
                }
            };
        }]);
})();

好的。你需要在这里输入$watch:

scope.$watch(function() {
    return $http.pendingRequests.length > 0;
 }, function() {
    return value ? element.addClass("show") : element.removeClass("show");
 });
相关文章：