摘要

在使用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. USB的挂起和唤醒(Suspend and Resume)【转】

    转自:http://m.blog.csdn.net/blog/luckywang1103/25244091 USB协议的第9章讲到USB可见设备状态[Universal Serial Bus Spec ...

  2. Install Shield中调用devcon自动安装硬件驱动程序

    1.安装驱动程序命令devcon安装好WINDDK之后,devcon.exe在"C:\WINDDK\3790.1830\tools\devcon"目录下.>devcon up ...

  3. 关于Spring 事务管理传播属性的配置及作用-嵌套事务

    先了解事务的7种传播属性: PROPAGATION_REQUIRED -- 支持当前事务,如果当前没有事务,就新建一个事务.这是最常见的选择. PROPAGATION_SUPPORTS -- 支持当前 ...

  4. centos6.5安装maridb5.5.51

    1.先创建关于mariadb的yum源 vi /etc/yum.repos.d/MariaDB.repo [mariadb] name = MariaDB baseurl = http://yum.m ...

  5. 如何使用windows的计划任务?计划任务?

    我们经常有一些程序想要过了几小时来运行:比如定时关机 或者说希望能够每天的几点执行一个什么程序: 这些所有的操作都需要用到windows的任务计划:或者叫计划任务:反正都一样 下面小编将指导大家创建一 ...

  6. 5 个 Laravel Eloquent 小技巧

    1. 快速生成 Model & Migration 这并不是一个很多人知道的小技巧,为文章生成 Model 和 Migration. $ php artisan make:migration ...

  7. 一个浏览器Fuzzing框架的学习

    一个浏览器Fuzzing框架的学习 关于框架 之前是LCatro师傅在小密圈分享的他写的这个Fuzzing框架(不过我以前翻github时好像就看到过),但是之前一直没啥时间搞这方面,这两天研究学习了 ...

  8. 【LOJ】#121. 「离线可过」动态图连通性

    题解 和BZOJ4025挺像的 就是维护边权是时间的最大生成树 删边直接删 两点未联通时直接相连,两点联通则找两点间边权小的一条边删除即可 代码 #include <bits/stdc++.h& ...

  9. linux nohup screen注解

    一.nohup  & 二.screen

  10. 洛谷P2261 [CQOI2007] 余数求和 [数论分块]

    题目传送门 余数求和 题目背景 数学题,无背景 题目描述 给出正整数n和k,计算G(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值,其中k mod ...