小部件

    • 在可复用的 中定义部件.
    • 在部件中引用 scripts & styles 脚本.
    • 使用部件创建 仪表盘.
    • 支持 授权 与 的部件

    第一部,创建一个新的ASP.NET Core View Component:

    MySimpleWidgetViewComponent.cs:

    继承 AbpViewComponent 不是必需的. 你也可以继承ASP.NET Core的 ViewComponent. AbpViewComponent 只是定义了一些基本的实用属性.

    Default.cshtml:

    1. <div class="my-simple-widget">
    2.     <h2>My Simple Widget</h2>
    3.     <p>This is a simple widget!</p>
    4. </div>

    添加 Widget attribute 到 MySimpleWidgetViewComponent 类,将此视图组件标记为部件:

    1. using Microsoft.AspNetCore.Mvc;
    2. using Volo.Abp.AspNetCore.Mvc;
    3. using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
    5. namespace DashboardDemo.Web.Pages.Components.MySimpleWidget
    6. {
    7.     [Widget]
    8.     public class MySimpleWidgetViewComponent : AbpViewComponent
    9.     {
    10.         public IViewComponentResult Invoke()
    11.         {
    12.             return View();
    13.         }
    14.     }
    15. }

    渲染部件

    渲染部件的用法是ASP.NET Core的标准用法. 在razor view/page中使用 Component.InvokeAsync 方法, 就像渲染一个View Component一样. 例如:

    第一行代码使用名称渲染了部件,第二行代码使用type渲染了View Comonent.

    想要自定义组件名称,只需要使用ASP.NET Core的 ViewComponent attribute:

    1. using Microsoft.AspNetCore.Mvc;
    2. using Volo.Abp.AspNetCore.Mvc;
    3. using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
    5. namespace DashboardDemo.Web.Pages.Components.MySimpleWidget
    6. {
    7.     [Widget]
    8.     [ViewComponent(Name = "MyCustomNamedWidget")]
    9.     public class MySimpleWidgetViewComponent : AbpViewComponent
    10.         public IViewComponentResult Invoke()
    11.         {
    12.             return View("~/Pages/Components/MySimpleWidget/Default.cshtml");
    13.         }
    14.     }
    15. }

    ABP会通过自定义的名称去处理部件.

    你还可以定义对于使用者友好的本地化显示名称. 需要时在UI中使用显示名称. 显示名称是可选的,在 Widget attribute 的属性中定义:

    1. using DashboardDemo.Localization;
    2. using Microsoft.AspNetCore.Mvc;
    3. using Volo.Abp.AspNetCore.Mvc;
    4. using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
    6. namespace DashboardDemo.Web.Pages.Components.MySimpleWidget
    7. {
    8.     [Widget(
    9.         DisplayName = "MySimpleWidgetDisplayName", //Localization key
    10.         DisplayNameResource = typeof(DashboardDemoResource) //localization resource
    11.         )]
    12.     public class MySimpleWidgetViewComponent : AbpViewComponent
    13.     {
    14.         public IViewComponentResult Invoke()
    15.         {
    16.             return View();
    17.         }
    18.     }
    19. }

    参阅 学习关于本地化资源的更多内容.

    引用 Style & Script

    当部件含有样式和scirpt文件时,会存在一些挑战;

    • 使用部件的页面应该将 script & styles 文件引用到页面中.
    • 页面还需要解析部件的 依赖库/文件.

    将资源与部件正确的关联在一起时,ABP会解决这些问题. 使用正确的方法,就不用担心部件的依赖关系.

    下面的示例中部件添加了样式和scirpt文件:

    页面中使用的组件的所有资源都做为捆绑包添加(如果没有其他配置,会在生产中合并和压缩). 除了简单的添加文件,你还可以充分的利用捆绑功能.

    下面的示例与上面的代码相同,但是在添加文件时文件路径替换成了 BundleContributor:

    1. using System.Collections.Generic;
    2. using Microsoft.AspNetCore.Mvc;
    3. using Volo.Abp.AspNetCore.Mvc;
    4. using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
    5. using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
    7. namespace DashboardDemo.Web.Pages.Components.MySimpleWidget
    8. {
    9.     [Widget(
    10.         StyleTypes = new []{ typeof(MySimpleWidgetStyleBundleContributor) },
    11.         ScriptTypes = new[]{ typeof(MySimpleWidgetScriptBundleContributor) }
    12.         )]
    13.     public class MySimpleWidgetViewComponent : AbpViewComponent
    14.     {
    15.         public IViewComponentResult Invoke()
    16.         {
    17.         }
    18.     }
    20.     public class MySimpleWidgetStyleBundleContributor : BundleContributor
    21.     {
    22.         public override void ConfigureBundle(BundleConfigurationContext context)
    23.         {
    24.             context.Files
    26.         }
    27.     }
    29.     public class MySimpleWidgetScriptBundleContributor : BundleContributor
    30.     {
    31.         public override void ConfigureBundle(BundleConfigurationContext context)
    32.         {
    33.             context.Files
    34.               .AddIfNotContains("/Pages/Components/MySimpleWidget/Default.js");
    35.         }
    36.     }
    37. }

    捆绑系统非常强大,如果你的部件使用了JavaScript库来呈现图表, 你可以将它声明为依赖项, 如果之前未添加JavaScript库. 则会自动添加到页面中. 使用这种方式让页面使用部件时不用关心依赖项.

    参阅 捆包&压缩 文档 了解更多内容.

    某些组件可能只对通过身份验证或授权的用户可用,这时可以使用 Widget attribute 的以下属性:

    • RequiresAuthentication (bool): 设置为true,只有通过身份验证的用户(登录用户)可用.
    • RequiredPolicies (List<string>): 授权用户的策略名称列表. 有关策略的详细信息请参阅.

    示例:

    1. using Microsoft.AspNetCore.Mvc;
    2. using Volo.Abp.AspNetCore.Mvc;
    3. using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
    5. namespace DashboardDemo.Web.Pages.Components.MySimpleWidget
    6. {
    7.     [Widget(RequiredPolicies = new[] { "MyPolicyName" })]
    8.     public class MySimpleWidgetViewComponent : AbpViewComponent
    9.     {
    10.         public IViewComponentResult Invoke()
    11.         {
    12.             return View();
    13.         }
    14.     }
    15. }

    部件选项

    AbpWidgetOptions 是 Widget attribute 替代, 你可以使用它去配置部件:

    将上面的代码写到模块的 ConfigureServices 方法中. AbpWidgetOptions 可以完成 Widget attribute 的所有功能. 比如为组件添加样式:

    1. Configure<AbpWidgetOptions>(options =>
    2. {
    3.     options.Widgets
    4.         .Add<MySimpleWidgetViewComponent>()
    5.         .WithStyles("/Pages/Components/MySimpleWidget/Default.css");