This article will introduce the production of PasteForm, PasteForm is to paste the code using Dto ideas to achieve a CRUD component , or output a thought!
Why do I think it is the best CRUD? Let's start by answering the following questions in the context of your actual project:
1. If you have a system with 100 tables, how many pages do you need on the management side? Don't tell me that 100 tables is a lot, the needs of the more complex casually on the 100 database tables!
2. new requirements come down, say XX table to add a new field, default is 100, input when adding, no support for modification, as your current management side you need a few steps to achieve? Key points how do you do version transition issues?
3. do development are to, table and table is generally related, although not necessarily establish the outer appearance of the chain, such as BindUserGrade table UserId is generally expressed in the UserInfo table Id, which involves entering, updating, and displaying the problem, in fact, we would like to see is to display the UserInfo in the UserName rather than a dry UserId, right? not a dry UserId right!
4. a table when we are in the management side of the time will generally involve a list of data display, more commonly used is the table table right, corresponding to the new, edit, view, delete, that as the management side of how do you control their permissions? Permissions often involves 2 major blocks, a. the front-end page of the display or not, b. the back-end interface in the determination of the permissions
... .. .
Let's take a look at how PasteTemplate, a PasteForm case study, handles the above issues!
Case Code/pastecode/paste-template/tree/master/example/PasteTemplate
After downloading the code from above, launch it directly and then, it should be port localhost:22222http://localhost:22222/page/
landing page
There's not much to say about the landing page, as it doesn't involve retrieving passwords, registering, etc., just the graphical verification code and login
management side
After logging in, you see the image above
The left menu uses a dynamic mode, the menu is read by the permissions, the system will write the default menu to the database at the first startup, if the current account has root-root privileges, it will return to all the menus, that is, root-root means the meaning of super privileges, has all the permissions of the system!
Since the information in the other tables is relatively simple, I'll take an example from the data in the test table
Page composition
The whole system of PasteForm is actually only 4 pages.
1. The above page serves as the menu page for the administration side.
2. The right area of the data table table display and the search area above him composed of pasteform / page
3. Corresponding to the table of editing and adding pages, adding and editing is the same page, here named pasteform /, that is, the form form page
4. Some times the table data how big, we do not want to show all the table, such as the body of the blog post, which requires a page to view the details, pasteform/
Management side of the main page, probably left and right layout, 100% absolute positioning, is to meet the right side of the sub-page of the flex layout, the main point is the left side of the tree, the content is read from the API, that is, different accounts logged in to see the menu is not the same, the specific look at the role corresponding to the menu (permissions)
pasteform/
As you can see in the image above, it's safe to say that the entire page is controlled by the Dto on the backend
1. For example, how many search items in the search area, the interaction of search items (daterange, date, outer, select, selects, word, etc.)
2. The table in the middle area contains the basic 4 menus of Add, Edit, Delete, Details, and then some buttons for customization, such as the one pictured above Add Subset!
3. and then the sorting of the form area, pay attention to the form header in the ID sorting hierarchy In fact, which fields support sorting, in the back-end of the Dto is also a line of code in the matter!
4. Some interactions in the form, such as the above picture of the switch, click on the switch can be directly modified, the operation will interact with the back-end API, if the return is not 200 will reset the state of the
5. button area of the submit button, some times the form of the button needs to be conditionally determined, that is also supported, such as age>18 show button 1, age<12 show button 2, etc.!
6. Form of custom display, sometimes we want a form to display multiple fields, such as line breaks and so on, can also be achieved
pasteform/
The main form page, which serves as an add or edit page, supports almost all common entries
1. Basic entry including default values, such as text, number, switch, select and so on.
2. Also supports special formats , such as daterange, richtext, textarea, selects, image, file and so on.
3. Advanced support, appearance of the input, such as the selection of other tables of an object as a form of an entry
Clicking on the input box behind the parent is a pop-up page to select an object to be used as the value of this input box, the value usually contains 2, one is the id and the other is the display of the
4. Advanced support, parameter input, such as adding a subset of the list of permissions, then open the Add page, this time the parent is not to enter, by the url parameter transfer over
There are many more features that you can discover, and a whole lot of them are actually configured in Dto.
What's a dto?
contact with ABPvNext should be more data, in fact, is a different Model, such as UserInfo this table, generally create the corresponding four Dto
UserInfoAddDto: data model added as UserInfo
UserInfoUpdateDto: the data model for editing as a UserInfo
UserInfoDto: Generally used as a data model for detailed displays
UserInfoListDto: generally used as a table, list of data display with
These models can be configured to transfer to each other, that is, using AutoMapper!
In order to realize a more flexible CRUD, we only need to add the corresponding attributes to the fields in the corresponding Dto, due to the more specific needs, I defined an attribute
/// <summary>
/// Data types for front-end
/// </summary>
[AttributeUsage( | , AllowMultiple = true)]
public class ColumnDataTypeAttribute : Attribute
{
/// <summary>
/// image region navigator select selects dateplan datetimeet al. (and other authors)
/// </summary>
public string Name { get; set; } = "";
/// <summary>
///
/// </summary>
public string Args1 { get; set; } = "";
/// <summary>
///
/// </summary>
public string Args2 { get; set; } = "";
/// <summary>
/// parameters3
/// </summary>
public string Args3 { get; set; } = "";
/// <summary>
/// parameters4
/// </summary>
public string Args4 { get; set; } = "";
/// <summary>
///
/// </summary>
public string ErrorMessage { get; set; } = "";
/// <summary>
/// 按照要求文档填写parameters
/// </summary>
/// <param name="name"></param>
/// <param name="args1"></param>
/// <param name="args2"></param>
/// <param name="args3"></param>
/// <param name="args4"></param>
/// <param name="ErrorMessage"></param>
public ColumnDataTypeAttribute(string name = "", string args1 = "", string args2 = "", string args3 = "", string args4 = "", string ErrorMessage = "")
{
= name;
this.Args3 = args3;
this.Args1 = args1;
this.Args2 = args2;
this.Args4 = args4;
= ErrorMessage;
}
/// <summary>
///
/// </summary>
/// <returns></returns>
public override string ToString()
{
return ("{0}-{1}-{2}-{3}-{4}", Name, Args1, Args2, Args3, Args4);
}
}
Then it is a matter of adding this or more of this attribute to the field that needs to be qualified, for example
////<summary>
//// Test table Table for testing CURDs
///</summary>; /// Test table for testing CURDs
public class TestTableAddDto
{
///</summary>
//// name Simulates short text input
///</summary>
[MaxLength(32)]
[Required]
[PasteMark("test", "name")]
public string Name { get; set; }
///<summary>.
//// Avatar Simulate image upload
///</summary>
[MaxLength(128)]
[PasteMark("test", "head")]
[ColumnDataType("image", "1", "head", "60*60")]
public string Head { get; set; }
///<summary>.
//// Age Analog input number
///</summary>
[Range(5, 90, ErrorMessage = "Age must be limited to between 5 and 90!")]
public int Age { get; set; }
///<summary>.
//// textarea Simulate input in textarea
///</summary>
[MaxLength(128)]
public string Desc { get; set; }
////<summary>
//// Rich text Simulate rich text, front-end HTML is using wangEditv5
///</summary> ///</summary>
public string Blog { get; set; }
////<summary>
//// Add date to simulate required time entry
///</summary>
public DateTime JoinDate { get; set; }
/// <summary>
/// Documentation
/// </summary> /// Documentation
[ColumnDataType("file", "/api/app/Upload/UpImage?type=file")]]
public string Fpath { get; set; } = "";
////<summary>.
//// Radioactive Generally indicates state, built-in, kind of like Enum, which will be supported later.
///</summary>; ///</summary> [ColumnDataType
[ColumnDataType("mark", "test", "datetype")]]
[ColumnDataType("select", "[{\"name\":\"day type\",\"value\":0},{\"name\":\"month type\",\"value\":1},{\"name\":\"year type\",\"value\":2}]"])]
public int DateType { get; set; }
/// <summary>.
/// Checksums Separate more than one with a comma.
/// </summary> /// Checksums are separated by commas.
[ColumnDataType("selects", "[{\"name\":\"day\",\"value\":\"day\"},{\"name\":\"month\",\"value\":\"month\"},{\"name\":\"year\",\"value\ ":\"year\"}]", ",")]
public string TypeStrs { get; set; }
/// <summary>.
/// Check Array
/// </summary> /// TypeStrs { get; set; }
[ColumnDataType("selects", "[{\"name\":\"day\",\"value\":\"day\"},{\"name\":\"month\",\"value\":\"month\"},{\"name\":\"year\",\"value\ ":\"year\"}]]")]
public string[] Types { get; set; }
///<summary>.
//// Role ID This is generally used for appearance, that is, selecting a piece of data from another table as input.
///</summary>
[ColumnDataType("outer", "gradeInfo", "", "id", "name")]
public int GradeId { get; set; }
///<summary>.
//// Grades Analog front-end limited to 2 decimals
///</summary>
public double Score { get; set; }
/// <summary>
/// String multimap
/// </summary>
[ColumnDataType("image", "3", "img", "60*60")]
public string Img2 { get; set; }
/// <summary>.
/// Array Images
/// </summary> /// Array Images.
[ColumnDataType("image", "3", "img", "60*60")]
public string[] Img3 { get; set; }
/// <summary>.
/// Membership Period Membership Effective Interval
/// </summary> /// </summary>
[ColumnDataType("daterange", "dateStart", "dateEnd")]]
public DateTime DateStart { get; set; } = ("2024-09-01 00:00:00");
/// <summary>.
/// Membership period Membership interval
/// </summary> /// </summary>
[ColumnDataType("hidden")]]
public DateTime DateEnd { get; set; } = ("2024-10-01 00:00:00");
}
Look at the above is the test table Dto's attribute is written, due to the configuration of ColumnDataType attribute has more than one parameter, in order to prevent writing errors, you can also customize, and then inherited from the ColumnDataType on the line, such as my
/// <summary>
///
/// </summary>
public class PasteMarkAttribute : ColumnDataTypeAttribute
{
/// <summary>
/// Bookmark Properties
/// </summary>
/// <param name="_model">Bookmarks module,typical exampleproduct</param>
/// <param name="_value">bookmarks,typical examplecode</param>
public PasteMarkAttribute(string _model, string _value)
{
= "mark";
base.Args1 = _model;
base.Args2 = _value;
}
}
/// <summary>
/// Date range
/// </summary>
public class PasteDaterangeAttribute : ColumnDataTypeAttribute
{
/// <summary>
/// Date range
/// </summary>
/// <param name="_sdate">Start date field</param>
/// <param name="_edate">End Date Field</param>
public PasteDaterangeAttribute(string _sdate="sdate",string _edate="edate")
{
= "daterange";
base.Args1 = _sdate;
base.Args2 = _edate;
}
}
/// <summary>
///
/// </summary>
public class PasteLeftAttribute : ColumnDataTypeAttribute
{
/// <summary>
///
/// </summary>
public PasteLeftAttribute()
{
= "class";
base.Args1 = "fleft";
}
}
/// <summary>
///
/// </summary>
public class PasteSwitchAttribute : ColumnDataTypeAttribute
{
/// <summary>
///
/// </summary>
public PasteSwitchAttribute()
{
= "switch";
}
}
/// <summary>
/// samehidden expressed inUIHide this object in the
/// </summary>
public class PasteHiddenAttribute : ColumnDataTypeAttribute
{
/// <summary>
///
/// </summary>
public PasteHiddenAttribute()
{
= "hidden";
}
}
/// <summary>
/// Configuration menu or condition menu
/// </summary>
public class PasteMenuAttribute : ColumnDataTypeAttribute
{
/// <summary>
///
/// </summary>
/// <param name="_name"></param>
/// <param name="_script"></param>
/// <param name="_iconfont"></param>
/// <param name="_box"></param>
public PasteMenuAttribute(string _name, string _script, string _iconfont = "", bool _box = false)
{
= "menu";
base.Args1 = _name;
base.Args2 = _script;
base.Args3 = _iconfont;
if (_box)
{
base.Args4 = "box";
}
}
}
/// <summary>
/// Configuration menu or condition menu
/// </summary>
public class PasteIfMenuAttribute : ColumnDataTypeAttribute
{
//[ColumnDataType("ifmenu", "", "<a href=\"javascript:;\" title=\"If the previous creation failed，After modifying the information，Can be reset，Can be recreated after a reset\" onclick=\"global_store_reset_state({{:=}});\"><i class=\"Hui-iconfont Hui-iconfont-xiangpicha\">reset state</i></a>", "", "")]
/// <summary>
/// Conditional Buttons
/// </summary>
/// <param name="_expresion"></param>
/// <param name="_insertHtml"></param>
/// <param name="_box">Is it in the button box</param>
public PasteIfMenuAttribute(string _expresion, string _insertHtml, bool _box = false)
{
= "ifmenu";
base.Args1 = _expresion;
base.Args2 = _insertHtml;
//base.Args3 = _iconfont;
if (_box)
{
base.Args3 = "box";
}
}
}
/// <summary>
/// Used in tables，An expression that displays one of the values of another field
/// </summary>
public class PasteOuterDisplayAttribute : ColumnDataTypeAttribute
{
/// <summary>
/// Used in a form to display a field
/// </summary>
/// <param name="_expression">typical exampleextendService?.name || ''</param>
public PasteOuterDisplayAttribute(string _expression)
{
= "outerdisplay";
//base.Args1 = _cloumnName;
base.Args2 = _expression;
}
}
/// <summary>
///
/// </summary>
public class PasteDisableAttribute : ColumnDataTypeAttribute
{
/// <summary>
///
/// </summary>
/// <param name="_unadd">Disable additions</param>
/// <param name="_unedit">Disable Editing</param>
/// <param name="_undel">Disable Delete</param>
public PasteDisableAttribute(bool _unadd = false, bool _unedit = false, bool _undel = false)
{
= "disable";
if (_unadd)
{
base.Args1 = "add";
}
if (_unedit)
{
base.Args2 = "edit";
}
if (_undel)
{
base.Args3 = "del";
}
}
}
/// <summary>
/// Unit Properties as an additive unit of measure
/// </summary>
public class PasteUnitAttribute : ColumnDataTypeAttribute
{
/// <summary>
/// Unitparticular property
/// </summary>
/// <param name="_unit">typical example元</param>
public PasteUnitAttribute(string _unit)
{
= "unit";
base.Args1 = _unit;
}
}
/// <summary>
/// Selectparticular property
/// </summary>
public class PasteSelectAttribute : ColumnDataTypeAttribute
{
/// <summary>
/// Selectparticular property
/// </summary>
/// <param name="_selectvalues">typical example[{name,value,selected}]</param>
public PasteSelectAttribute(string _selectvalues)
{
= "select";
base.Args1 = _selectvalues;
}
}
/// <summary>
/// Selectsparticular property You can choose more than one.
/// </summary>
public class PasteSelectsAttribute : ColumnDataTypeAttribute
{
/// <summary>
/// Selectsparticular property
/// </summary>
/// <param name="_selectvalues">typical example[{name,value,selected}]</param>
public PasteSelectsAttribute(string _selectvalues)
{
= "selects";
base.Args1 = _selectvalues;
}
}
/// <summary>
/// Imageparticular property
/// </summary>
public class PasteImageAttribute : ColumnDataTypeAttribute
{
/// <summary>
/// Imageparticular property
/// </summary>
/// <param name="_num">How many copies can you send?</param>
/// <param name="_path">Path to storage</param>
/// <param name="_size">Size of conversion,typical example60*60,1920*0</param>
public PasteImageAttribute(int _num = 1, string _path = "", string _size = "")
{
= "image";
base.Args1 = _num.ToString();
base.Args2 = _path;
base.Args3 = _size;
}
}
/// <summary>
///
/// </summary>
public class PasteOuterAttribute : ColumnDataTypeAttribute
{
/// <summary>
/// For linking exterior display and input
/// </summary>
/// <param name="className">Appearance Name，typical exampleserviceInfo</param>
/// <param name="extendName">Expression at the time of display，typical example || ''</param>
/// <param name="_keyColumn">The name of the column to return，typical exampleid</param>
/// <param name="_showColumn">Name of the displayed list，typical examplename</param>
public PasteOuterAttribute(string className, string extendName = "", string _keyColumn = "id", string _showColumn = "name")
{
= "outer";
base.Args1 = className;
base.Args2 = extendName;
base.Args3 = _keyColumn;
base.Args4 = _showColumn;
}
}
The cases are there, so what is each name for?
ColumnDataTypeAttribute
Configuration instructions for ColumnDataType
image
As opposed to the head, which follows, this is the big picture mode, which in ListDto means that it is rendered using the picture mode.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | digital (electronics etc) | 1 | Number of pictures |
| args2 | character | cate | Where to store the image, attached to the parameter type when uploading the image |
| args3 | character | 60*60 | Whether the picture needs to be compressed, compressed width and height, not compressed set to 0, such as 60 * 0 |
| args4 | character | small | small,normal,big means the size of the image, default is normal, if you want to return the format, it will be decided by dataFrom. |
head Deprecate, use image
Used in the same way as image, this represents the small icon mode.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | digital (electronics etc) | 1 | Number of pictures |
| args2 | character | cate | Where to store the image, attached to the parameter type when uploading the image |
| args3 | character | 60*60 | Whether the picture needs to be compressed, compressed width and height, not compressed set to 0, such as 60 * 0 |
| args4 | character | arr or str | The default value str corresponds to the type of the field, whether it is an array type or a string type, if it is a string type, use , to separate multiple fields. |
file
In fact, you can use the image interface, the return format of the two of them are the same, wangEditor's return format, mainly on the UI is not the same, after all, the file can not be previewed!
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | /api/app/Upload/UpImage | denotes the path of the upload, the default is /api/app/Upload/UpFile, you can also change it yourself. |
region
Area selection in the applet allows you to configure the precision, to the district or to the county
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | region | Indicates the level of address selection, optionally region and sub-district. |
| args2 | character | str | The value str or arr can be used to indicate the type of data to be returned, separated by, for str. |
outer
Indicates that a value needs to be retrieved from an appearance, how is it displayed when editing? For example, fatherId,extendRole
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | cateInfo | The name of the exterior, which corresponds to the path of the template, or the path, which must be accompanied by the / character Example. / |
| args2 | character | extendCates | Indicates the data displayed, needs to work with the following 2, is a current extension, the target array to be configured hidden |
| args3 | character | id | Get the attribute of the returned object, usually id |
| args4 | character | name | The friendly name display of id, here refers to the appearance, such as cateId, you need to open the catelist page, select, and then return to the cate, then the name as a friendly display, id as the actual value |
outers
Plural version of outer, indicating that you can select more than one from an external list, e.g. if you bind multiple roles to an account when creating it, use this!
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | cateInfo | The name of the exterior, which corresponds to the path of the template, or the path, which must be accompanied by the / character Example. / |
| args2 | character | extendCates | Indicates that the data displayed, need to work with the following 2, is an array, the target array to be configured hidden |
| args3 | character | id | Get the attribute of the returned object, usually id |
| args4 | character | name | The friendly name display of id, here refers to the appearance, such as cateId, you need to open the catelist page, select it, and then return to the cate, then the name as a friendly display, id as the actual value |
outerdisplay
ListDto for the appearance of the display, for example, there are fields cateInfoId, the corresponding ExtendCateInfo to be marked as outerdisplay, args2 configuration for extendCateInfo?.name || '', otherwise it will be displayed as [object object].
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | cateInfoId | Indicates the value of this field, which is generally not displayed |
| args2 | character | extendCateInfo?.name || '' | Indicates the name of the display, friendly name, need back-end support, in the front-end will be processed into .display |
navigator
means that this value needs to be retrieved from another list using the page, in this case, the applet side, it is recommended to use outer outerdisplay
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | || '' | Indicates that the display or empty this is generally used in ListDto |
| args2 | character | cateInfo | The name of the exterior, corresponding to the path of the template, which can be empty. |
| args3 | character | /pages/cate/index/?model=select | If the corresponding table does not use a template, the path is represented directly |
datetime
Default format of yyyy-MM-dd HH:mm:ss
| (numeric, data) field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | yyyy-MM-dd HH:mm:ss | Format used to indicate time |
hidden
indicates that this field is hidden, generally the primary key ID, or the appearance of the link over will be this configuration, such as the need to add a sub-item to the cate, then add the cate side by the over
This also applies to ListDto
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | bind | If not filled in means hidden, if filled in means that the query of the page in the model = xxx time is not hidden, that is not xxx time is hidden, xxx time is not hidden. |
password
Passcode box mode
query
If you get the data from the query, the corresponding field is hidden, do not configure hidden, because the query is to read the data from the form, hidden is not written to the form, so the query will not be able to get the value from the query!
| field | typology | typical example | show |
|---|---|---|---|
| args1 | character | cateid | Indicates which parameter in the url is used to read the value |
readyonly
Indicates that the field is read-only and generally takes effect when edited
richtext
If it is a string and maxlength is not set, it will be changed to richtext by default, or you can manually force it to be configured
textarea
If it is a string, set maxlength, and set a value greater than 128, it will change to textarea by default, or you can manually force it to be configured
text
For some length is too long, will be determined as textarea, or richtext can use this to force line breaks into text
fentoyuan
This refers to the background unit for the points, and the need for front-end meta-entry, note that the number of decimal places for 2 decimal places, that is, the format of the points for the int
select
Indicates a single choice, such as the type of permission, generally refers to the fixed type, generally do not modify the kind of situation, but also can indicate the state, etc.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | [{"name": "large", "value": "1"},{"name": "small", "value": "2"}] | Indicates a radio optional value, name is the display value is the value |
| args2 | character | Indicates a worthwhile type, in this case a single one, following the primary type |
selects
Indicates multiple choices, this indicates multiple choices on the page, need to list the display, and then it is possible to select multiple choices! The key is to read the data at the end, you need to determine what format!
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | [{"name": "large", "value": "1"},{"name": "small", "value": "2"}] | Indicates the optional value of the radio, name is the display value is the value |
| args2 | character | , | If the value type is not an array, then return a string with this character splice, that is, split characters |
sort
indicates the sorting, indicates the order of the fields, the general form will be used more this
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | digital (electronics etc) | 0 | Smaller ones come first and default to 0 |
link
This is used for tabular display, which generally means that it is used to display the data on the exterior, this will be deprecated and replaced with outerdisplay.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | the display of the appearance of the link, the example extendCate?.name || '' indicates that the display or empty this is generally used in the ListDto |
width
indicates the width of this field in the form, can be * or the corresponding number, is the form of the width of the weight of the columns, this applies to ListDto
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | 60 | Indicates the width of the column, which can be either a number or * such as 3*. |
orderby
indicates that based on which field to sort, this is generally ListDto indicates that the form, based on which field can be sorted query
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | id | Indicates that the ids are sorted in positive order |
| args2 | character | id desc | Indicates the use of flashback sorting |
datalist
The front-end indicates that the datalist is used as the selected data source, and the front-end needs to assign the id of the datalist to the datalistid, which defaults to the field name, and this rule applies to both the form and QueryDto.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | [{"name": "normal", "value": "1", "selected":true}] | JSON string, can also be empty |
| args2 | character | data_pro | Indicates which datalist data is called, the id of the datalist, and args1 are mutually exclusive. |
| args3 | character | read_pro_datalist() | Indicates which function needs to be executed using eval, generally used in conjunction with args2 and mutually exclusive with args1. |
daterange
The main field needs to be set to daterange, other fields need to be set hidden, in the final combination of data, will be generated based on the parameters of the corresponding, should be set to null format
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | sdate | Indicates the start time, and at the end will transmit the format data of yyyy-MM-dd 00:00:00 |
| args2 | character | edate | Indicates the end time, if you choose 2024-08-31, the last upload will be 2024-08-31 00:00:00 |
| args3 | character | yyyy-MM-dd 00:00:00 | Indicates the formatting of the time, using yyyyy-MM-dd 00:00:00 by default. |
disable
Special qualification, limited to the class, indicates which functions of the model are disabled, this is usually used in ListDto, because these functions are in the list page.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | add | Indicates that add is ignored, i.e. the add button is not displayed |
| args2 | character | edit | means ignore edit, that is, the list does not have the option to edit, some data can only see, do not need to add and edit |
| args3 | character | del | Indicates that the table is not deleted and the delete button is not needed in the page UI |
menu
Used for menus behind lists For example <a href="javascript:;" onclick="args2"><i class="Hui-iconfont args3">\args1
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | compiler | Name of the button |
| args2 | character | open_view(<%:=%>); | Code for the onclick event |
| args3 | character | Hui-iconfont-menu | Style Name |
| args4 | character | box | The default is not written, if you write box, it means you want to square into the menubox. |
ifmenu
Conditional mode based menu, used in Listdto
Example: [ColumnDataType("ifmenu", "==8", "<a href="javascript:;" onclick="open_window(222,./?path=userInfo&goid={{:=}})"> condition 2", "box")]
The data object is the item that represents the current row of data.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | isReady == true | The content within () in an expression of if |
| args2 | character | <a hreaf="javascript:;" onclick="open({{:=id}})"> | Here fill in the menu code after the condition, note that the reference needs to use { |
| args3 | character | box | The default is not written, if you write box, it means you want to square into the menubox. |
htmltemplate
has been discarded, use the html below instead, if you want to display a customized form, then use this, that is, directly display the information template Note that the inside with reference to the use of {{:=}} in this form
| (numeric, data) field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character |
{{:=}}{{:=}}
|
html code that needs to be displayed in td to support template writing |
html
If you want to display a customized form, use this one, which means to display the information template directly Note the use of {{:=}} for the band references inside.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character |
{{:=}}{{:=}}
|
html code that needs to be displayed in td to support template writing |
linkquery
It means that some parameters will be passed through to the sub-pages, for example, service->file, then you can view the file list page B when you are in the service page A, and you can directly add the file page C in the file list, and at this time, we would like to have the corresponding service ID passed directly from the parameters.
That is, when you open C, you want to pass the parameters of B to C. Note that this linkquery is placed on the Class in ListDto, which is the same as disable.
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | Parameters to be passed | Separate multiple ones with ,, e.g. serviceid,ftype |
object
Apply to the form page, that is, from another form to add new data, such as the user's shipping address, in the form, open a new form, fill in the information, and then return an obj, this time it is not written to the database, so in the return of the time need to display the
Kind of like outer, but returns an object type! If it's edited? Do you need to upload it to the API to indicate that it's edited? When you open the form, you pass the model=object parameter, which tells the subform not to do API entry.
Note that this sub-model is also required to build the corresponding API, although it is not necessary to build the add and edit interfaces, as they are covered by the higher level!
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | roleInfo | Usually path is used, but you can also use the path of the page. |
| args2 | character | id | Useless when adding, mainly when editing, go to the database to query the new data based on this id and path |
| args3 | character | name | Indicates which field of the object is displayed, usually visible during editing. |
objects
The plural version of object, represents a collection, for example, a member has more than one hobby, when adding new, open the subform, fill in more than one hobby object information body to return, in the display, if a field is not enough to display? Does it support multiple fields linkage display?
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | roleInfo | Usually path is used as well as the path of the page. |
| args2 | character | id | Invalid when adding, indicates querying information from the database when editing, also used as the key for deleting. |
| args3 | character | name | Indicates which field of the object is displayed, usually visible during editing. |
mark
Detailed description of the field, or documentation, here is to do a tracing point, the need to use the public function to achieve their own specific requirements, the general is the project below the module of a field description, a project is often this is the same, and then it is which module of which field, so there are 2 fields
It will generate a span class="tapmark" onclick="global_tap_mark(_modek,_code)" after the title;
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | product | Generally used as a module, such as this one for commodities |
| args2 | character | code | Description of a field under a module, e.g., usage of the code field, case description, etc. |
template
as some of the table's special layout, is to customize the layout of the table part of the content, including the table header and the table body of the two parts, pay attention to the need to achieve the function of selecting, unless the table can not be used to select this function
The file is stored in pasteform/, and there is only one page, which contains all the template code
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | template_user_head | The id of the script in the header section of the table. |
| args2 | character | template_user_body | The id of the template's script in the table's body section. |
style
For some special settings, such as textarea, there are some places we want to set higher
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | height:500px; | It's what's in the style. |
class
For some custom classes, you can configure them with this
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | btngo | Indicates the class to be added to this object |
button
Used in the form, the button, the intention is to allow the user to click on the trigger function, global_form_button_click(this, className, name).
Note that the value of the button is the value of the current field, e.g. path=nginxRoute for the current page
/// <summary>
/// Http template Indicates the content of a template that uses the Http schema.
/// </summary> /// Http template
[ColumnDataType("button")]
public string Temp1 { get; set; } = "Click to Import";
Then the content of the page that will be generated above will be
Http template: click to import
Clicking on the import click calls global_form_button_click(this,'nginxRoute','temp1');
Note that since the first order returned will be lowercase, it is temp1 and not Temp1
unit
Used to display units, such as MB, KG, etc., generally in the Int Long Double and other places after the display of Number, but also as a table in the display?
| field | typology | typical example | clarification |
|---|---|---|---|
| args1 | character | MB | Indicates the unit of this object |
awaiting processing
1. list of editable objects such as switch?
handler_switch_change(elc){
// className columnName id state
}
2. When selecting appearance, does it support multi-select mode?
When in multi-select mode, how do I load the already selected ones and how do I delete the already selected ones? Is it possible to have a selected area?
3.Int32[] Int64[] String[]
Display and final update of such data
4. Form data before the submission of the data format verification!
How to set up
Single becomes multiple!
6. Some data do not need to add, and edit , although you can use the API control, but in the front-end there is such a button exists, is also very abrupt, so have to deal with!
7. Administrators have multiple roles, this multiple role display and editing problems!
selects can be set to return multiple
The list sets the way it is displayed The key is how to not overwrite it each time it is edited! Or should I write an interface for individual deletions?
Problems with the display of types? It's actually enmu mutating to attribute select!!!!
9. From the role binding permissions, role list, click on the permissions (to bind permissions to the role), open the list of permissions is all, need to bind the check, do not want to uncheck the box
model=bind has some fields that are only displayed in this mode.
hidden.args1 indicates a pattern, if it is empty, it means all are hidden.
Issues to be identified
1. Required, if it is the type of int, is it only non-zero, or not effective?
2. For menu support, the parameter should be controlled by {{}}, not <%%>.
For the return of a type, is it the return value, or the corresponding name? Is enum to select supported?
4. Sometimes the form is just to add a new data, not into the library kind of! outform model=outform Returns a combination of ... To be determined
5. For example, to view a particular list - sub-list - sub add
linkquery cateid,abcid
6. unit conversion, for example, the background is points, the front-end needs to be entered into the dollar Then it is at the time of input is dollars, display is dollars Submitted when it is points!!!!
fentoyuan cents to dollars Default 2 decimal places
7. on whether you need to show the details of the page, because sometimes the table data is not displayed in full, such as richtext, this time may require a page
If you want to render, you need to correspond to the properties of the model Dto, the generator is removed by default, you need to add /template/ as a generator model in the Domain to replace the generator's default model!
The page is rendered on and form type, just render the input boxes etc as direct display!
Then from ListDto, add support for menu detail!
8. In the list page, if an object is marked as a query, and if the value is retrieved from the parameter, the query is hidden.
9. If the current state of the list page is mod, the search area above will be hidden by default.
10. about the introduction of field description of things, such as a form 100 fields, each field means what, the general practice is to click the corresponding? and then pop-up or jump to a site to show the introduction of the
That's where mark comes in.
11. Whether to join the self-modeling, that is, the style of table data display, whether to introduce customized templates?
The default is to use the built-in secondary template, if you are referencing an externalization, you need the whole thing, that is, both the header and the body of the table!
You need to externally write an html template page and load it in using Jquery's load!
In ListDto, use template for labeling, labeling args1 as the template for the table header style args2 as the content of the table body part
12. Add support for custom styles style class
13. Add support for menubox for many buttons
14. form need to be deliberately manipulated, add function support to pass the form data by a custom function to determine the results of the implementation! global_form_action(elc,className,name,);
Project routing Loading templates Template testing, etc!
15. Get a placeholder? Sometimes a placeholder is needed for typography etc.
16. You can get an attribute to inherit from the base attribute, so that it will be better in the input, such as PasteMarkAttribute:ColumnDataTypeAttribute;.
17. Window pop-up size issues, some cases need to be large some cases small some cases to be dynamic!
18. The problem of the select of the query and the select of the table conflict!!!!
19. Forms in different modes, the display of different fields of the problem!
Space is limited, the next chapter on how to receive the back-end API to write, and then how to use the code generator to implement this CRUD
If you have questions, feel free to ask them in the comments section and I'll answer them all!