视图与组件

组件是指在模板文件中调用的、具有各种可视化效果和参数的分部视图文件，也是连接网站数据库的数据通道。通过执行组件解析生成的 HTML代码 并最终呈现在调用视图中，为站点和视图提供解析后的元数据，并在视图模板中通过样式控制呈现的效果。

与视图一样，组件也是使用 .cshtml 文件扩展名。当希望在不同视图之间共享网页的可重用部分时，就可以使用组件，同时通过控制组件的参数以显示数据的不同效果。

组件调用

在视图页面中有几种方法呈现组件。最简单的是使用 @Power.Partial ，它通过 @ 前缀来调用并返回。

同步调用

@Power.Partial("侧栏-栏目菜单", new { Node = node })

@* 文章 *@
@Power.ArticleList("文章标题列表", new { Count = 7, Node = "xwdt", TitleLength = 54, DateFormat = "MM-dd" })

@* 图集 *@
@Power.PhotoList("图片标题列表", new { Count = 7, Node = "tpxw", TitleLength = 54, DateFormat = "MM-dd" })

@* 视频 *@
@Power.VideoList("视频标题列表", new { Count = 7, Node = "spxw", TitleLength = 54, DateFormat = "MM-dd" })

@* 内容 *@
@Power.ContentList("友情链接列表", new { Count = 7, Node = "xwdt", TitleLength = 54, DateFormat = "MM-dd" })

异步调用

以异步调用 侧栏-热点资讯 组件为例子，代码如下。

<div id="datalist"></div>
@Power.AjaxPartial("侧栏-热点资讯", new { newsNode.NodeId }, new AjaxOptions { UpdateTargetId = "datalist", InsertionMode = InsertionMode.InsertAfter }, null, 60)

例子：异步调用不同模型的数据，并插入到 datalist 。

@* 列表容器 *@
<ul class="newsList" id="datalist"></ul>

@* 文章 *@
@Power.AjaxArticleList("文章标题列表", new { Count = 7, Node = "xwdt", TitleLength = 54, DateFormat = "MM-dd" }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "datalist", InsertionMode = InsertionMode.InsertAfter }, new { id = "contentList" })

@* 图集 *@
@Power.AjaxPhotoList("图片标题列表", new { Count = 7, Node = "tpxw", TitleLength = 54, DateFormat = "MM-dd" }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "datalist", InsertionMode = InsertionMode.InsertAfter }, new { id = "contentList" })

@* 视频 *@
@Power.AjaxVideoList("视频标题列表", new { Count = 7, Node = "spxw", TitleLength = 54, DateFormat = "MM-dd" }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "datalist", InsertionMode = InsertionMode.InsertAfter }, new { id = "contentList" })

@* 内容 *@
@Power.AjaxContentList("友情链接列表", new { Count = 7, Node = "xwdt", TitleLength = 54, DateFormat = "MM-dd" }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "datalist", InsertionMode = InsertionMode.InsertAfter }, new { id = "contentList" })

存放目录

组件统一存放在Shared文件夹下，每个站点可在不同模块下存放组件：

Views
├── _Common (公共)
│   ├── ...
│   └── Shared (共用组件)
│
├── main (主站)
│   ├── ContentManage (内容模型)
│   │   ├── ...
│   │   └── Shared (组件)
│   ├── LetterBox  (便民咨询)
│   │   ├── ...
│   │   └── Shared (组件)
│   ├── ...
└── └── Shared (共用组件)

查找顺序

当引用通用组件时，默认优先查找 当前站点 下 Shared 文件夹，同时可以指定查找位置：

@* 查找指定文件夹下的组件，如果没有找到，则搜索_Common目录下的Shared文件夹 *@
@Power.Partial("ComtentManage/Special", "侧栏-栏目菜单")

当未指定查找位置时，Views 视图默认的查找优先级为：

  1. 当前站点目录
  2. _Common目录

Views.Phone、Views.Pad 视图的查找优先级为：

  1. 当前站点目录
  2. _Common目录
  3. Views下的当前站点目录
  4. Views下的_Common目录
~/Views/[SiteIdentifier]/[ModuleName]/Shared/[PartialViewName].cshtml
~/Views/[SiteIdentifier]/Shared/[PartialViewName].cshtml
~/Views/_Common/[ModuleName]/Shared/[PartialViewName].cshtml
~/Views/_Common/Shared/[PartialViewName].cshtml

举例：如果某个站点（标识符为 hbj ）的某个节点列表页（属于内容管理模块ContentManage）中调用了名为“文章列表”的组件，则组件查找的顺序为：

~/Views/Education/ContentManage/Shared/文章列表.cshtml
~/Views/Education/Shared/文章列表.cshtml
~/Views/_Common/ContentManage/Shared/文章列表.cshtml
~/Views/_Common/Shared/文章列表.cshtml

可以将通用的组件放置在 ~/Views/_Common/ 下，通过在站点和模块目录创建同名的组件来达到相同的调用方式但在各站点或模块下不同的显示结果。组件可以多层嵌套，也就是说，一个组件可以调用另一个组件（只要不创建死循环）。

组件参数

  • 组件参数是指 new { Parameter1 = 10, Parameter2 = true, Parameter3 = "abc" ... } 大括号中指定的参数。
  • 组件参数是完全自定义的，建议使用英文单词或词组为参数命名。
  • 组件参数在指定时与顺序无关，可任意排列前后顺序，参数间使用逗号分隔。
  • 组件参数对于大小写不敏感，在调用参数赋值或者组件内部获取参数时大小写可以不一致，但建议使用大小写一致的方式并使用Pascal命名法。
  • 组件参数赋值通常可以使用数值型、布尔型、字符串、枚举值等方式进行赋值。