The. net core page uses the HtmlHelper extension of layui and layuihtmlhelper

The. net core page uses the HtmlHelper extension of layui and layuihtmlhelper
Vino. Core. Extensions. Layui

If your. net core 2.0 project uses layui to render forms, you can try to use this extension library to help you reduce code and workload.

Project address: https://github.com/kulend/Vino.Core.Extensions

Installation Method
PM> Install-Package Vino. Core. Extensions. Layui-Version 2.0.2.1
Dotnet add package Vino. Core. Extensions. Layui -- version 2.0.2.1

Usage

// Use Layui services. AddLayui ();

　　

2. _ ViewImports. cshtml File

@addTagHelper *, Vino.Core.Extensions.Layui

　　

3. Define the Model and its attributes, for example:

Public class DemoModel {// <summary> // ID // </summary> [DataType ("hidden")] public long Id {get; set ;} /// <summary> /// Name /// </summary> [Required, MaxLength (20)] [Display (Name = "Name")] public string Name {get; set ;}/// <summary> /// address // </summary> [MaxLength (256)] [Display (Name = "Link")] public string Url {get; set ;} /// <summary> /// No. // </summary> [Display (Name = "no.", Prompt = "0 ~ 9999 ")] public int OrderIndex {get; set ;}= 0; /// <summary> /// switch /// </summary> [Display (Name = "", Prompt = "| ")] public bool Switch {get; set ;}= true; [Display (Name = "time")] [DisplayFormat (DataFormatString = "yyyy-MM-dd HH: mm: ss ")] // defines the display format [DataType (DataType. dateTime)] // You can also [DataType ("datetime")] public DateTime? Date {set; get;} [Display (Name = "year")] [DataType ("Year")] public int year {set; get ;} [Display (Name = "month")] [DisplayFormat (DataFormatString = "yyyy Year MM Month")] [DataType ("month")] public string Month {set; get ;}/// <summary >/// enumeration /// </summary> [Display (Name = "gender")] public EmSex Sex {set; get ;} /// <summary> /// multiline text /// </summary> [Display (Name = "Remarks", Prompt = "Enter your remarks... ")] [MaxLength (500)] [DataType (DataType. multilineText)] // or [DataType ("textarea")] public string Remark {set; get ;}} /// <summary> /// gender /// </summary> public enum EmSex: short {[Display (Name = "confidential")] Secret = 0, [Display (Name = "Male")] Male = 1, [Display (Name = "Female")] Female = 2}

　　

4. Use @ Html. InputFor in form, as shown in figure

    @using (Html.BeginForm<DemoModel>("Save"))    {        @Html.InputFor(x => x.Id)        @Html.InputFor(x => x.Name)        @Html.InputFor(x => x.Url)        @Html.InputFor(x => x.OrderIndex)        @Html.InputFor(x => x.Switch)        @Html.InputFor(x => x.Date)        @Html.InputFor(x => x.Year)        @Html.InputFor(x => x.Month)        @Html.InputFor(x => x.Sex)        @Html.InputFor(x => x.Remark)@Html.ActionsForSubmitAndReset()    }

　　

OK, isn't it easy?

See:

• Other Instructions

  [Display (Name = "Switch", Prompt = "on | off")]

  　　

  3. In addition to the field type, DataTypeAttribute is often required to determine the rendering method. The default value is text. You can also set hidden, password, multilinetext, textarea, datetime, date, year, month, and time. Multilinetext and textarea are rendered as Textarea.

  4. About the Action button,
     1). @ Html. ActionsForSubmit (), add and save button (submit form ).
     2). @ Html. ActionsForSubmitAndClose (), add the SAVE and close buttons.
     3). @ Html. ActionsForSubmitAndReset (), add the SAVE and reset buttons.
     4). @ Html. ActionsFor (btns), add a Custom button, for example:

  @ Html. actionsFor (new SubmitButton (), new CloseButton (), new ResetButton {Text = "Reset form"}, new ActionButton {Id = "btn_test", Text = "Custom button ", css = "btn-test", OnClick = "alert (1 );"})

  :

   

  5. Modify global default configuration

  // Use Layui services. addLayui (opt => {opt. submitButtonText = "save"; // by default, the text of the submit button opt. closeButtonTest = ""; // by default, the disabled button text opt. resetButtonText = "reset"; // by default, the text of the reset form button opt. closeButtonOnClick = "closeWindow ()"; // The OnClick event is disabled by default });

  　　

  6. For the laydate component, add the following js script on the page:

  layui.use(['laydate'], function () {    var $ = layui.jquery    , laydate = layui.laydate;    $(".layui-input.laydate").each(function () {        var self = $(this);        var type = self.data("type") || 'date';        var format = self.data("format") || 'yyyy-MM-dd';        laydate.render({            elem: self[0],            type: type,            format: format        });    });});

  　　

• If you have any bugs or other suggestions, submit an issue. You can also mail me: kulend@qq.com