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

第一步:定义实体类,或者定义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(string type, string guid = null) {
         Link link = Resolve<ILinkService>().GetLink(type, guid);
         ViewData["type"] = type;
         Type t = Type.GetType(type);
        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)查看效果图
应用范围:  批量修改、添加收货地址、管理员修改价格、列表页数据操作实现原理:
    @Html.Hidden("type", ViewData["Type"])
    @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>

时间: 2024-11-12 02:38:30

快速构建编辑类型弹出窗口的相关文章

jsp网页弹出窗口的多种办法

http://blog.csdn.net/huangfoxjava/article/details/2973033 登录|注册     huangfoxjava的专栏 目录视图 摘要视图 订阅 关于jsp网页弹出窗口[很多种方法......] 分类: JSP2008-09-24 14:22 5799人阅读 评论(0) 收藏 举报 jspjavascript框架html脚本浏览器 各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript

PyQt5 笔记(03):弹出窗口大全

本文实现了PyQt5个各种弹出窗口:输入框.消息框.文件对话框.颜色对话框.字体对话框.自定义对话框 其中,为了实现自定义对话框的返回值,使用了信号/槽 本文基于 windows 7 + python 3.4 效果图: 取得弹出窗口的返回值 全部代码: from PyQt5.QtWidgets import * from PyQt5.QtCore import Qt, pyqtSignal, QTimer, QThread # 后三个都是用于第二个窗口 class MyWindow(QWidge

(转)弹出窗口lhgDialog API文档

应用到你的项目 如果您使用独立版本的lhgDialog窗口组件,您只需在页面head中引入lhgcore.lhgdialog.min.js文件,4.1.1+版本做了修改可以和jQuerya库同时引用,而且4.1.1+版本的独立组件的lhgcore库做了极大的修改,专门为组件定制,压缩后才6K与组件合在一起总大小才不到20K,效率上得到很大提高,比引用jQuery快很多,但这里要注意如果你同时引用了jQuery库的话必须把$换成J,如果没引用jQuery库则可直接使用$. <script type

Web开发技巧:使用自定义数据属性创建弹出窗口

在开发web应用时,有时会用JavaScript获取文档之外的信息,某些情况下,我们需要用一些技巧来处理这些额外信息以保证Web应用能够正常运行.一般而言,技巧无外乎是将额外的信息塞入事件处理程序或滥用rel属性或class属性以方便注入行为.感谢HTML规范引入了自定义数据属性,让不堪回首的往日一去不返. 所有的自定义数据属性都以data一前缀开头,HTML文档的验证器会在验证时忽略它.开发人员可以在任意元素中加入自定义数据属性,属性值可以是照片的元数据.经纬度坐标或者弹出窗口的尺寸.最棒的是

EBS OAF开发中实现参数式弹出窗口

(版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 概览 参数式弹出窗口和嵌入式弹出窗口不一样,它拥有独立的区域,并不嵌入到使用页面中,它里面的内容根据需要来获取和生成,它拥有自己的AM和页面状态,对popup页面事件的处理也不一样.两种弹出式窗口都只在下面四种组件所支持,既不能改变大小也不可移动. 1.        Text(messageStyledText) 2.        Image 3.        Link 4.     

js范例学习——窗口/框架与导航条设计之弹出窗口设置

1.弹出窗口设置 在JS中,可以使用window对象实现对窗口的控制. window常用方法: alert();弹出一个警告对话框: confirm();在确认对话框中显示指定的字符串: prompt();弹出一个可输入对话框: close();关闭被引用的窗口: foucus();将被引用的窗口放在所有打开窗口的最前方,成为焦点窗口: open();打开新的窗口并且显示由URL或名字引用的文档,可以创建窗口的属性: resizeTo(x,y);设置窗口的大小: resizeBy(offsetx

JavaScript弹出窗口方法

本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了.如果页面没有form,则不会弹出提示窗口如果页面有form表单,a)<form  method="post" ...>    会弹出提示窗口b)<form  method="get&q

jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案

jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI功能很强大,可以实现我们前端很多想要的效果,例如,下拉树也就是select tree等.但是jqueryeasyUI底层构建不是很好,简单的应用还可以,深入开发的话,还是推荐用extjs相对好一些! 今天的这篇文章,主要是解决我很久很久之前遇到的一个问题,今天重新在博客上发一遍,就是jqueryea

JavaScript 弹出窗口总结

1: window.open <!-- window.open('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') //写成一行 --> 参数解释: window.open 弹出新窗口的命令: 'page.html' 弹出窗口的文件名: 'newwindow' 弹出窗