在 ASP.NET Web 表单中使用 abp.services in JavaScript

Question

我知道之前有人问过，但我的问题是关于直接在 JavaScript 中使用 abp.services 方法。

假设我有：

public interface ISecurityAppService : IApplicationService
{
    List<PacsUser_C_Extented> GetAll();
}

public class SecurityAppService : ApplicationService, ISecurityAppService
{
    public List<PacsUser_C_Extented> GetAll()
    {
        // ...
        return allUsers;
    }
}

所有样板服务都将很好地注册为：

public class Global : AbpWebApplication<ImmenseWebModule>
{
    protected override void Application_Start(object sender, EventArgs e)
    {
        base.Application_Start(sender, e);
    }
}

正如 ASP.NET Boilerplate 文档所说，为了能够使用自动生成的服务，您应该在页面中包含所需的脚本，例如：

<script src="~/Abp/Framework/scripts/libs/angularjs/abp.ng.js"></script>
<script src="~/api/AbpServiceProxies/GetAll?type=angular"></script>

我知道第二行说要使用 angular 控制器，但我将其更改为：

<script src="~/api/AbpServiceProxies/GetAll?v=@(Clock.Now.Ticks)">script>

...仍然没有任何效果。

当我想在 ASP.NET Web 表单的 JavaScript 代码中使用 getAll 时，它会给我：

abp.service is not defined

那么如何在脚本元素 <script>...</script> 中使用 getAll 或 SecurityAppService 中的其他方法——而不是 Angular？

提前致谢。

更新

当我使用 Angular 控制器和 MVC 部分视图时，如：

(function () {
    var app = angular.module('app');
    var controllerId = 'sts.views.security.list';
    app.controller(controllerId, [
        '$scope', 'abp.services.remotesystem.security',
        function ($scope, securityService) {
            var vm = this;
            vm.localize = abp.localization.getSource('ImmenseSystem');
            vm.users = [];
            vm.refreshUserList = function () {
                abp.ui.setBusy( // Set whole page busy until getTasks completes
                    null,
                    securityService.getAll().success(function (data) {
                        vm.users = data;
                        abp.notify.info(vm.localize('UserListLoaded'));
                    })
                );
            };
            vm.refreshUserList();
        }
    ]);
})();

我可以使用那个功能。但我想在 ASP.NET Web 表单页面的 JavaScript 中使用它。

Answer 1

您正在注射 abp.services.remotesystem.security。所以你可以使用这个命名空间来访问函数。打开 chrome 控制台并写入 abp.services.remotesystem.security 你会看到函数

Answer 2

最后我通过以下简单的方法解决了问题...

1- 运行项目并通过 Angular 和局部视图 (MVC) 使用该样板服务像有问题的更新部分。

2- 运行并重定向到视图后，我转到 View page source 并查看依赖脚本。

3- 我将以下脚本源复制到一个页面：

<script src="Scripts/jquery-2.2.0.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Abp/Framework/scripts/utils/ie10fix.js"></script>
<script src="Scripts/json2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment-with-locales.min.js"></script>
<script src="Scripts/jquery.blockUI.js"></script>
<script src="Scripts/toastr.min.js"></script>
<script src="Scripts/sweetalert/sweet-alert.min.js"></script>
<script src="Scripts/others/spinjs/spin.js"></script>
<script src="Scripts/others/spinjs/jquery.spin.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-animate.min.js"></script>
<script src="Scripts/angular-sanitize.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="Scripts/angular-ui/ui-utils.min.js"></script>
<script src="Abp/Framework/scripts/abp.js"></script>
<script src="Abp/Framework/scripts/libs/abp.jquery.js"></script>
<script src="Abp/Framework/scripts/libs/abp.toastr.js"></script>
<script src="Abp/Framework/scripts/libs/abp.blockUI.js"></script>
<script src="Abp/Framework/scripts/libs/abp.spin.js"></script>
<script src="Abp/Framework/scripts/libs/abp.sweet-alert.js"></script>
<script src="Abp/Framework/scripts/libs/angularjs/abp.ng.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script> 
<script src="api/AbpServiceProxies/GetAll?v=636475780135774228"></script>
<script src="api/AbpServiceProxies/GetAll?type=angular&amp;v=636475780135774228"></script>
<script src="AbpScripts/GetScripts?v=636475780135774228" type="text/javascript"></script>

并使用 getAll 方法，例如：

<script>
    var securityService = abp.services.remotesystem.security;
    securityService.getAll().done(function (data) {
        for (var i in data)
            console.log(data[i].username);
    });
</script>

我认为使用自动生成服务的重要人员是：

<script src="api/AbpServiceProxies/GetAll?v=636475780135774228"></script>
<script src="api/AbpServiceProxies/GetAll?type=angular&amp;v=636475780135774228"></script>
<script src="AbpScripts/GetScripts?v=636475780135774228" type="text/javascript"></script>

感谢您的关注。

Answer 3

AssetApplicationService 必须由 IApplicationService 实现，然后检查您的模块是否正确加载并在其他模块中添加正确的依赖项。

检查此 link。它对我有用。

在 ASP.NET Web 表单中使用 abp.services in JavaScript

Use abp.services in JavaScript in ASP.NET Web Forms

javascript

asp.net

webforms

aspnetboilerplate

更新