摘要
在使用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 Test 测试
提交之后，获取每项ID
f7be9e8d-31a2-4206-a3c3-fc5e391c1629,607849ae-d1fa-4007-9e0d-9faaf10c8f1f
总结
一些常用的控件，可以通过taghelper对其进行封装一下，使用起来更方便。