zoukankan      html  css  js  c++  java
  • 动态构建视图表单

    动态构建视图表单,可以让我们更快的开发标准化的界面,在界面上节省更多的时间,从而我们有更多的时间去开发更好的服务,具体操作如下:

    第一步:定义ViewModel (可以是实体,也可以自行定义ViewModel)

      /// <summary>
        /// 链接
        /// </summary>
        public class Link: BaseViewModel, IWidget
        {
            /// <summary>
            /// 链接名称
            /// </summary>
            [Display(Name="链接名称")]
            [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.TextBox)]
            [Required]
            [StringLength(20,ErrorMessage ="链接名称不能操作20个字符")]
            public string Name { get; set; }
            /// <summary>
            /// 链接URL
            /// </summary>
            [Display(Name = "URL")]
            [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.TextBox)]
            public string Url { get; set; }
            /// <summary>
            /// 图标
            /// </summary>
            [Display(Name = "图标")]
            [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.TextBox)]
            public string Icon { get; set; }
            /// <summary>
            /// 打开方式
            /// </summary>
            [Display(Name = "打开方式")]
            [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.DropdownList, DataSource = "ZKCloud.Core.Theme.Domain.Enums.Target")]
            public Target Target { get; set; }
            /// <summary>
            /// 链接字体颜色
            /// </summary>
            [Display(Name = "颜色")]
            [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.TextBox)]
            public string Color { get; set; }
            /// <summary>
            /// 链接标题
            /// </summary>
            [Display(Name = "链接标题")]
            [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.TextBox)]
            public string Title { get; set; }
            /// <summary>
            /// 排序
            /// </summary>
            [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.TextBox)]
            [Display(Name = "排序")]
            public long SortOrder { get; set; }
    
            /// <summary>
            /// 是否显示
            /// </summary>
            [Field(ListShow = true, ControlsType = ControlsType.Switch)]
            [Display(Name = "是否显示")]
            public bool IsShow { get; set; } = true;
        }
    View Code

    第二步:在控制器中传递ViewModel

    /// <summary>
            /// 添加和管理链接
            /// </summary>
            /// <param name="type"></param>
            /// <returns></returns>
            public IActionResult AddLink(string type)
            {
                Link link = new Link();
                return View(link);
            }
    View Code

    第三步:创建视图

      @await Html.AdminWidget("Core", "Common/AdminAutoConfig_Control")

    页面效果

    多标签的

  • 相关阅读:
    小白自动化测试指南
    分布式性能测试框架用例方案设想(二)
    高QPS下的固定QPS模型
    测试自动化最佳实践【译】
    moco框架接口命中率统计实践
    基于docker的分布式性能测试框架功能验证(一)
    编写高质量代码:Web前端开发修炼之道(一)
    JavaScript中点操作符和中括号操作符区别
    Vue脚手架生成及配置
    Npm设置淘宝镜像
  • 原文地址:https://www.cnblogs.com/zkcloud/p/5602503.html
Copyright © 2011-2022 走看看