9.2.4 .net core 通过ViewComponent封装控件

我们在.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封装控件

最新文章

热门文章