一步一步教你如何制件 ZKEACMS 的扩展组件/插件

前言

如果你还不知道ZKEACMS，不妨先了解一下。

ASP.NET MVC 开源建站系统 ZKEACMS 推荐，从此网站“拼”起来

官方地址：http://www.zkea.net/zkeacms

下载地址：https://github.com/SeriaWei/ASP.NET-MVC-CMS/releases

GitHub:https://github.com/SeriaWei/ASP.NET-MVC-CMS

开源中国社区:http://git.oschina.net/seriawei/ASP.NET-MVC-CMS

演示地址：http://demo.zkea.net/

后台：http://demo.zkea.net/admin

用户名，密码：admin

做一个路径导航的组件：

添加一个组件项目

打开Modules目录（~/Modules），找到Standard文件夹，这个是一个标准的组件项目，复制一份，并把名称改为Breadcrumb

进入Breadcrumb文件夹，并把项目名称改为Easy.CMS.Breadcrumb.csproj

使用Visual Studio打开解决方案（ZKEASOFT.CMS.Web），在Modues目录下添加一个已有项目：

找到Easy.CMS.Breadcrumb.csproj并添加:

修改名空间组件名等相关信息

打开Easy.CMS.Breadcrumb的属性，修改程序集名称和名空间为：Easy.CMS.Breadcrumb

把StandardPlug类名改为BreadcrumbPlug，并删除注册路由代码，因为现在要加的这个导航组件不需要

方法说明：

RegistRoute() 这个方法用来注册组件的路由

AdminMenu() 这个方法用来添加后端左测的菜单

InitScript() 这个方法用来整合注册脚本，方便在View中使用

InitStyle() 这个方法用来整合注册样式，方便在View中使用

接下来打开CopyItems.xml文件，并修改内容：

这个文件的作用是把DLL复制到web的bin目录，方便调试，或者也可以直接改生成目录到web的bin目录。

接下来就要开始Coding了

在Models目录下，添加一个BreadcrumbWidget的类，并添加如下代码：

namespace Easy.CMS.Breadcrumb.Models
{
    [DataConfigure(typeof(BreadcrumbWidgetMetaData))]
    public class BreadcrumbWidget : WidgetBase
    {
        public bool IsLinkAble { get; set; }
    }

    class BreadcrumbWidgetMetaData : WidgetMetaData<BreadcrumbWidget>
    {
        protected override void ViewConfigure()
        {
            base.ViewConfigure();
            ViewConfig(m => m.IsLinkAble).AsHidden();
        }
    }
}

BreadcrumbWidget继承自WidgetBase，并拥有一个自己的属性IsLinkAble，由于现在IsLinkAble暂时没用，所以把它隐藏了。

BreadcrumbWidget这个Entity，默认会对应一个名称为BreadcrumbWidget的表，该表必须要有的字段是：ID和IsLinkAble。

在Service目录下面，添加一个BreadcrumbWidgetService的类，并添加以下代码：

namespace Easy.CMS.Breadcrumb.Service
{
    public class BreadcrumbWidgetService : WidgetService<BreadcrumbWidget>
    {
        private IPageService _pageService;

        public IPageService PageService
        {
            get { return _pageService ?? (_pageService = ServiceLocator.Current.GetInstance<IPageService>()); }
        }

        private List<PageEntity> _parentPages;

        public List<PageEntity> ParentPages
        {
            get { return _parentPages ?? (_parentPages = new List<PageEntity>()); }
        }
        public override WidgetPart Display(WidgetBase widget, HttpContextBase httpContext)
        {
            GetParentPage(httpContext.GetLayout().Page);
            return widget.ToWidgetPart(ParentPages);
        }

        void GetParentPage(PageEntity page)
        {
            ParentPages.Insert(, page);
            if (page.ParentId.IsNotNullAndWhiteSpace() && page.ParentId != "#")
            {
                var parentPage = PageService.Get(m => m.ID == page.ParentId).FirstOrDefault();
                if (parentPage != null)
                {
                    GetParentPage(parentPage);
                }
            }
        }
    }
}

代码比较简单，目的就是为了取出当前页面的所有父页面，然后将这些页面显示出来，所以，为了，显示，我们需要添加一个View。

在Views目录下，添加一个名为Widget.Breadcrumb的视图：

@model List<Easy.Web.CMS.Page.PageEntity>
<ol class="breadcrumb">
    @for (int i = ; i < Model.Count; i++)
    {
        if (i == Model.Count - )
        {
            <li class="active">@Model[i].PageName</li>
        }
        else
        {
            <li><a href="@Url.Content(Model[i].Url)">@Model[i].PageName</a></li>
        }
    }
</ol>

与系统整合

添加一个Content目录并往里面添加一张256x256的图片作为该组件的缩略图，该缩略图将会在选择组件时看到。

创建BreadcrumbWidget表

CREATE TABLE BreadcrumbWidget
    (
      ID NVARCHAR() PRIMARY KEY
                       NOT NULL ,
      IsLinkAble BIT NULL
    );

往CMS_WidgetTemplate表里面添加一条记录，告诉系统有一个新的组件：

INSERT INTO dbo.CMS_WidgetTemplate
        ( Title ,
          GroupName ,
          PartialView ,
          AssemblyName ,
          ServiceTypeName ,
          ViewModelTypeName ,
          Thumbnail ,
          [Order] ,
          Status
        )
VALUES  ( N'路径导航' ,
          N'1.通用' ,
          N'Widget.Breadcrumb' ,
          N'Easy.CMS.Breadcrumb' ,
          N'Easy.CMS.Breadcrumb.Service.BreadcrumbWidgetService' ,
          N'Easy.CMS.Breadcrumb.Models.BreadcrumbWidget' ,
          N'~/Modules/Breadcrumb/Content/breadcrumb.png' ,
           , 

        )

运行程序试一下吧：

组件字段显示英文怎么办？直接到Language表里面去Update吧，怎么找到它们呢？

SELECT * FROM dbo.Language WHERE Module=N'BreadcrumbWidget'

或者在运行程序之前，用以下脚本初始化多语言文本

INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@ActionType', , N'ActionType', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@AssemblyName', , N'AssemblyName', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@CreateBy', , N'CreateBy', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@CreatebyName', , N'创建人', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@CreateDate', , N'创建日期', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@CustomClass', , N'CustomClass', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@CustomStyle', , N'CustomStyle', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@Description', , N'描述', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@FormView', , N'FormView', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@ID', , N'ID', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@IsLinkAble', , N'IsLinkAble', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@IsSystem', , N'IsSystem', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@IsTemplate', , N'保存为模板', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@LastUpdateBy', , N'LastUpdateBy', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@LastUpdateByName', , N'更新人', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@LastUpdateDate', , N'更新日期', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@LayoutID', , N'布局', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@PageID', , N'页面', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@PartialView', , N'模版', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@Position', , N'排序', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@ServiceTypeName', , N'ServiceTypeName', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@Status', , N'状态', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@StyleClass', , N'自定义样式', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@Thumbnail', , N'模板缩略图', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@Title', , N'标题', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@ViewModelTypeName', , N'ViewModelTypeName', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@WidgetName', , N'组件名称', N'BreadcrumbWidget', N'EntityProperty')
INSERT [dbo].[Language] ([LanKey], [LanID], [LanValue], [Module], [LanType]) VALUES (N'BreadcrumbWidget@ZoneID', , N'区域', N'BreadcrumbWidget', N'EntityProperty')

该插件已开放下载：

http://www.zkea.net/zkeacms/extend/detail?id=118

源代码：

https://github.com/SeriaWei/ASP.NET-MVC-CMS/tree/master/Easy.CMS.Web/Modules/Breadcrumb

还有什么不明白的吗？加入我们进一步为你解答