layer实现在前台删除前确认弹出框,并回调后台删除事件

最近遇到一些问题,用layer提示消息框,比如删除时,提示消息确定后 return false时,则不管用了,因为layer不支持阻塞,下面就解决一下这个问题:

删除按钮代码:

<asp:Button ID="btnDel" name="btnDel" runat="server" Text="删除" class="btn btn-gray" OnClientClick="return resDel();" OnClick="btnDel_Click" UseSubmitBehavior="false" />

注意添加属性 UseSubmitBehavior="false"  这个属性必须添加,使删除按钮手动提交

基本思路为:

重新写一个函数来封闭下layer.confirm();如下
参数说明:msg为提示信息内容,eventTarget为要提交到后台事件的控件name,eventArgument为提交参数,没有参数时为空就行了。

1 function layerConfirm(msg, eventTarget, eventArgument) {
2           layer.confirm(msg, function (index) {
3               __doPostBack(eventTarget, eventArgument);
4
5           });
6
7       }

以下为详细解析:

js的代码:

<script type="text/javascript">
    function resDel() {
        layer.confirm("您确定要删除吗?", function (index) {
            __doPostBack(‘btnDel‘, ‘1‘);
        });

    }
</script>

后台删除按钮事件代码:

 1 /// <summary>
 2         /// 删除按钮事件
 3         /// </summary>
 4         /// <param name="sender"></param>
 5         /// <param name="e"></param>
 6         protected void btnDel_Click(object sender, EventArgs e)
 7         {
 8             string select = CRequest.GetString("selectid");
 9             if (select.Trim() == "")
10             {
11                 Jscript.Alert("您没有选择数据!", this.Page);
12                 return;
13             }
14             if (_user.DepartmentTypeId == (int)AdminDepartmentTypeEnums.Manager || _user.IsGroupLeader)
15             {
16                 FriendlyLink.DeleteAll(string.Format("Id in({0})", select));
17                 Jscript.AlertAndRedirect("删除成功!", this.Request.RawUrl);
18             }
19             else
20             {
21                 Jscript.Alert("您没有权限删除!", this.Page);
22                 return;
23             }
24         }

这时还要在Page_load里添加回调的判断语句(代码如下):

1 string controlName = Request.Params.Get("__EVENTTARGET");//eventTarget为要提交到后台事件的控件name
2                 string eventArgument = Request.Params.Get("__EVENTARGUMENT");//用此参数判断按钮是否被点击(参数值可随意写)
3                 if (controlName == "btnDel" && eventArgument == "1")//判断两个参数是否满足对应的数据,如满足则调用事件
4                 {
5                     btnDel_Click(sender, e);
6                 }

这时执行会发现

页面报这个错误

  • 发生原因:

.NET基于页面中的输出元素会在最终页面中生成一个__EVENTVALIDATION隐藏字段。做了一个简单的测试。页面中创建一个<asp: button id="btnSubmit" runat="server" text="Submit" tooltip="Submit" />,同时创建对应的Click事件处理程序。运行程序,可以正确响应事件。然后设置btnSubmit.Visable=false,手动在页面 上面添加<input type="submit" name="btnSubmit" value="Submit" />。运行程序,会出现一个包含EnableEventValidation内容的异常。设置<@Page EnableEventValidation="false">再运行程序,又可以正确响应事件。观察前后两次__EVENTVALIDATION 的内容,可以发现是不同的。关于出现的异常,可以认为在输出的时候没有包含btnSubmit,可是再提交到后台的时候却有相应的内容,前后不一致,所以 在开启事件校验的情况下.NET抛出了异常。

  • 解决办法1:

Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //绑定数据;
    }
}

  • 解决办法2:

在页面头部<%@Page ....  %>中添加  EnableEventValidation="false"

这个时候再执行,页面已经能正常layer提示并删除了,希望会帮到你。

PS:写的比较匆忙,有任何意见和建议的望回复,我也会更正错误、解决问题。

时间: 2024-12-10 02:28:25

layer实现在前台删除前确认弹出框,并回调后台删除事件的相关文章

AntD Modal.confirm 确认弹出框用法

<a className={"deleteProject"} onClick={() => this.showDeleteConfirm(record.id)}>删除</a> //按钮的oClick事件调用此函数showDeleteConfirm = (id) => { Modal.confirm({ title: '确认删除此项目吗?', icon: <ExclamationCircleOutlined/>, content: '',

popwindow,弹出框,popwindow点击事件冲突问题很好的解决

尽量自己百度,莫问同事切记切记----最近的感叹,可能太急于求成了,所以以后要有耐心坚决自己搜自己找!!!! 今天说的是比较简单的popwindow,弹出框,这个其实挺简单的主要是有个地方比较可能会出问题就是点击事件 private void initPopWindow(final TextView tview) { final String[] name = { "份", "斤", "个", "人", "桌&quo

jsp界面中使用a标签进行删除请求时候弹出框确认

1.初学ssh框架,在jsp界面中对某一对象的修改/删除,使用了a标签进行请求的跳转,但是删除操作需要用户在删除之前,进行再次确认,以防止误删数据. 2.jsp中的a标签书写方法, <a href="javascript:void(0)"   onclick="confirmDel(<s:property value="#number.computerID" />)">删除</a> 3.还需要在jsp界面加上该

关于Layer弹出框初探

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达20w+,大概有15万Web平台正在使用layer. <html> <head> <title>弹窗效果</title> </head> <scrip

Android 学习笔记之AndBase框架学习(二) 使用封装好的进度框,Toast框,弹出框,确认框...

PS:渐渐明白,在实验室呆三年都不如在企业呆一年... 学习内容: 1.使用AbActivity内部封装的方法实现进度框,Toast框,弹出框,确认框...   AndBase中AbActivity封装好了许多方法提供我们去使用,使得在使用的时候更加的方便,只需要传递相关参数即可..省去了我们自己使用基础的函数进行构造...   就好比进度框,Toast框,弹出框,确认框...这些基本的东西都在AndBase的AbActivity封装好了...我们只需要传递参数调用其中内部的方法就可以完成这些视

JS组件Bootstrap实现弹出框和提示框效果代码

JS组件Bootstrap实现弹出框和提示框效果代码 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2015-12-08我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编 辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户

JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

原文:JS组件系列--Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信

Bootstrap:弹出框和提示框效果以及代码展示

(转自Bootstrap:弹出框和提示框效果以及代码展示) 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三

Bootstrap篇:弹出框和提示框效果以及代码展示

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框