专栏首页一个爱瞎折腾的程序猿TagHelper+Layui封装组件之Radio单选框

TagHelper+Layui封装组件之Radio单选框

TagHelper+Layui封装组件之Radio单选框

  • 标签名称:cl-radio
  • 标签属性:
    • asp-for:绑定的字段,必须指定
    • asp-items:绑定单选项 类型为:IEnumerable<SelectListItem> 太简单了,直接上代码了

RadioTagHelper代码

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace LayuiTagHelper.TagHelpers
{
    /// <summary>
    /// 单选框
    /// </summary>
    [HtmlTargetElement(RadioTagName)]
    public class RadioTagHelper : TagHelper
    {
        private const string RadioTagName = "cl-radio";
        private const string ForAttributeName = "asp-for";
        private const string ItemsAttributeName = "asp-items";

        [ViewContext]
        public ViewContext ViewContext { get; set; }

        [HtmlAttributeName(ForAttributeName)]
        public ModelExpression For { get; set; }

        [HtmlAttributeName(ItemsAttributeName)]
        public IEnumerable<SelectListItem> Items { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (For == null)
            {
                throw new ArgumentException("必须绑定模型");
            }
            foreach (var item in Items)
            {
                var radio = new TagBuilder("input");
                radio.TagRenderMode = TagRenderMode.SelfClosing;
                radio.Attributes.Add("id", ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(For.Name));
                radio.Attributes.Add("name", ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(For.Name));
                radio.Attributes.Add("value", item.Value);
                radio.Attributes.Add("title", item.Text);
                radio.Attributes.Add("type", "radio");
                if (item.Disabled)
                {
                    radio.Attributes.Add("disabled", "disabled");
                }
                if (item.Selected || item.Value == For.Model?.ToString())
                {
                    radio.Attributes.Add("checked", "checked");
                }
                output.Content.AppendHtml(radio);
            }
            output.TagName = "";
        }
    }
}

使用示例

@{
string sex="男";
var Items=new List<SelectListItem>()
           {
                new SelectListItem() { Text = "男", Value = "男" },
                new SelectListItem() { Text = "女", Value = "女"},
                new SelectListItem() { Text = "不详", Value = "不详",Disabled=true }
           };
}
<cl-radio asp-items="@Items" asp-for="sex"></cl-radio>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用node自动生成html并调用cmd命令提交代码到仓库

    然后就可以愉快的抓数据了。之前也写过基于request,iconv,cheerio,schedule(定时调度模块)写了一个抓取的框架

    易墨
  • js实用方法记录-js动态加载css、js脚本文件

    方法测试:openApp('ios页面','**.apk','metools://home');

    易墨
  • 为 VUE 项目添加 PWA 解决发布后刷新报错问题

    下面这些文件忘记出处是哪,Github也能搜到一些,之前写的 PWA 的 Demo 里面拿过来的~

    易墨
  • 纯CSS制作一个评星组件(说出去都没人信)

    如果让你制作上面图的效果,你会怎么开发了?可以下发评论说说你的想法。今天就来看看纯CSS是如何实现这个效果的。

    Javanx
  • [LeetCode] Symmetric Tree

    1、题目名称 Symmetric Tree https://leetcode.com/problems/symmetric-tree/ 2、题目内容 Give...

    程序员小王
  • 自动化营销如何颠覆传统模式,推进电商APP用户转化

    2020年,你的营销需求和痛点是什么?市场环境的变化以及从流量运营到用户运营的转变,使得电商营销也在经历重要的转型期。

    盒子菌
  • 5月机器学习TOP 10热文: Google Duplex,“换脸术”、网格单元(附文章地址)

    新智元
  • 「面试」美团肝了我30+问题

    如果你问我,看了这些题就完事了?非也,这只是开始,你需要学习的还有很多,知道路子是怎么走才是重要的勒。

    我是程序员小贱
  • 腾讯云elasticsearch产品优化指南

    另:es最佳实践文档:https://cloud.tencent.com/document/product/845/19551 es监控指标介绍文档:http...

    3452127307
  • 李岩:CynosDB for MySQL高可用系统介绍

    3月16日在北京举行的腾讯云自研数据库CynosDB交流会圆满落下帷幕。现将技术团队分享的内容整理如下。

    云加社区技术沙龙

扫码关注云+社区

领取腾讯云代金券