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>

TagHelper+Layui封装组件之Radio单选框的更多相关文章

  1. layui 获取radio单选框选中的值

    Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio& ...

  2. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  3. Radio 单选框

    Radio 单选框 在一组备选项中进行单选 ¶基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着 ...

  4. 前端 HTML form表单标签 input标签 type属性 radio 单选框

    <input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...

  5. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  6. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  7. selenium死活定位不到元素以及radio单选框点击不生效

    今天操作一个单选框浪费太多时间,现在其实很简单得东西,记录一下: 1,问题一,定位不到 如图,使用selenium IDE和xpath helper都试过,无法成功定位到这个单选框,实际上是因为,这个 ...

  8. JQuery radio单选框应用

    转载:JQuery判断radio(单选框)是否选中和获取选中值方法总结 一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 复制代码 代码如下: < !DOCTYPE html P ...

  9. jquery获取radio单选框的值

    1.获取原有单选框的值 var value=$("input[name='is_setting']:checked").val(); 2.获取重选后的单选框的值 <tr> ...

随机推荐

  1. 关于《Head First Python》一书中print_lol()函数的思考

    关于<Head First Python>一书中print_lol()函数的思考 在<Head First Python>第一章中,讲述到Python处理复杂数据(以电影数据列 ...

  2. 二叉树Bynary_Tree(2):二叉树的递归遍历

    7/18/2017 正在码,理解完就写博 7/21/2017 终于码完,借助链表实现的队列撸一个二叉树对于我来说有难度,撸了两天没有成果,我最后选用的是数组实现的循环队列去撸一个二叉树 正文如下: 以 ...

  3. androidSD卡操作

    1.获取SD卡目录:File file = Environment.getExternalStorageDirectory(); 2.获取SD卡路径:String path = Environment ...

  4. 解题思路:best time to buy and sell stock i && ii && iii

    这三道题都是同一个背景下的变形:给定一个数组,数组里的值表示当日的股票价格,问你如何通过爱情买卖来发家致富? best time to buy and sell stock i: 最多允许买卖一次 b ...

  5. 支持各种特殊字符的 CSV 解析类 (.net 实现)(C#读写CSV文件)

    CSV是一种十分简洁的数据结构,在DOTNET平台实际使用中发现微软官方并没有提供默认的方法,而网上好多例子发现实现并不严谨甚至一些含有明显错误,所以后面自己实现了一个读写工具类,这里发出来希望方便后 ...

  6. Xamarin android使用Sqlite做本地存储数据库

    android使用Sqlite做本地存储非常常见(打个比方就像是浏览器要做本地存储使用LocalStorage,貌似不是很恰当,大概就是这个意思). SQLite 是一个软件库,实现了自给自足的.无服 ...

  7. sourcetree跳过注册的方法

    当前只有Win的版本,Mac自行百度(笑) 很多人用git命令行不熟练,那么可以尝试使用sourcetree进行操作. 然鹅~~sourcetree又一个比较严肃的问题就是,很多人不会跳过注册或者操作 ...

  8. Ubuntu16.04 IDE: 用Vim逐步打造一个IDE

    目前打造完成的IDE主要有: terminator+Bundle+NERDtree+YCF(youcompleteme)+UltiSnips+新创建文件自动补充注释和作者,版权信息等 1,当任务比较多 ...

  9. CSS3 美女动画相框

    把下面的内容放到一个body内,运行看一看:) <style> *{ margin:0; padding:0;} .bg1{ background-image:-moz-linear-gr ...

  10. Specified key was too long max key length is 1000 bytes

    Mysql建立索引时遇到一个问题就是索引字段长度太长,解决办法: 1.修改字段长度 : 2.修改mysql默认的存储引擎 ,修改为INNODB: https://www.2cto.com/databa ...