我们在.net core中还使用了ViewComponent方式生成控件。ViewComponent也是asp.net core的新特性,是对页面部分的渲染,以前PartialView的功能,可以使用ViewComponent来实现。

View Component包含2个部分,一个是类(继承于ViewComponent),和它返回的结果Razor视图(和普通的View视图一样)。

我们还是来看一下以侧边菜单控件为例子,怎么创建一个ViewComponent。侧边菜单控件如下图:

控件的主要逻辑是按照用户和应用程序代码,获取所有已经按照父子结构组织的菜单,传送到页面展示。

上面已经提到,View Component包含2个部分,一个是类,这个类也继承于ViewComponent类。子控件最主要的是重写ViewComponent类的Invoke/InvokeAsync方法:

     public class SideMenuViewComponent : ViewComponent
{
private IMenuAppService service;
public SideMenuViewComponent(IMenuAppService service)
{
this.service = service;
} public IViewComponentResult Invoke(string appCode, UserInfo userInfo)
{
IEnumerable<MenuDto> menuItems = this.service.GetHierarchy(appCode, userInfo); return View("SideMenu", menuItems);
}
}

再来看ViewComponent的第二部分,就是Razor视图,这里是SideMenu.cshtml:

 @using MicroStrutLibrary.Presentation.Web.Controls
@using MicroStrutLibrary.AppService.Portal
@using Microsoft.AspNetCore.Html @model IEnumerable<MenuDto>
@{
var controlId = System.Guid.NewGuid().ToString("N");
} @functions
{
public IHtmlContent RenderChildren(IEnumerable<MenuDto> menuItems)
{
string result = "<ul class=\"submenu\" style=\"display: none;\">"; foreach (MenuDto itemInfo in menuItems)
{
var url = Url.Content(string.IsNullOrWhiteSpace(itemInfo.Url) ? "#" : itemInfo.Url);
var icon = string.IsNullOrWhiteSpace(itemInfo.IconClass) ? "fa fa-list-ul" : itemInfo.IconClass;
var leaf = (itemInfo.IsLeaf && (itemInfo.Children == null || itemInfo.Children.Count() <)); result += "<li>";
result += $"<a href=\"{Html.Raw(url)}\" target=\"{itemInfo.Target}\" title=\"{itemInfo.MenuDesc}\" data-feature=\"{itemInfo.WinFeature}\" data-leaf=\"{leaf.ToString().ToLower()}\"><i class=\"${Html.Raw(icon)}\"></i><span>{itemInfo.MenuName}</span></a>";
if (!leaf)
{
result += RenderChildren(itemInfo.Children).ToString();
}
} result += "</ul>";
return new HtmlString(result);
}
}
<div id="@(controlId)" class="jquery-accordion-menu red">
<div class="jquery-accordion-menu-header">
</div>
<ul>
@foreach (MenuDto itemInfo in Model)
{
var url = Url.Content(string.IsNullOrWhiteSpace(itemInfo.Url) ? "#" : itemInfo.Url);
var icon = string.IsNullOrWhiteSpace(itemInfo.IconClass) ? "fa fa-list-ul" : itemInfo.IconClass;
var leaf = (itemInfo.IsLeaf && (itemInfo.Children == null || itemInfo.Children.Count() <)); <li>
<a href="@Html.Raw(url)" target="@itemInfo.Target" title="@itemInfo.MenuDesc" data-feature="@itemInfo.WinFeature" data-leaf="@(leaf.ToString().ToLower())">
<i class="@Html.Raw(icon)"></i>
<span>@itemInfo.MenuName</span>
</a>
@if (!leaf)
{
@RenderChildren(itemInfo.Children)
}
</li>
}
</ul>
<div class="jquery-accordion-menu-footer">
</div>
</div>
<script>
require(['jquery', 'accordionmenu'], function ($) {
var $sidebar = $("#@(controlId)"); $sidebar.jqueryAccordionMenu(); $("a", $sidebar).click(function (e) {
var $this = $(this); if (!$this.data("leaf")) {
e.preventDefault();
} else {
var feature = $this.data("feature"); if (feature) {
e.preventDefault();
window.open($this.attr("href"), $this.attr("target"), feature);
}
}
});
$("li", $sidebar).click(function () {
$("li.active", $sidebar).removeClass("active");
$(this).addClass("active");
});
});
</script>

Cshtml中,我们用到了@functions的写法,其实就是相当于在cshtml中编写cs的方法,一般这个方法要求返回的是IHtmlContent。

进阶:资源性视图的应用

按照以往的惯例,我们依旧还一个进阶,说明下ViewComponent中的cshtml作为嵌入的资源该如何写。

其实做法和TagHelper是一样的。首先是嵌入式资源方式,需要在project.json中按照如下方式编写:

"buildOptions": {

"embed": [ "Components/**/*.cshtml", "TagHelpers/**/*.cshtml" ]

}

然后再写一个扩展方法,同上个文档的EmbeddedFileServiceCollectionExtensions,最后是在Startup.cs中使用这个扩展方法。

因为我们的ViewComponet和TagHelper都在同一个WebControls项目中,因此进阶部分的代码根本不需要再写了。这里再重复说明的原因是,在没有写过上述代码的情况下,如何将ViewComponent的Cshtml作为嵌入的资源。

面向云的.net core开发框架

9.2.4 .net core 通过ViewComponent封装控件的更多相关文章

  1. [转].net core 通过ViewComponent封装控件 左侧菜单

    本文转自:http://www.cnblogs.com/BenDan2002/p/6224816.html 我们在.net core中还使用了ViewComponent方式生成控件.ViewCompo ...

  2. 9.2.3 .net core 通过TagHelper封装控件

    .net core 除了继续保留.net framework的HtmlHelper的写法以外,还提供了TagHelper和ViewComponent方式生成控件. 我们本节说的是使用TagHelper ...

  3. [转]9.2.3 .net core 通过TagHelper封装控件

    本文转自:https://www.cnblogs.com/BenDan2002/p/6170624.html .net core 除了继续保留.net framework的HtmlHelper的写法以 ...

  4. wheelView实现滚动选择 三方开源的封装控件 spannableString autofitTextView、PinnedSectionListView SwipeListView等等

    wheelView多用于popupwindow用来滚动选择条目 github上的开源三方控件     spannableString   autofitTextView.PinnedSectionLi ...

  5. 一步一步学Silverlight 2系列(8):使用样式封装控件观感

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  6. WPF封装控件时 检测是否在设计模式中

    原文:WPF封装控件时 检测是否在设计模式中 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Vblegend_2013/article/detail ...

  7. TWinControl的刷新过程(5个非虚函数,4个覆盖函数,1个消息函数,默认没有双缓冲,注意区分是TCustomControl还是Windows原生封装控件,执行流程不一样)

    前提条件:要明白在TWinControl有以下四个函数的存在,注意都是虚函数: procedure Invalidate; override;procedure Update; override;pr ...

  8. mvc 封装控件使用mvcpager

    具体使用如下: 前台部分: @RenderPage("~/Views/Controls/_Pagebar.cshtml", new PageBar { pageIndex = Mo ...

  9. 9.2.2 .net framework下的MVC 控件的封装(下)

    控件封装的部分说明 可能有人觉得应该前后端分离,我也承认这是应该的方向,我们也在考虑使用ng2等简化前端.但是,我们封装控件还是因为如下原因综合考虑的: 我们这是个框架,上面支撑了许多个应用,包含几百 ...

随机推荐

  1. BPM始终服务于人,落脚于人

    数字经济时代下,云计算.大数据.移动互联已经成为当下企业必须采取的武装力量.随着互联网+.中国制造2025.工业4.0等国家战略的引导与支持,无数的企业在这场数字化浪潮中使尽浑身解数,想要抓住机遇奋力 ...

  2. RMS:不能对生产服务器使用测试清单

    问题说明:在使用office软件RMS加密时报:不能对生产服务器使用测试清单,或者使用 rmsbulk.exe进行RMS加密时,报不能连接到RMS服务器. 解决办法: 请到https://suppor ...

  3. Android开发案例 – 在AbsListView中使用倒计时

    在App中, 有多种多样的倒计时需求, 比如: 在单View上, 使用倒计时, 如(如图-1) 在ListView(或者GridView)的ItemView上, 使用倒计时(如图-2) 图-1 图-2 ...

  4. 设计模式之工厂模式VS抽象工厂

    一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类:1)简单工厂模式(Simple Factor ...

  5. linux系统维护时的一些小技巧,包括系统挂载新磁盘的方法!可收藏!

    这里发布一些平时所用到的小技巧,不多,不过会持续更新.... 1.需要将history创建硬链接ln 全盘需要备份硬链接 ln /etc/xxx /home/xxx 2.root用户不可以远程 /et ...

  6. 使用win10远程控制ubuntu16.04

    使用win10远程控制ubuntu16.04,网上很多需要安装xfce桌面的.今天介绍一下,不需要安装其他桌面,使用Ubuntu16.04自带桌面,漂亮美观. Ubuntu16.04端: 1.打开终端 ...

  7. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  8. 如何部署Zabbix服务端

    部署环境 RHEL 6.7 Zabbix-server 2.2.14 安装zabbix官方源 # wget http://repo.zabbix.com/zabbix/2.2/rhel/6/x86_6 ...

  9. Hibernate(2)——Hibernate的实现原理总结和对其模仿的demo

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及的知识点总结如下: 开源框架的学习思路(个人总结) Hibernate的运行原理总结 Hibernate实现原理中的两个主要技术 ...

  10. Sublime Text 3 全程详细图文原创教程(持续更新中。。。)

    一. 前言 使用Sublime Text 也有几个年头了,版本也从2升级到3了,但犹如寒天饮冰水,冷暖尽自知.最初也是不知道从何下手,满世界地查找资料,但能查阅到的资料,苦于它们的零碎.片面,不够系统 ...