FineUI 官方论坛

标题: 创建可包含HTML的 FineUI TagHelper [打印本页]
作者: 棕榈    时间: 2020-4-1 15:15
标题: 创建可包含HTML的 FineUI TagHelper
本帖最后由 棕榈 于 2020-4-1 15:13 编辑

创建可包含HTML的 FineUI TagHelper

  1. <f:SimpleForm ShowHeader="false" LabelWidth="80" BodyPadding="10" ShowBorder="false" ID="SimpleForm1">
  2.   <Items>
  3.     <f:Control>
  4.       <div class="input-group input-group-sm mb-3">
  5.         <div class="input-group-prepend">
  6.           <span class="input-group-text">
  7.             <i class="f-icon f-iconfont f-iconfont-user"></i>
  8.           </span>
  9.         </div>
  10.         <input type="text" name="tbxUserName" class="form-control" placeholder="用户名">
  11.       </div>
  12.     </f:Control>
  13.     <f:TextBox ShowRedStar="true" Required="true" TextMode="Password" Label="密码" ID="tbxPassword"></f:TextBox>
  14.   </Items>
  15. </f:SimpleForm>
复制代码


上面代码中的 f:Control 就是新创建的 TagHelper，它继承于 PanelBaseTagHelper ，为什么要创建这样一个 TagHelper 呢，它的主要功能是可以包含HTML内容，之前的做法是将HTML内容放到Body的其它位置，然后设置控件的 ContentEl 属性，这样查看起来不够直观，现在通过 f:Control 可以直接将HTML中嵌入在结构中，查看及编辑都一目了然。

下面是 ControlTagHelper 的代码：

  1. using Microsoft.AspNetCore.Razor.TagHelpers;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Threading.Tasks;

  7. namespace FineUICore.EmptyProject.RazorPages.Code
  8. {
  9.     [HtmlTargetElement("f:Control")]
  10.     public class ControlTagHelper : PanelBaseTagHelper
  11.     {
  12.         private readonly string _contentId;

  14.         public ControlTagHelper() : base(new Panel()
  15.         {
  16.             ShowBorder = false,
  17.             ShowHeader = false
  18.         })
  19.         {
  20.             _contentId = Guid.NewGuid().ToString();
  21.             ContentEl = [        DISCUZ_CODE_1        ]quot;#{_contentId}";
  22.         }

  24.         public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
  25.         {
  26.             var contents = ViewContext.ViewBag.FINEUI_CONTROL_CONTENTS;
  27.             if (contents == null)
  28.             {
  29.                 contents = new List<string>();
  30.                 ViewContext.ViewBag.FINEUI_CONTROL_CONTENTS = contents;
  31.             }

  33.             var content = (await output.GetChildContentAsync()).GetContent();
  34.             contents.Add([        DISCUZ_CODE_1        ]quot;<div id="{_contentId}">{content}</div>");

  36.             await base.ProcessAsync(context, output);
  37.         }
  38.     }
  39. }
复制代码

上面的代码也比较简单就是将HTML内容放入 ViewBag.FINEUI_CONTROL_CONTENTS 中，起这长的名称也是为了防止冲突。

下面是将HTML放到页面中的代码：

  1. @if (ViewBag.FINEUI_CONTROL_CONTENTS is List<string> contents)
  2. {
  3.         foreach (var content in contents)
  4.         {
  5.                 @Html.Raw(content)
  6.         }
  7. }
复制代码

你可以将其放到布局页面中，这样就不用每一个页面都添加了。

同时还要在 _ViewImports.cshtml 添加下面的代码：

  1. @addTagHelper *, FineUICore.EmptyProject.RazorPages
复制代码

FineUICore.EmptyProject.RazorPages 是程序集的名称，可以改为自己程序集的名称。

完整项目文件请到知识星球下载。







作者: sanshi    时间: 2020-4-2 17:57
这个尝试非常好。

下个版本（v6.3.0），我们会增加类似的ContentPanel标签帮助器，让FineUICore RazorPages的页面标签和WebForms更加一致。
作者: kakaeex    时间: 2020-7-27 18:23
赞一个好的思路



欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4