创建可包含HTML的 FineUI TagHelper

棕榈

创建可包含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;
   
6. 
   
7. namespace FineUICore.EmptyProject.RazorPages.Code
   
8. {
   
9.     [HtmlTargetElement("f:Control")]
   
10.     public class ControlTagHelper : PanelBaseTagHelper
    
11.     {
    
12.         private readonly string _contentId;
    
13. 
    
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.         }
    
23. 
    
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.             }
    
32. 
    
33.             var content = (await output.GetChildContentAsync()).GetContent();
    
34.             contents.Add([        DISCUZ_CODE_1        ]quot;<div id="{_contentId}">{content}</div>");
    
35. 
    
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

这个尝试非常好。

下个版本（v6.3.0），我们会增加类似的ContentPanel标签帮助器，让FineUICore RazorPages的页面标签和WebForms更加一致。

kakaeex

赞一个好的思路