An example of an ASP. NET Core Package Layui component

Source: Internet
Author: User
Tags generator tag name tagname
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.