貼程式碼框架PasteForm特性介紹之markdown和richtext

PasteSpider發表於2024-11-17
框架ASTORM

簡介

PasteForm是貼程式碼推出的 “新一代CRUD” ，基於ABPvNext，目的是透過對Dto的特性的標註，從而實現管理端的統一UI，藉助於配套的PasteBuilder程式碼生成器，你可以快速的為自己的專案構建後臺管理端！目前管理端只有Html+js版本的，後續將支援小程式，Vue等

案例原始碼

案例原始碼在

https://gitee.com/pastecode/paste-template

不定期升級

AllInDto!

透過引入PasteForm，一個專案哪怕100個資料表，一般的管理頁面也才不到10個，除非有非常多的特殊功能，否則都能用PasteForm中的表格和表單來實現！

image

MarkDown

在開發管理端過程中，有時候也需要使用用到Markdown，之前已經接入了Richtext,本次升級也一併把這個帶進去了！
首先你需要從案例專案的PasteTemplate的前端模組
PasteTemplate.HttpApi.Host/wwwroot/page/lib/editor.md/
注意這個裡面就是Markdown用到的元件，用的是三方的！

特性資訊

如果是字串，沒有設定maxlength，預設就會變更成richtext，也可以手動強制配置,當前特性適用於richtext和markdown

欄位 型別 示例 說明
args1 字元 500 配置高度,預設為500
args2 字元 txt 表示另外一個值儲存在哪個欄位，所以另外一個欄位一般設定隱藏
args3 字元 /api/app/Upload/Image 圖片上傳的地址

以上資訊同樣適用於richtext

案例UI

image

以上是我用雙屏截圖的，其實是一個完整的頁面，注意看頁面的表單中包含了text,textarea,richtext,markdown
那麼他對應的dto是如何寫的？

Dto對應程式碼

    /// <summary>
    /// 
    /// </summary>
    public class StringDto
    {
        ///<summary>
        ///姓名 模擬短文字輸入
        ///</summary>
        [MaxLength(32)]
        [Required]
        public string Name { get; set; }

        ///<summary>
        ///文字區域 模擬文字區域的輸入
        ///</summary>
        [MaxLength(128)]
        public string Desc { get; set; }

        ///<summary>
        ///文字區域 長度大於128則自動為textarea
        ///</summary>
        [MaxLength(256)]
        public string Text { get; set; }

        /////<summary>
        /////文字區域 可以手動指定為textarea,同理你也可以指定為html,text
        /////</summary>
        //[MaxLength(128)]
        //[ColumnDataType("textarea")]
        //public string Mark { get; set; }

        ///<summary>
        ///富文字 模擬富文字，前端HTML的是使用wangEditv5,預設不配置maxlength的就是html
        ///</summary>
        public string Blog { get; set; }

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

        ///<summary>
        ///MarkDown2 有預設值的
        ///</summary>
        [ColumnDataType("markdown")]
        public string Mark2 { get; set; } = "## 今日成果";

    }

由上面程式碼可知，只要在對應的欄位上配置
[ColumnDataType("markdown")]即可
或者你也可以配置特性為[PasteMarkDown]
他們兩個是等效的，可以說ColumnDataTypeAttribute是所有貼程式碼框架特性的基礎屬性
像PasteClass,PasteHidden,PasteButton等最終都是為了轉化成ColumnDataTypeAttribute

提交資訊

上面的UI中，我們是隨便填寫點東西后，提交，看到的提交資訊如下

image

暫時先忽略mark2mdeditor-html-code和mark2mdeditor-markdown-doc欄位，這個是markdown框架裡面帶了name被parseform來了，後續再考慮去掉他！
從上面的提交可以看到mark2是有內容的！

符合預期！

注意

由於markdown和richtext的特殊性，關於欄位長度的設定需要按照實際來填寫！
看特性資訊args2，這個欄位如何配置了，則需要對這個欄位的特性標註為hidden
這樣在UI上args2的欄位是不顯示的，而提交資料給後臺，則可以接收到！

我們下期將介紹select和reload的巧妙結合案例... .. .

相關文章