社区网站模版,黄江仿做网站,wordpress 内容 只调图片大小,上海百度优化在asp.net core mvc中增加了ViewComponent#xff08;视图组件#xff09;的概念#xff0c;视图组件有点类似部分视图#xff0c;但是比部分视图功能更加强大#xff0c;它更有点像一个控制器。
使用方法
1#xff0c;定义类派生自ViewComponent类
2#xff0c;增加…在asp.net core mvc中增加了ViewComponent视图组件的概念视图组件有点类似部分视图但是比部分视图功能更加强大它更有点像一个控制器。
使用方法
1定义类派生自ViewComponent类
2增加TaskIViewComponentResult InvokeAsync方法
3在InovkeAsync方法中增加逻辑并返回视图结果
4在类上增加ViewComponent特性可以标注组件名称[ViewComponent(Name组件名称)]。这一步不是必需的。
具体实例 [ViewComponent(Name templatetest )] public class TemplateViewComponent:ViewComponent { public async TaskIViewComponentResult InvokeAsync() { return View( ~/Views/test.cshtml ); } }
另外我们可以给InvokeAsync方法增加参数在调用组件的时候可以传递数据如下 [ViewComponent(Name Pager )] public class Pager: ViewComponent { public TaskIViewComponentResult InvokeAsync( int page, int pagesize, int count) { ViewBag.PageIndex page; ViewBag.PageSize pagesize; int totalPage count / pagesize; if (count%pagesize0) { totalPage 1; } ViewBag.PageTotal totalPage; ViewBag.RecordCount count; return Task.FromResultIViewComponentResult(View( ~/Views/ViewComponets/Pager.cshtml )); } }
视图组件创建好后在视图上使用以下方法调用
await Component.InvokeAsync(组件名称,参数对象)或者await Component.InvokeAsync(typeof(组件),参数对象) View Components as Tag Helpers
在asp.net core mvc 1.1版本中又增加了一个新的特性就是可以使用标签方式调用视图组件类似下列效果
vc:组件名称 param1 param2/vc:组件名称
这有什么好处Component.Invoke是在视图中使用C#代码执行视图组件而标签方式更贴近前端技术对前端开发人员来说更友好。另外一个就是我们实现一个在线模板编辑器也更加的方便。
要实现一个在线模板编辑器我们可以分几步走
第一步先实现简单修改视图代码可以带到我们需要的效果
第二步提供在线的html代码编辑器直接在线编辑html代码
第三步提供组件配置窗口可以配置对应的参数
第四步可视化的页面编辑
以一个企业展示站点作为场景来说一下实现思路
一般一个企业展示网站主要用于企业信息宣传使用表现形式就是文章网站首页会包含很多内容板块每个板块有自己的一些特性比如展示条数内容来源滚动显示等。如下内容设置 第一步先实现简单修改视图代码可以带到我们需要的效果
我们可以在控制器中根据需要获取所需要的数据然后直接绑定到视图上但是如果客户要求有变动比如展示条数的变动我们只能是修改代码重新发布比较麻烦。所以我们可以把这些内容块做成一个一个的组件然后在视图上直接调用假设我们定义组件叫ContentBlockViewComponent具体逻辑如下 [ViewComponent(Name contentblock )] public class ContentBlockViewComponent:ViewComponent { /// summary /// 内容展示组件 /// /summary /// param nameshowCount显示条数/param /// param namesource信息来源板块/param /// returns/returns public async TaskIViewComponentResult InvokeAsync( int showCount, int source) { //TODO:根据参数从指定板块获取数据 return View( ~/Views/ContentBlock.cshtml ); } } 然后我们在首页视图上使用vc:contentblock showcount6 source1/展示内容。当参数发生改变时我们可以直接在视图上修改组件调用方法即可。到此我们实现了第一步简单修改代码实现想要的效果。
第二步提供在线的html代码编辑器直接在线编辑html代码
这一步其实也很好实现直接在系统中增加一个在线html编辑器使用codemirror直接通过读取视图文件内容展示到前台页面上根据需要修改代码并提交保存。实现到这一步对于最终用户来说还是需要掌握一定的html知识所以一般比较难只能提供给开发使用。
第三步提供组件配置窗口可以配置对应的参数
codemirror中有一个Tag Matcher组件我们可以以这个为思路实现一个标签选中事件读取当前标签的一些信息并在配置窗口中显示对应信息这个的还没具体实现。如果这部分可以实现应该一小部分用户就可以自己操作了。
第四步可视化的页面编辑
这是终极目标我的思路是直接在页面上呈现页面内容可以在视图组件输出视图上增加一个根标签如
div viewcomponent组件名称其他视图内容/div
然后在页面上使用jquery给带有viewcomponet属性的标签增加mouseover事件当鼠标移动到div上后显示一个设置按钮点击按钮弹出类似第三部的配置窗口在配置窗口中填写参数并保存。提交保存的时候需要把页面的名称及组件的名称传递到服务器端服务器端接收后首先找到对应的view文件然后读取内容再进行html分析可以使用htmlagilitypack)找到对应的视图组件标签进行参数替换最后保存文件内容。到此完成一个配置的过程。
第三步跟第四步的实现代码后续会慢慢提供。
原文地址http://www.cnblogs.com/dxp909/p/7049009.html .NET社区新闻深度好文微信中搜索dotNET跨平台或扫描二维码关注
