摘要

在使用checkbox,为其绑定值的时候,有些麻烦,就想着能不能用taghelper将其封装一下。直接上demo。

一个例子

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace LayUI.TagHelpersDemo.TagHelpers
{
public class CheckBoxTagHelper : TagHelper
{
public List<CheckBoxItem> Items { set; get; } = new List<CheckBoxItem>();
public string Name { set; get; } = Guid.NewGuid().ToString();
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "checkbox";
if (Items != null && Items.Count > )
{
for (int i = ; i < Items.Count; i++)
{
var checkbox = new TagBuilder("input");
checkbox.TagRenderMode = TagRenderMode.SelfClosing;
var item = Items[i];
checkbox.Attributes.Add("id", item.Id);
checkbox.Attributes.Add("name", Name);
if (item.Checked)
{
checkbox.Attributes.Add("checked", "checked");
}
if (item.Disabled)
{
checkbox.Attributes.Add("disabled", "disabled");
}
checkbox.Attributes.Add("type", "checkbox");
checkbox.Attributes.Add("value", item.Value);
checkbox.Attributes.Add("title", item.Text); output.Content.AppendHtml(checkbox);
}
}
base.Process(context, output);
}
}
}

CheckBoxItem

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks; namespace LayUI.TagHelpersDemo.TagHelpers
{
/// <summary>
/// 复选框项
/// </summary>
public class CheckBoxItem
{
/// <summary>
/// 复选框id
/// </summary>
public string Id { set; get; } = Guid.NewGuid().ToString();
/// <summary>
/// 复选框值
/// </summary>
public string Value { set; get; }
/// <summary>
/// 复选框文本内容
/// </summary>
public string Text { set; get; }
/// <summary>
/// 是否选中
/// </summary>
public bool Checked { set; get; }
/// <summary>
/// 是否可用
/// </summary>
public bool Disabled { set; get; }
}
}

在_ViewImports.cshtml引入自定义taghelper

@using LayUI.TagHelpersDemo
@using LayUI.TagHelpersDemo.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@tagHelperPrefix wf:
@addTagHelper LayUI.TagHelpersDemo.*,LayUI.TagHelpersDemo

使用

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using LayUI.TagHelpersDemo.Models;
using LayUI.TagHelpersDemo.TagHelpers; namespace LayUI.TagHelpersDemo.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
} public IActionResult About()
{
ViewData["Message"] = "Your application description page."; return View();
} public IActionResult Contact()
{
ViewData["Message"] = "Your contact page."; return View();
}
public IActionResult Test()
{
List<CheckBoxItem> items = new List<CheckBoxItem> {
new CheckBoxItem{ Id=Guid.NewGuid().ToString(), Value =Guid.NewGuid().ToString(), Text="篮球" },
new CheckBoxItem{ Id=Guid.NewGuid().ToString(), Value=Guid.NewGuid().ToString(), Text="足球" },
new CheckBoxItem{ Id=Guid.NewGuid().ToString(), Value=Guid.NewGuid().ToString(), Text="美女" }
};
return View(items);
}
public string Post()
{
return Request.Form["interest"];
}
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}
@{
Layout = null;
} <!DOCTYPE html>
@model List<LayUI.TagHelpersDemo.TagHelpers.CheckBoxItem>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link href="@Url.Content("~/layui/css/layui.css")" rel="stylesheet" />
</head>
<body> <form class="layui-form"action="../home/post" method="post">
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<wf:check-box items="Model" name="interest"></wf:check-box>
</div>
</div>
<input type="submit" name="name" class="layui-btn layui-btn-lg" value="提交" />
</form>
<script src="@Url.Content("~/layui/layui.js")"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form
, layer = layui.layer
, layedit = layui.layedit
, laydate = layui.laydate; //日期
laydate.render({
elem: '#date'
});
laydate.render({
elem: '#date1'
}); //创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则
form.verify({
title: function (value) {
if (value.length < ) {
return '标题至少得5个字符啊';
}
}
, pass: [/(.+){,}$/, '密码必须6到12位']
, content: function (value) {
layedit.sync(editIndex);
}
}); //监听指定开关
form.on('switch(switchTest)', function (data) {
layer.msg('开关checked:' + (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
}); //监听提交
form.on('submit(demo1)', function (data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
}); });
</script> </body>
</html>

测试

提交之后,获取每项ID

f7be9e8d-31a2-4206-a3c3-fc5e391c1629,607849ae-d1fa-4007-9e0d-9faaf10c8f1f

总结

一些常用的控件,可以通过taghelper对其进行封装一下,使用起来更方便。

[Asp.net core]封装Layer ui checkbox 为taghelper的更多相关文章

  1. asp.net core 集成swagger ui

    什么是Swagger? 说swagger 之前,我们先说一下OpenApi 规范. OpenApi 是一种和语言无关的用于描述RESTAPIs 接口功能的一种规范,对RESTAPIs 接口的描述包括: ...

  2. ASP.NET Core 3.0 : 二十五. TagHelper

    什么是TagHelper?这是ASP.NET Core 中新出现的一个名词,它的作用是使服务器端代码可以在Razor 文件中参与创建和呈现HTML 元素.(ASP.NET Core 系列目录) 一.概 ...

  3. asp.net core封装layui组件示例分享

    用什么封装?自然是TagHelper啊,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考 怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更 ...

  4. ASP.NET Core 在 Swagger UI 中显示自定义的 Header Token

    Swagger 是个好东西,对于前后端分离的网站来说,不仅是提高前后端开发人员沟通效率的利器,也大大方便了后端人员测试 API.有时候,API 中可能需要在 Header 中设置认证参数,比如 aut ...

  5. ASP.NET Core 运行原理剖析

    1. ASP.NET Core 运行原理剖析 1.1. 概述 1.2. 文件配置 1.2.1. Starup文件配置 Configure ConfigureServices 1.2.2. appset ...

  6. ASP.NET Core 运行原理剖析 (转载)

    1.1. 概述 在ASP.NET Core之前,ASP.NET Framework应用程序由IIS加载.Web应用程序的入口点由InetMgr.exe创建并调用托管.以初始化过程中触发HttpAppl ...

  7. ASP.NET Core缓存静态资源

    背景 缓存样式表,JavaScript或图像文件等静态资源可以提高您网站的性能.在客户端,总是从缓存中加载一个静态文件,这样可以减少对服务器的请求数量,从而减少获取页面及其资源的时间.在服务器端,由于 ...

  8. Asp.Net Core 2.0 项目实战(6)Redis配置、封装帮助类RedisHelper及使用实例

    本文目录 1. 摘要 2. Redis配置 3. RedisHelper 4.使用实例 5. 总结 1.  摘要 由于內存存取速度远高于磁盘读取的特性,为了程序效率提高性能,通常会把常用的不常变动的数 ...

  9. Asp.Net Core 2.0 项目实战(4)ADO.NET操作数据库封装、 EF Core操作及实例

    Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...

随机推荐

  1. Linux中普通用户提权为超级用户

    首先创建一个普通用户,并且给普通用户设置一个密码,保证能用su 命令能用普通用户登录 [root@ahu ~]# useradd test [root@ahu ~]# passwd test New ...

  2. Python学习笔记之逻辑回归

    # -*- coding: utf-8 -*- """ Created on Wed Apr 22 17:39:19 2015 @author: 90Zeng " ...

  3. 修改history记录数门限

    你的 Bash 命令历史保存的历史命令的数量可以在 ~/.bashrc 文件里设置.在这个文件里,你可以找到下面两行: HISTSIZE=1000 HISTFILESIZE=2000 HISTSIZE ...

  4. Robotium_断言方法assert、is、search

    下面的这些方法都主要用来判断测试结果是否与预期结果相符,一般把is和search方法放在assert里面判断.assert最常用的还是assertThat方法,是Junit的判断,这里就不多说了.断言 ...

  5. 当父级绑定了DataContext之内的数据源时,子级想重新绑回DataContext

    <Grid x:Name="NewDeploymentObjectPanel" Background="White" DataContext=" ...

  6. java 把被检查的异常转换为不检查的异常

    一.当我们不知道该怎么处理这个异常,但是也不想把它"吞"了,或者打印一些无用的信息,可以使用异常链的思路解决.可以直接报"被检查的异常"包装进RuntimeEx ...

  7. mysql添加事件

    begin declare debug int; set @debug = 0; if @debug = 1 then insert into task_monitor(info) values('s ...

  8. Intellij Idea启用Git可视化界面

    第一步. 第二步. 然后点击OK 验证 

  9. react + redux 完整的项目,同时写一下个人感悟

    先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...

  10. Gitlab Webhooks, External Services, and API(二)

    一. 使用webhooks webhook 是一个API的概念,并且变得越来越流行.我们能用事件描述的事物越多,webhook的作用范围也就越大.webhook作为 个轻量的事件处理应用,正变得越来越 ...