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

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

   /// <summary>
    /// 链接
    /// </summary>
    public class Link: BaseViewModel, IWidget
    {
        /// <summary>
        /// 链接名称
        /// </summary>
        [Display(Name="链接名称")]
        [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.TextBox)]
        [Required(ErrorMessage = "链接名称不能为空")]
        [StringLength(20,ErrorMessage ="链接名称不能操作20个字符")]
        public string Name { get; set; }
        /// <summary>
        /// 链接URL
        /// </summary>
        [Display(Name = "URL")]
        [Field(ListShow = true, EditShow = true, ControlsType = ControlsType.TextBox)]
        [Required(ErrorMessage ="链接不能为空")]
        public string Url { get; set; }
        /// <summary>
        /// 图标
        /// </summary>
        [Display(Name = "图标")]
        [Field(ListShow = false, 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 = false, EditShow = true, ControlsType = ControlsType.Color)]
        public string Color { get; set; } = "#666666";
        /// <summary>
        /// 链接标题
        /// </summary>
        [Display(Name = "链接标题")]
        [Field(ListShow = false, 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; } = 1000;

        /// <summary>
        /// 是否显示
        /// </summary>
        [Field(ListShow = true, ControlsType = ControlsType.Switch)]
        [Display(Name = "是否显示")]
        public bool IsShow { get; set; } = true;

        /// <summary>
        /// 编辑和显示用
        /// </summary>
        [Field(EditShow = false)]
        public Guid Guid { get; set; } = Guid.NewGuid();
    }

 

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

 

 [HttpGet]
 public IActionResult AddLink(Guid configGuid,string Id=null) {
     Link link = Resolve<ILinkService>().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定义弹出窗口

 

<a dialog-url="/admin/diy/AddLink?type=userLeftnav" dialog-title="文章添加" dailog-size="size-fullscreen">
    <i class="fa fa-plus-square "></i>文章添加
</a>

 

 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";

}

<div class="portlet">
    <div class="portlet-body">
        <form method="post" class="form-horizontal form-row-seperated" asp-controller="AdminWidget" asp-action="AddLink">
            <div class="form-body">
                <div class="form-group-error">
                    <div class="col-md-offset-2 col-md-10">
                        <div asp-validation-summary="All" class="text-danger"></div>
                    </div>
                </div>
                @Html.Hidden("type", ViewData["Type"])
                @await Html.AdminWidget("Core", "Common/AdminAutoConfig_Control")

                <div class="form-group">
                    <label class="control-label col-md-2"> </label>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-transparent green active">保存</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>