An example of an ASP. NET Core Package Layui component

This article mainly introduces the detailed ASP. NET Core Package Layui component sample sharing, small series feel very good, now share to everyone, also for everyone to do a reference. Let's take a look at it with a little knitting.

In what package? It's just a taghelper, what is it? Look at the documentation yourself

When learning to use Taghelper, the most hope is to have a demo can make themselves as a reference

• How to encapsulate a component?

• How can different situations be achieved?

• Is there a better and more efficient way?

Look for AH find, finally ran to see the MVC in the Taghelpers, and then a good look at the Taghelper document

Reluctantly toss a few components out, originally wanted a component of a component to write articles, but found that the national day has ended ~

Demo download

Effect Preview

The code is for reference only, there are different opinions also forget to advise

Checkboxes check box component encapsulation

Tag name: Cl-checkbox

Tag properties: asp-for: Bound field, must be specified

1. Asp-items: Bind order Option type:ienumerable<selectlistitem>

2. Asp-skin:layui skin style, default or original

3. Asp-title: The value of the default checkbox is True if the text is displayed only if it is a check box and no items are specified

Where the source code finds two very useful pieces of code in the package

1. Determine if you can select multiple:

 code as follows:

var realModelType = For.ModelExplorer.ModelType; // judging by the type is multi-select
var _allowMultiple = typeof (string)! = realModelType && typeof (IEnumerable) .IsAssignableFrom (realModelType);
2. Get the list value of the model binding (multi-selection case)

Copy the code:

var currentValues = Generator.GetCurrentValues (ViewContext, For.ModelExplorer, expression: For.Name, allowMultiple: true);
These 3 sentences are found in the SelectTagHelper that comes with mvc.

Because Core actually provides a lot of TagHelper, for example, the commonly used selection is a good reference object. When the package encounters a problem, it may be unexpected and unexpected.

CheckboxTagHelper code



using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace LayuiTagHelper.TagHelpers
{
 /// <summary>
 /// checkbox
 /// </ summary>
 /// <remarks>
 /// Display a single item when the items are empty, and the value is true after selection
 /// </ remarks>
 [HtmlTargetElement (CheckboxTagName)]
 public class CheckboxTagHelper: TagHelper
 {
  private const string CheckboxTagName = "cl-checkbox";
  private const string ForAttributeName = "asp-for";
  private const string ItemsAttributeName = "asp-items";
  private const string SkinAttributeName = "asp-skin";
  private const string SignleTitleAttributeName = "asp-title";
  protected IHtmlGenerator Generator {get;}
  public CheckboxTagHelper (IHtmlGenerator generator)
  {
   Generator = generator;
  }

  [ViewContext]
  public ViewContext ViewContext {get; set;}

  [HtmlAttributeName (ForAttributeName)]
  public ModelExpression For {get; set;}

  [HtmlAttributeName (ItemsAttributeName)]
  public IEnumerable <SelectListItem> Items {get; set;}

  [HtmlAttributeName (SkinAttributeName)]
  public CheckboxSkin Skin {get; set;} = CheckboxSkin. default;

  [HtmlAttributeName (SignleTitleAttributeName)]
  public string SignleTitle {get; set;}

  public override void Process (TagHelperContext context, TagHelperOutput output)
  {
   // Get the generated Name property of the binding
   string inputName = ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName (For? .Name);
   string skin = string.Empty;
   #region style
   switch (Skin)
   {
    case CheckboxSkin. Default:
     skin = "";
     break;
    case CheckboxSkin. Original:
     skin = "primary";
     break;
   }
   #endregion
   #region Single checkbox
   if (Items == null)
   {
    output.TagName = "input";
    output.TagMode = TagMode.SelfClosing;
    output.Attributes.Add ("type", "checkbox");
    output.Attributes.Add ("id", inputName);
    output.Attributes.Add ("name", inputName);
    output.Attributes.Add ("lay-skin", skin);
    output.Attributes.Add ("title", SignleTitle);
    output.Attributes.Add ("value", "true");
    if (For? .Model? .ToString (). ToLower () == "true")
    {
     output.Attributes.Add ("checked", "checked");
    }
    return;
   }
   #endregion
   #region checkbox group
   var currentValues = Generator.GetCurrentValues (ViewContext, For.ModelExplorer, expression: For.Name, allowMultiple: true);
   foreach (var item in Items)
   {
    var checkbox = new TagBuilder ("input");
    checkbox.TagRenderMode = TagRenderMode.SelfClosing;
    checkbox.Attributes ["type"] = "checkbox";
    checkbox.Attributes ["id"] = inputName;
    checkbox.Attributes ["name"] = inputName;
    checkbox.Attributes ["lay-skin"] = skin;
    checkbox.Attributes ["title"] = item.Text;
    checkbox.Attributes ["value"] = item.Value;
    if (item.Disabled)
    {
     checkbox.Attributes.Add ("disabled", "disabled");
    }
    if (item.Selected || (currentValues! = null && currentValues.Contains (item.Value)))
    {
     checkbox.Attributes.Add ("checked", "checked");
    }

    output.Content.AppendHtml (checkbox);
   }
   output.TagName = "";
   #endregion
  }
 }
 public enum CheckboxSkin
 {
  default,
  original
 }
}
Usage example



@ {
string sex = "男";
var Items = new List <SelectListItem> ()
   {
    new SelectListItem () {Text = "Male", Value = "Male"},
    new SelectListItem () {Text = "Female", Value = "Female"},
    new SelectListItem () {Text = "Unknown", Value = "Unknown", Disabled = true}
   };
}
<cl-checkbox asp-items = "Model.Items" asp-for = "Hobby1" asp-skin = "default"> </ cl-checkbox>
<cl-checkbox asp-for = "Hobby3" asp-title = "single checkbox"> </ cl-checkbox>
Radio radio box component package

Tag name: cl-radio

Label attributes: asp-for: bound field, must be specified

asp-items: binding single option type is: IEnumerable <SelectListItem>

It's too simple, go straight to the code

RadioTagHelper code



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>
 /// Single box
 /// </ 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 ("The model must be bound");
}
   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 = "";
  }
 }
}
Usage example



@ {
string sex = "男";
var Items = new List <SelectListItem> ()
   {
    new SelectListItem () {Text = "Male", Value = "Male"},
    new SelectListItem () {Text = "Female", Value = "Female"},
    new SelectListItem () {Text = "Unknown", Value = "Unknown", Disabled = true}
   };
}
<cl-radio asp-items = "@ Items" asp-for = "sex"> </ cl-radio>
Finally, another switch component

The single check box can actually be replaced by a switch, which happens to be in layui, so the switch is also encapsulated separately, and the code is similar.

this one

It is also easy to use: <cl-switch asp-for = "Hobby4" asp-switch-text = "on | off"> </ cl-switch>



namespace LayuiTagHelper.TagHelpers
{
 /// <summary>
 /// switch
 /// </ summary>
 [HtmlTargetElement (SwitchTagName)]
 public class SwitchTagHelper: TagHelper
 {
  private const string SwitchTagName = "cl-switch";
  private const string ForAttributeName = "asp-for";
  private const string SwitchTextAttributeName = "asp-switch-text";

  protected IHtmlGenerator Generator {get;}
  public SwitchTagHelper (IHtmlGenerator generator)
  {
   Generator = generator;
  }

  [ViewContext]
  public ViewContext ViewContext {get; set;}

  [HtmlAttributeName (ForAttributeName)]
  public ModelExpression For {get; set;}

  [HtmlAttributeName (SwitchTextAttributeName)]
  public string SwitchText {get; set;} = "ON | OFF";

  public override void Process (TagHelperContext context, TagHelperOutput output)
  {
   string inputName = ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName (For? .Name);
   output.TagName = "input";
   output.TagMode = TagMode.SelfClosing;
   if (For? .Model? .ToString (). ToLower () == "true")
   {
    output.Attributes.Add ("checked", "checked");
   }
   output.Attributes.Add ("type", "checkbox");
   output.Attributes.Add ("id", inputName);
   output.Attributes.Add ("name", inputName);
   output.Attributes.Add ("value", "true");
   output.Attributes.Add ("lay-skin", "switch");
   output.Attributes.Add ("lay-text", SwitchText);

  }
 }
}
to sum up

The package is still very rough, and normal use is no problem. If problems are found, we still hope to point out.

Because layui is a form tag that is rendered directly after the page loads, there are not many styles related to layui.

In addition to some form components, the tabs, timeline, pagination, and code display components are actually encapsulated. These are described later.

Of course, those who are interested can take a look first to see what components are implemented