[Asp.net core]封装Layer ui checkbox 为taghelper

摘要

在使用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 Items { set; get; } = new List();
        public string Name { set; get; } = Guid.NewGuid().ToString();
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "checkbox";
            if (Items != null && Items.Count > 0)
            {
                for (int i = 0; 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
{
    /// 

    /// 复选框项
    /// 
    public class CheckBoxItem
    {
        /// 

        /// 复选框id
        /// 
        public string Id { set; get; } = Guid.NewGuid().ToString();
        /// 

        /// 复选框值
        /// 
        public string Value { set; get; }
        /// 

        /// 复选框文本内容
        /// 
        public string Text { set; get; }
        /// 

        /// 是否选中
        /// 
        public bool Checked { set; get; }
        /// 

        /// 是否可用
        /// 
        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 items = new List {
                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;
}



@model List


    "viewport" content="width=device-width" />
    
    "@Url.Content("~/layui/css/layui.css")" rel="stylesheet" />



    
class="layui-form"action="../home/post" method="post">
        
class="layui-form-item">
            class="layui-form-label">复选框
            
class="layui-input-block">
                "Model"  name="interest">
            
        
        "submit" name="name" class="layui-btn layui-btn-lg" value="提交" />
    
    
    
    

测试

提交之后，获取每项ID

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

总结

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