快速构建编辑类型弹出窗口-白红宇

快速构建编辑类型弹出窗口

阅读量：4522 次

发布时间：2019-06-08

本文共 3417 字，大约阅读时间需要 11 分钟。

第一步：定义实体类，或者定义ViewModel（需要继承BaseViewModel）,示范代码如下：

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

View Code

第二步：在控制器中指定视图： ~/Admin/Core/Common/Dialog.cshtml 需要给 ViewData["type"]

[HttpGet] public IActionResult AddLink(Guid configGuid,string Id=null) {     Link link = Resolve
     
      ().GetSingle(configGuid,Id.ToGuid());     if (link == null) {         link = new Link();     }     ViewData["action"] = $@"/Admin/DIY/AddLink?configGuid={configGuid}&Id={Id}";     return View("~/Admin/Core/Common/Dialog.cshtml",link); }

ViewData["action"] 表示表单处理控制器，必须要定义 return View("~/Admin/Core/Common/Dialog.cshtml",link); 指定视图

第三步：在视图中使用dialog-url Taghelper定义弹出窗口

    文章添加

dialog-url:指定访问的url  dialog-title:对话框标题  dailog-size：窗口大小（size-fullscreen,wide,nomal） 查看效果图

应用范围： 　　批量修改、添加收货地址、管理员修改价格、列表页数据操作 实现原理：

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

~/Admin/Core/Common/Dialog.cshtml 代码

@{    Layout = "~/Admin/Open/_OpenLayout.cshtml";}
          
               
                    
                         
                              
            
            
 
           
                
          
                @Html.Hidden("type", ViewData["Type"])                @await Html.AdminWidget("Core", "Common/AdminAutoConfig_Control")