Location>code7788 >text

Paste code framework PasteForm features introduction of markdown and richtext

Popularity:586 ℃/2024-11-17 14:56:26

synopsis

PasteForm is the "new generation of CRUD" launched by PasteCode , based on ABPvNext, the purpose is to achieve a unified UI for the management side by annotating the characteristics of Dto, with the help of the supporting PasteBuilder code generator, you can quickly build the back-end of the project for your own! admin side! At present, the management side is only Html+js version, and will support small programs, Vue and so on.

case source code

The case source code is at

/pastecode/paste-template

Unscheduled upgrades

AllInDto!

By introducing PasteForm, a project with even 100 datasheets and less than 10 general administration pages, unless there are a very large number of special features, can be realized using tables and forms in PasteForm!

image

MarkDown

In the development of the management process, sometimes also need to use Markdown, before the access has been Richtext, this upgrade also bring this in!
First you need the front-end module of PasteTemplate from the case project
/wwwroot/page/lib//
Note that inside this is the component used by Markdown, which uses a three-way!

Characteristic information

If it is a string, without setting maxlength, it will be changed to richtext by default, you can also manually force the configuration, the current feature applies to richtext and markdown.

field typology typical example clarification
args1 character 500 Configure the height, default is 500
args2 character txt Indicates which field the other value is stored in, so the other field is usually set to be hidden.
args3 character /api/app/Upload/Image Address for image upload

The above information also applies to richtext

Case UI

image

The above is a screenshot of my use of dual-screen, in fact, is a complete page, note that the page form contains a text,textarea,richtext,markdown
So how is his corresponding dto written?

Dto corresponding code

    /// <summary>
    ///
    /// </summary> ///
    public class StringDto
    {
        /// <summary> /// </summary>
        /// /// Name Simulates short text input
        /// </summary>
        [MaxLength(32)]
        [Required]
        public string Name { get; set; }

        ///</summary> [MaxLength(32)] [Required] public string Name { get; set; }
        //// Textarea Simulates the input of a textarea.
        ///</summary> ///</summary> ///</summary>
        [MaxLength(128)]
        public string Desc { get; set; }

        ////<summary>
        //// Textarea Length greater than 128 is automatically a textarea.
        ///</summary>; /// Textarea.
        [MaxLength(256)]
        public string Text { get; set; }

        /////<summary>
        ///// textarea can be specified manually as textarea, similarly you can specify it as html,text.
        /////</summary> //[MaxLength(128)].
        //[MaxLength(128)]
        //[ColumnDataType("textarea")]]
        //public string Mark { get; set; }

        ///<summary>.
        //// Rich text Simulate rich text, front-end HTML is using wangEditv5, the default is not configure maxlength is html
        ///</summary>
        public string Blog { get; set; }

        /////</summary>; public string Blog { get; set; }
        /////MarkDown1
        /////</summary>
        //[ColumnDataType("markdown")]
        //public string Mark1 { get; set; }

        ///<summary>
        ///MarkDown2 has a default value of
        ///</summary> ///MarkDown2 has a default value.
        [ColumnDataType("markdown")]]
        public string Mark2 { get; set; } = "## Today's Results";

    }

As you can see from the code above, just configure the corresponding field on the
[ColumnDataType("markdown")] will do.
Or you can configure the feature to [PasteMarkDown]
The two of them are equivalent, and it can be said that the ColumnDataTypeAttribute is the base attribute for all of the posting code framework features
PasteClass, PasteHidden, PasteButton, etc. are all ultimately converted to ColumnDataTypeAttribute.

Submit information

In the UI above, we are filling in something random and submitting it, and we see the following commit message

image

Ignore mark2mdeditor-html-code and mark2mdeditor-markdown-doc fields for the time being, this is the markdown framework inside the name was parseform to come, and then consider removing him!
As you can see from the commit above mark2 has content!

In line with expectations!

take note of

Due to the specificity of markdown and richtext, the settings about the field length need to be filled in according to the actual!
Look at the characteristics of the information args2, how this field has been configured, then you need to mark the characteristics of this field as hidden
This way the fields of args2 are not displayed on the UI, while submitting the data to the backend, it can be received!

Our next installment will present a case study of the clever combination of select and reload... ... .