Detailed introduction to asp.net core package layui component examples, asp. netlayui

Detailed introduction to asp.net core package layui component examples, asp. netlayui

What encapsulation is used? Here we only use TagHelper. What is it? View documents by yourself

When learning to use TagHelper, the most hope is to have a Demo for your reference.

• How to encapsulate a component?
• How can we achieve this in different situations?
• Is there a better and more efficient way?

Find and find. Finally, I ran to view the TagHelpers in mvc. Then I took a good look at the TagHelper document.

I tried to write articles for one component, but I found that the national day was over ~

Download Demo

Effect Preview

The code is for reference only. If you have different opinions, please do not hesitate to give me some advice.

Checkbox check box component Encapsulation

Label name: cl-checkbox

Tag attribute: asp-for: bound field, which must be specified

1. Asp-items: the type of the binding single option is IEnumerable <SelectListItem>
2. Asp-skin: Specifies the skin style of layui, Which is default or original.
3. Asp-title: if only the text displayed when a check box is used and items is not specified, the default Checkbox value is true.

During encapsulation, the source code shows two useful codes.

1. Determine whether multiple options are allowed:

Copy codeThe Code is as follows:
Var realModelType = For. ModelExplorer. ModelType; // you can use the type to determine whether to select var _ allowMultiple = typeof (string )! = RealModelType & typeof (IEnumerable). IsAssignableFrom (realModelType );

2. Obtain the List Value bound to the model (multiple options)

Copy codeThe Code is as follows:
Var currentValues = Generator. GetCurrentValues (ViewContext, For. ModelExplorer, expression: For. Name, allowMultiple: true );

The three codes are found in SelectTagHelper of mvc.

Because the core actually provides a lot of TagHelper, for example, the commonly used select is a good reference object. When there is a problem in encapsulation, you can find it and find it.

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> /// check box /// </summary> /// <remarks> /// when Items is empty, a single, and the value after selection is true // </remarks> [HtmlTargetElement (CheckboxTagName)] public class CheckboxTagHelper: TagHelper {private const string Chec KboxTagName = "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 ViewCont Ext 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 Value: [HtmlAttributeName (SignleTitleAttributeName)] public string SignleTitle {get; set;} public overri De void Process (TagHelperContext context, TagHelperOutput output) {// obtain the bound generated Name attribute string inputName = ViewContext. ViewData. TemplateInfo. GetFullHtmlFieldName (?. Name); string skin = string. empty; # region style switch (Skin) {case CheckboxSkin. default Value: skin = ""; break; case CheckboxSkin. original: skin = "primary"; break;} # endregion # region single check box 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. attribut Es. add ("lay-skin", skin); output. attributes. add ("title", SignleTitle); output. attributes. add ("value", "true"); if (?. Model ?. ToString (). toLower () = "true") {output. attributes. add ("checked", "checked") ;}return ;}# endregion # region check box group var currentValues = Generator. getCurrentValues (ViewContext,. modelExplorer, expression:. name, allowMultiple: true); foreach (var item in Items) {var checkbox = new TagBuilder ("input"); checkbox. tagRenderMode = TagRenderMode. selfClosing; checkbox. attributes ["type"] = "checkbox"; ch Eckbox. 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 }}

Example

@ {String sex = "male"; var Items = new List <SelectListItem> () {new SelectListItem () {Text = "male", Value = "male "}, new SelectListItem () {Text = "", Value = ""}, 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 check box "> </cl-checkbox>

Radio single-component Encapsulation

Label name: cl-radio

1. Tag attribute: asp-for: bound field, which must be specified
2. Asp-items: the type of the binding single option is IEnumerable <SelectListItem>

It's too simple to go directly 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 vertex // </summary> [HtmlTargetElement (RadioTagName)] public class RadioTagHelper: tagHelper {private const string RadioTagName = "cl-radio"; private const string ForAttr IbuteName = "asp-for"; private const string ItemsAttributeName = "asp-items"; [ViewContext] public 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 (= Null) {throw new ArgumentException ("model binding required");} foreach (var item in Items) {var radio = new TagBuilder ("input"); radio. tagRenderMode = TagRenderMode. selfClosing; radio. attributes. add ("id", ViewContext. viewData. templateInfo. getFullHtmlFieldName (. name); radio. attributes. add ("name", ViewContext. viewData. templateInfo. getFullHtmlFieldName (. 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 =. model ?. ToString () {radio. attributes. add ("checked", "checked");} output. content. appendHtml (radio);} output. tagName = "";}}}

Example

@ {String sex = "male"; var Items = new List <SelectListItem> () {new SelectListItem () {Text = "male", Value = "male "}, new SelectListItem () {Text = "", Value = ""}, new SelectListItem () {Text = "unknown", Value = "unknown ", disabled = true }};}< cl-radio asp-items = "@ Items" asp-for = "sex"> </cl-radio>

The last switch component

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

That's it.

Easy to use:<Cl-switch asp-for = "Hobby4" asp-switch-text = "enabled | disabled"> </cl-switch>


Namespace LayuiTagHelper. tagHelpers {// <summary> /// toggle /// </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 g Enerator) {Generator = generator;} [ViewContext] public 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. template Info. GetFullHtmlFieldName (?. Name); output. TagName = "input"; output. TagMode = TagMode. SelfClosing; if (?. 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 );}}}

Summary

The encapsulation is still rough and normal use is okay. If any problem is found, I hope to point it out.

Because layui is a form tag that is rendered directly after the page is loaded, there are not many laui UI-related styles.

In addition to some form components, the tabs, timelines, pages, and code display components are encapsulated.

Of course, if you are interested, you can take a quick look at the components that have been implemented.

Repository address

WeDemo branch clone command:git clone https://git.coding.net/yimocoding/WeDemo.git -b LayuiTagHelper

Tab, timeline, paging, code display, and other Demo package downloads

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.