View Components as Tag Helpers,离在线模板编辑又进一步
admin
2023-07-29 15:00:07
0次

用方法

1,定义类派生自ViewComponent类

2,增加Task InvokeAsync方法

3,在InovkeAsync方法中增加逻辑,并返回视图结果

4,在类上增加ViewComponent特性,可以标注组件名称:[ViewComponent(Name="组件名称")]。这一步不是必需的。

具体实例:

12345678[ViewComponent(Name="templatetest")]public class TemplateViewComponent:ViewComponent{    public async Task InvokeAsync()    {        return View("~/Views/test.cshtml");    }}  

另外,我们可以给InvokeAsync方法增加参数,在调用组件的时候,可以传递数据,如下:

12345678910111213141516171819[ViewComponent(Name ="Pager")] public class Pager: ViewComponent {     public Task InvokeAsync(int page,int pagesize,int count)     {         ViewBag.PageIndex = page;         ViewBag.PageSize = pagesize;         int totalPage = count / pagesize;          if (count%pagesize>0)         {             totalPage += 1;         }          ViewBag.PageTotal = totalPage;         ViewBag.RecordCount = count;         return Task.FromResult(View("~/Views/ViewComponets/Pager.cshtml"));     } }

视图组件创建好后,在视图上使用以下方法调用:

@await Component.InvokeAsync("组件名称",参数对象)或者@await Component.InvokeAsync(typeof(组件),参数对象)

 View Components as Tag Helpers

在asp.net core mvc 1.1版本中,又增加了一个新的特性,就是可以使用标签方式调用视图组件,类似下列效果:

这有什么好处?Component.Invoke是在视图中使用C#代码执行视图组件,而标签方式更贴近前端技术,对前端开发人员来说更友好。另外一个就是我们实现一个在线模板编辑器也更加的方便。

要实现一个在线模板编辑器我们可以分几步走:

第一步:先实现简单修改视图代码,可以带到我们需要的效果

第二步:提供在线的html代码编辑器,直接在线编辑html代码

第三步:提供组件配置窗口,可以配置对应的参数

第四步:可视化的页面编辑

以一个企业展示站点作为场景,来说一下实现思路:

一般一个企业展示网站主要用于企业信息宣传使用,表现形式就是文章,网站首页会包含很多内容板块,每个板块有自己的一些特性,比如展示条数,内容来源,滚动显示等。如下内容设置View Components as Tag Helpers,离在线模板编辑又进一步

 第一步:先实现简单修改视图代码,可以带到我们需要的效果

我们可以在控制器中根据需要获取所需要的数据,然后直接绑定到视图上,但是如果客户要求有变动,比如展示条数的变动,我们只能是修改代码,重新发布,比较麻烦。所以我们可以把这些内容块做成一个一个的组件,然后在视图上直接调用,假设我们定义组件叫ContentBlockViewComponent,具体逻辑如下:

123456789101112131415[ViewComponent(Name="contentblock")]    public class ContentBlockViewComponent:ViewComponent    {        ///         /// 内容展示组件        ///         /// 显示条数        /// 信息来源板块        ///         public async Task InvokeAsync(int showCount,int source)        {            //TODO:根据参数从指定板块获取数据            return View("~/Views/ContentBlock.cshtml");           }    }

  

 然后我们在首页视图上使用展示内容。当参数发生改变时,我们可以直接在视图上修改组件调用方法即可。到此我们实现了第一步:简单修改代码实现想要的效果。

第二步:提供在线的html代码编辑器,直接在线编辑html代码

这一步其实也很好实现,直接在系统中增加一个在线html编辑器(使用codemirror),直接通过读取视图文件内容,展示到前台页面上,根据需要修改代码并提交保存。实现到这一步,对于最终用户来说,还是需要掌握一定的html知识,所以一般比较难,只能提供给开发使用。

第三步:提供组件配置窗口,可以配置对应的参数

codemirror中有一个Tag Matcher组件,我们可以以这个为思路,实现一个标签选中事件,读取当前标签的一些信息,并在配置窗口中显示对应信息,这个的还没具体实现。如果这部分可以实现,应该一小部分用户就可以自己操作了。

第四步:可视化的页面编辑

这是终极目标,我的思路是直接在页面上呈现页面内容,可以在视图组件输出视图上增加一个根标签,如

其他视图内容

然后在页面上使用jquery给带有viewcomponet属性的标签增加mouseover事件,当鼠标移动到div上后,显示一个设置按钮,点击按钮弹出类似第三部的配置窗口,在配置窗口中填写参数,并保存。提交保存的时候,需要把页面的名称及组件的名称传递到服务器端,服务器端接收后,首先找到对应的view文件,然后读取内容,再进行html分析(可以使用htmlagilitypack),找到对应的视图组件标签,进行参数替换,最后保存文件内容。到此完成一个配置的过程。


相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...