【代码生成器】拼Html和TS代码的

效果如图：

实体：

    public class DbTableHeadEntity
    {
        public int Id { get; set; }
        public string ColumnName { get; set; }
        public string ColumnType { get; set; }
    }

    public class POEntity
    {
        public int ID { get; set; }

        public string PONo { get; set; }

        public string DeliveryAddress { get; set; }

        public int? CustomerID { get; set; }

        public DateTime? CreateTime { get; set; }

        public string CreateUserName { get; set; }

        public DateTime? UpdateTime { get; set; }
    }

方法：

private void btnBuild_Click(object sender, EventArgs e)
        {
            var data = ReadDbTableHead();

            this.textHtmlCode.Text = GetHtmlCode("PO", data);
            this.textTypeScriptCode.Text = GetTsCode("PO", data);
        }

        private static string GetTsCode(string tableName, List<DbTableHeadEntity> data)
        {
            StringBuilder sb = new StringBuilder();
            sb.AppendLine($"dataSet{tableName} = [];"); 
            sb.AppendLine($"editCache{tableName} = [];"); 
            sb.AppendLine($"nzTotal{tableName} = 0;");
            sb.AppendLine($"{tableName}PageIndex = 1;");
            sb.AppendLine($"{tableName}PageSize = 10;");
            sb.AppendLine($"is{tableName}Loading = false;"); 

            //分页事件
            sb.AppendLine($"PageIndexChange{tableName}(): void");
            sb.AppendLine("{");
            sb.AppendLine("console.log('PageIndexChange');");
            sb.AppendLine("}");

            //开始编辑
            sb.AppendLine($"startEdit{tableName}(Id: number): void");
            sb.AppendLine("{");
            sb.AppendLine($"this.editCache{tableName}[Id].edit = true;");
            sb.AppendLine("}");

            //保存数据
            sb.AppendLine($"saveEdit{tableName}(Id: number): void");
            sb.AppendLine("{");
            sb.AppendLine("console.log(Id + 'saveEdit');");
            sb.AppendLine($"this.editCache{tableName}[Id].edit = false;");
            sb.AppendLine("}");

            //取消编辑
            sb.AppendLine($"cancelEdit{tableName}(Id: number): void");
            sb.AppendLine("{");
            sb.AppendLine($"this.editCache{tableName}[Id].edit = false;");
            sb.AppendLine("}");

            //删除数据
            sb.AppendLine($"delete{tableName}(Id:number): void");
            sb.AppendLine("{");
            sb.AppendLine("console.log(Id + 'delete');");
            sb.AppendLine($"this.{tableName}Service.delete(Id).subscribe(res => ");
            sb.AppendLine("{");

            sb.AppendLine("this.nzMessageService.success('Delete Success！');");
            sb.AppendLine($"this.get{tableName}List(null, null, null, null);");
            sb.AppendLine($"this.editCache{tableName}[Id].edit = false;");
            sb.AppendLine("})");
            sb.AppendLine("}");

            //查询数据事件
            sb.AppendLine($"get{tableName}List(startTime,stopTime,pageSize=10,pageIndex=1) ");
            sb.AppendLine("{");
            sb.AppendLine($"this.is{tableName}Loading = true;");
            sb.AppendLine($"this.{tableName}Service.get{tableName}List(startTime,stopTime,pageSize,pageIndex).subscribe(");
            sb.AppendLine("(res: {}) => {");
            sb.AppendLine($"this.dataSet{tableName} = res['POList'];");
            sb.AppendLine($"this.nzTotal{tableName} = res['ResultListCount'];");
            sb.AppendLine($"this.dataSet{tableName}.forEach(item => ");
            sb.AppendLine("{");
            sb.AppendLine($"this.editCache{tableName}[item.ID] =");
            sb.AppendLine("{");
            sb.AppendLine("edit: false,");
            sb.AppendLine("data: item");
            sb.AppendLine("}");
            sb.AppendLine("});");
            sb.AppendLine($"this.is{tableName}Loading = false;");
            sb.AppendLine("})");
            sb.AppendLine("}");

            //加载时调用方法
            sb.AppendLine("ngOnInit() ");
            sb.AppendLine("{");
            sb.AppendLine($"this.get{tableName}List(null, null, null, null);");
            sb.AppendLine("}");

            return sb.ToString();
        }

        public static string GetHtmlCode(string tableName, List<DbTableHeadEntity> tableHeads)
        {
            StringBuilder sb = new StringBuilder();
            sb.AppendLine($"<nz-card nzTitle='{tableName}' [nzExtra]='addTemplate'>");
            sb.AppendLine($"<nz-table #edit{tableName} nzBordered [nzData]='dataSet{tableName}' nzFrontPagination='false' [nzTotal]='nzTotal{tableName}' nzShowSizeChanger='true' [nzPageIndex]='{tableName}PageIndex' [nzPageSize]='{tableName}PageSize' (nzPageIndexChange)='PageIndexChange{tableName}()' (nzPageSizeChange)='PageIndexChange{tableName}()' [nzLoading]='is{tableName}Loading' [nzShowTotal]='totalTemplate'>");

            //表头
            sb.AppendLine("<thead>");
            sb.AppendLine("<tr>");
            foreach (var item in tableHeads)
            {
                sb.AppendLine("<th>");
                sb.AppendLine($"{item.ColumnName}");
                sb.AppendLine("</th>");
            }
            sb.AppendLine("<th>Action</th>");
            sb.AppendLine("</tr>");
            sb.AppendLine("</thead>");

            sb.AppendLine("<tbody>");

            //数据列
            sb.AppendLine($"<tr *ngFor='let data of edit{tableName}.data'>");
            foreach (var item in tableHeads)
            {
                sb.AppendLine("<td>");
                sb.AppendLine($"<ng-container *ngIf='!editCache{tableName}[data.ID].edit'>");
                sb.AppendLine("{{data." + item.ColumnName + "}}");
                sb.AppendLine("</ng-container>");
                sb.AppendLine($"<ng-container *ngIf='editCache{tableName}[data.ID].edit'>");

                sb.AppendLine(GetTypeInput(tableName, item.ColumnType, item.ColumnName));

                sb.AppendLine("</ng-container>");
                sb.AppendLine("</td>");
            }

            //操作
            sb.AppendLine("<td>");
            sb.AppendLine("<div class='editable-row-operations'>");
            sb.AppendLine($"<ng-container *ngIf='!editCache{tableName}[data.ID].edit'>");
            sb.AppendLine($"<a (click)='startEdit{tableName}(data.ID)'>Edit</a>");
            sb.AppendLine("</ng-container>");
            sb.AppendLine($"<ng-container *ngIf='editCache{tableName}[data.ID].edit'>");
            sb.AppendLine($"<a (click)='saveEdit{tableName}(data.ID)'>Save</a>");
            sb.AppendLine($"<nz-popconfirm [nzTitle]=\"'Sure to cancel?'\" (nzOnConfirm)='cancelEdit{tableName}(data.ID)'>");
            sb.AppendLine("<a nz-popconfirm>Cancel</a>");
            sb.AppendLine("</nz-popconfirm>");
            sb.AppendLine("</ng-container>");
            sb.AppendLine("<nz-divider nzType='vertical'></nz-divider>");
            sb.AppendLine($"<a nz-popconfirm nzTitle='您确定要删除这条数据？' (nzOnConfirm)='delete{tableName}(data.ID)'>Delete</a>");
            sb.AppendLine("</div>");
            sb.AppendLine("</td>");

            sb.AppendLine("</tr>");

            sb.AppendLine("</tbody>");
            sb.AppendLine("</nz-table>");
            sb.AppendLine("</nz-card>");

            //总条数
            sb.AppendLine("<ng-template #totalTemplate>");
            sb.AppendLine("共 {{nzTotal" + tableName + "}} 条");
            sb.AppendLine("</ng-template>");

            //添加数据
            sb.AppendLine("<ng-template #addTemplate>");
            sb.AppendLine("<a (click)='isVisible=(!isVisible)'>Add</a>");
            sb.AppendLine("</ng-template>");

            //添加数据表单
            sb.AppendLine($"<nz-modal [(nzVisible)]='isVisible' nzTitle='Add {tableName} Info' (nzOnCancel)='isVisible=(!isVisible)' nzCancelText='Cencel' nzOkText='Add' (nzOnOk)='handleOk()'>");
            sb.AppendLine("<p>表单数据</p>");
            sb.AppendLine("</nz-modal>");

            return sb.ToString();
        }

        private static string GetTypeInput(string tableName,string columnType, string columnName)
        {
            string result = $"<input type='text' nz-input [(ngModel)]='editCache{tableName}[data.ID].data.{columnName}'>";
            if (columnType.IndexOf("Int") != -1)
            {
                result = $"<input type='number' nz-input [(ngModel)]='editCache{tableName}[data.ID].data.{columnName}'>";
            }
            if (columnType.IndexOf("DateTime") != -1)
            {
                result = $"<nz-date-picker [(ngModel)]='editCache{tableName}[data.ID].data.{columnName}'></nz-date-picker>";
            }
            return result;
        }

        static List<DbTableHeadEntity> ReadDbTableHead()
        {
            List<DbTableHeadEntity> result = new List<DbTableHeadEntity>();

            var model = new POEntity();
            Type t = model.GetType();
            PropertyInfo[] PropertyList = t.GetProperties();
            int Id = 0;
            foreach (PropertyInfo item in PropertyList)
            {
                DbTableHeadEntity dbTableHeadEntity = new DbTableHeadEntity();
                object value = item.GetValue(model, null);
                dbTableHeadEntity.Id = ++Id;
                dbTableHeadEntity.ColumnName = item.Name;
                if (item.PropertyType.IsGenericType && item.PropertyType.GetGenericTypeDefinition() == typeof(Nullable<>))
                {
                    var columnType = item.PropertyType.GetGenericArguments()[0];
                    dbTableHeadEntity.ColumnType = columnType.Name;
                }
                else
                {
                    dbTableHeadEntity.ColumnType = item.PropertyType.Name;
                }
                result.Add(dbTableHeadEntity);
            }
            return result;
        }

        private void btnCopyHtml_Click(object sender, EventArgs e)
        {
            this.textHtmlCode.Focus();
            KeyBoard.CtrlX();
        }

        private void btnCopyTypeScript_Click(object sender, EventArgs e)
        {
            this.textTypeScriptCode.Focus();
            KeyBoard.CtrlX();
        }

可以生成一个table,带增删改查功能的，方法的具体代码没有实现！

前端：Angular，TypeScrip，UI基于阿里的Ng-Zorro