我们在.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. Android开发学习—— 创建项目时,不是继承activity,而是继承ActionBarActivity

    对于我们新建android项目时, 会 继承ActionBarActivity. 我们在新建项目时, 最小需求的sdk 选择 4.0以上版本.这样 新建的android项目就是继承activity了!

  2. Mysql - 函数

    Mysql提供的函数是在是太多了, 很多我都见过, 别说用了. 园子里面, 有人弄了一个比较全的. MYSQL函数 我这里会将他写的完全拷贝下来, 中间会插入一些自己项目中使用过的心得 一.数学函数 ...

  3. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  4. jetBrain系列软件

    请尽量支持正版软件!https://www.jetbrains.com/ 本文仅供参考 以下提供一种方法可以无限期体验JetBrain2016系列软件. 1.下载JetbrainsCrack-2.5. ...

  5. hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的用法

    javascript中有原型这么一个概念,任何一个构造函数都有它对应的原型(prototype),我们可以给这个原型赋予一些我们想要的属性,像下面这样: function Gadget(name, c ...

  6. 学习笔记:delphi之TStringGrid

    1.说明 最近加入了一个项目组,使用的开发工具是delphi6,想想又要开始搞这个工具有点小忧伤,但没办法谁让咱就是个打杂的尼... 的需求是显示一个类似于Word/excel的那种表格,可以合并列等 ...

  7. .NET里简易实现IoC

    .NET里简易实现IoC 前言 在前面的篇幅中对依赖倒置原则和IoC框架的使用只是做了个简单的介绍,并没有很详细的去演示,可能有的朋友还是区分不了依赖倒置.依赖注入.控制反转这几个名词,或许知道的也只 ...

  8. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  9. SQL Server 服务器磁盘测试之SQLIO篇(一)

    数据库调优工作中,有一部分是需要排查IO问题的,例如IO的速度或者RAID级别无法响应高并发下的快速请求.最常见的就是查看磁盘每次读写的响应速度,通过性能计数器Avg.Disk sec/Read(Wr ...

  10. CSS样式表分类

    1.内联样式表 <p  style="font-size:11px;">内联样式表</p> 2.内嵌样式表 写在head标签里 <style  typ ...