nop 4.1 Widget 探究- 视图组件
1. 系统默认自带了一个NivoSlider 的Wdget. 在Nop.Web项目首页的HomePageTop里

这个写法是 ASP.NET Core MVC 中的新特性 视图组件,与局部视图相似,但是它们更加的强大。 要使用视图组件,从视图中调用 @Component.InvokeAsync("视图组件名", <匿名类型参数>)
新增一个视图组件的方法(任一):
- 继承
ViewComponent - 使用
[ViewComponent]特性装饰一个类。 - 创建一个类,并以 ViewComponent 作为后缀。
我们使用的视图组件Widget是在Nop.Web项目的\Componets\Widget.cs, 里面使用工厂模式,创建Widget
namespace Nop.Web.Components
{
public class WidgetViewComponent : NopViewComponent
{
private readonly IWidgetModelFactory _widgetModelFactory; public WidgetViewComponent(IWidgetModelFactory widgetModelFactory)
{
this._widgetModelFactory = widgetModelFactory;
} public IViewComponentResult Invoke(string widgetZone, object additionalData = null)
{
var model = _widgetModelFactory.PrepareRenderWidgetModel(widgetZone, additionalData); //no data?
if (!model.Any())
return Content(""); return View(model);
}
}
}

WidgetService.cs 里是根据GetWidgetZones()的值load 对应Zone的Widget
/// <summary>
/// Load active widgets
/// </summary>
/// <param name="widgetZone">Widget zone</param>
/// <param name="customer">Load records allowed only to a specified customer; pass null to ignore ACL permissions</param>
/// <param name="storeId">Load records allowed only in a specified store; pass 0 to load all records</param>
/// <returns>Widgets</returns>
public virtual IList<IWidgetPlugin> LoadActiveWidgetsByWidgetZone(string widgetZone, Customer customer = null, int storeId = )
{
if (string.IsNullOrWhiteSpace(widgetZone))
return new List<IWidgetPlugin>(); return LoadActiveWidgets(customer, storeId)
.Where(x => x.GetWidgetZones().Contains(widgetZone, StringComparer.InvariantCultureIgnoreCase)).ToList();
}

Widget是一个插件,所以要继承NOP的BasePlugin,但Widget和其他插件不同,又要实现IWidgetPlugin的接口

nop 4.1 Widget 探究- 视图组件的更多相关文章
- Box(视图组件)如何在多个页面不同视觉规范下的复用
本文来自 网易云社区 . 问题描述 Android App中的页面元素,都是由一个个Box(可以理解成一个个自定义View组件和Widget同级)组成,这些Box可以在不同的页面.不同的模块达到复用的 ...
- ASP.NET Core 中文文档 第四章 MVC(3.9)视图组件
作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩 章节: 介绍视图组件 创建视图组件 调用视图组件 演练:创建一个简单的视图组件 附加的资源 查看或下载示例代码 介绍视图 ...
- iOS系列 基础篇 04 探究视图生命周期
iOS系列 基础篇 04 探究视图生命周期 视图是应用的一个重要的组成部份,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻. 以视图的四种状态为基础,我们来系统了解一下视 ...
- asp.net core视图组件(ViewComponent)简单使用
一.组成: 一个视图组件包括两个部分,派生自ViewComponent的类及其返回结果.类似控制器. 定义一个视图组件,如控制器一样,必须是公开,非嵌套,非抽象的类.一般,视图组件名称为类名去掉&qu ...
- ASP.NET Core MVC之ViewComponents(视图组件)
前言 大概一个来星期未更新博客了,久违了各位,关于SQL Server性能优化会和ASP.NET Core MVC穿插来讲,如果你希望我分享哪些内容可以在评论下方提出来,我会筛选并看看技术文档来对你的 ...
- ASP.NET Core Razor 视图组件
视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响 ...
- [译]ASP.NET Core 2.0 视图组件
问题 如何在ASP.NET Core 2.0中使用视图组件? 答案 新建一个空项目,修改Startup类并添加MVC服务和中间件: public void ConfigureServices(ISer ...
- ASP.NET CORE 自定义视图组件(ViewComponent)注意事项
*红色字体为固定命名,蓝色为一般命名规则,黄色为ASP.NET CORE 默认查找文件名 概要:1.简单ViewComponent的用法 2.ViewComponent控制器返回值 3.注意事项 1 ...
- Asp.Net core 视图组件ViewComponent
视图组件 ViewComponent 最近用了一下视图组件,还挺方便的,如果遇到公共的部分,可以抽出来,写成视图组件,方便调用 先上图看一下效果:比如首页的4个画红框的地方是4个模块,有些地方可能要重 ...
随机推荐
- PyEngine3D
git clone https://github.com/ubuntunux/PyEngine3D cd PyEngine3D pip install -r requirements.txt pyth ...
- git 修改文件夹名字后如何提交
将文件夹名字从 v1.0.1 修改为 v1.0.2 git add --ignore-removal "v1.0.2/xsxsx"
- 关于table动态添加数据 单元格合并 数组合并
var newArr = [ {"BranchID":1,"BranchName":"城二","BranchFullName&qu ...
- Qt解析Json数据
1 JSON数据简介 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范) ...
- vue element-ui 日期选择器组件 日期时间格式化
vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件: element-ui 日期返回的格式是这样的,看下图: 但我们要的是另一个格式 , 如下 ...
- 昂达 v891 v1 终于 删除 windows 分区 并且恢复了容量。
参考了很多文章(最后列出重要的),却始终失败. 途中因为乱改分区表,竟然fastboot 都进不去了,当时真是欲哭无泪. 总结关键点: 1) partition.tbl不能把硬盘剩余空间全给data分 ...
- R quantile函数 | cut函数 | sample函数 | all函数 | scale函数 | do.call函数
取出一个数字序列中的百分位数 1. 求某一个百分比 x<-rnorm(200) quantile(x,0.9) 2. 求一系列的百分比 quantile(x,c(0.1,0.9)) quanti ...
- Practical Node.js摘录(2018版)第1,2章。
大神的node书,免费 视频:https://node.university/courses/short-lectures/lectures/3949510 另一本书:全栈JavaScript,学习b ...
- hdoj1043
8数码问题有解:除0外逆序数%2相等.16数码有解:除0外,如果0的行数相差奇数个,逆序也差奇数个,vice versa.
- 用 JS 设置图片的最大宽度
//用 JS 设置图片的最大宽度 function setImgsMaxWidth() { $('.answerimg img').each(function () { ...