FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

查看: 603|回复: 2

创建可包含HTML的 FineUI TagHelper

[复制链接]
发表于 2020-4-1 15:15:29 | 显示全部楼层 |阅读模式
本帖最后由 棕榈 于 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;

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

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

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

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

  31.             await base.ProcessAsync(context, output);
  32.         }
  33.     }
  34. }
复制代码

上面的代码也比较简单就是将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 是程序集的名称,可以改为自己程序集的名称

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







发表于 2020-4-2 17:57:01 | 显示全部楼层
这个尝试非常好。

下个版本(v6.3.0),我们会增加类似的ContentPanel标签帮助器,让FineUICore RazorPages的页面标签和WebForms更加一致。
回复 支持 反对

使用道具 举报

发表于 2020-7-27 18:23:56 | 显示全部楼层
赞一个好的思路
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|FineUI 官方论坛 ( 皖ICP备13005369号-1 )

GMT+8, 2020-8-16 03:49 , Processed in 0.096740 second(s), 16 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表