我在做采购系统时,因为使用了ASP.NET AJAX的UpdatePanel的控件,可以使得页面局部刷新显示。但是使用起来问题还是很多。

下面列出了一种情况,花了将近5个小时才算解决,虽然不是很完美,但是对于一般应用应该够了。

应用背景:在采购系统里,因为一个产品可以有多个供应商,同样一个供应商可以有多个产品。所以产品和供应商是多对多的关系。

在产品页面,用户选择一个产品,我们希望他可以选择供应商。如下图,选择“得利纸业”,然后在单击“关联供应商”,就弹出供应商页面,让用户选择供应商。

其实,如果是采用刷新技术,这种功能很好实现。让父页面刷新一下,解决方法还是非常简单的。常规的解决方法大都是用 window.open()弹出子页面,

然后在子页面关闭时,刷新父页面就完成了。但是,因为父页面全刷新,用户体验非常差。

刚开始,我感觉问题很简单,bootstrap有model模板(详见 http://v3.bootcss.com/javascript/) ,代码类似如下

  <a href="#" class="btn btn-sm  bg-green btn-flat"    data-toggle="modal" data-target=".bs-example-modal-lg">关联供应商</a>

用户单击关联供应商时,弹出在产品列表页面的一个层。(注意:是层,所以这里没有父-子页面,为的就是局部刷新),代码类似如下

  <asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <asp:linkbutton Text="分类A" runat=server id="c1" />
<asp:linkbutton Text="分类B" runat=server id="c21" /> <asp:gridview runat="server" id="prod"></asp:gridview> <asp:Button ID="btn_connection_supply" runat="server" Text="关联供应商" OnClick="btn_connection_supply_Click" /> </div> </div> </ContentTemplate> </asp:UpdatePanel>

弹出的层,放到UpdatePanel里,在UpdatePanel,左边是ASP.NET LinkButton显示分类名称,右边是GridView显示分类结果,下部一个Button,单击“关联供应商”,

感觉很完美。但是实际测试,问题来了。当用户单击左边分类名称时,白色弹框消失了,用户根本没有时间选择右边的商户列表,更麻烦的是白色消失后,弹出的阴影背景还在,整个页面像死在那里了。只有重新刷新页面。

问题出现了,就开始想办法解决。首先想,用户单击左边Linkbutton,因为是异步回发,最简单的方式,是在回发回来时,仍然让白色的供应商页面显示。查了一下Bootstrap,发现有函数

Bootstrap提供了show函数,可以显示调用,让弹窗显示。

因此,我在LinkButton里,调用了此方法,代码类似如下

     ScriptManager.RegisterStartupScript(button, typeof(LinkButton),
"init", "$(".pop").show(true);", true);

很奇怪,跟踪了返回解决,发现虽然服务器执行了,客户端没有执行。我记得我在做日志系统时,这个代码是执行了,唯一的区别是:

在采购系统里,我将UpdatePanel的  ChildrenAsTriggers设置为"False"  UpdateMode设置"Conditional" ,为的就是不让子刷新时,父跟着刷新。

看了Bootstrap无法解决了,只能够通过ScriptManager解决, Sys.WebForms.PageRequestManager提供了一系列的Request客户端页面生命周期,详见

https://msdn.microsoft.com/zh-cn/library/bb311028.aspx

所以,我在LinkButton的返回时,执行endRequest

     var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$(".model").show(true)
});

然而,这种情况得到了相反的结果,白色页面关不掉了。正常情况下,用户在单击“确认管理供应商”时,页面就应该关闭,现在又关不掉了。

看来,我还要区分endrequest的请类似,其另外一种方法是:应该可以判断用户提交的Button类型。函数原型如下. 其实这里还有一个问题没有解决,如果GridView供应商分页,同样单击上一页,下一页,也会出现这个问题。看来问题越来越多。

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (send,arg) {
$(".model").show(true)
});

此时,我已经精疲力尽,算了,不做了,去吃饭了。

吃过饭后,突然想出来一个方法:为什么要服务器分页,不是有JS 的DataTable,以前用过他,他本身就可以客户端分页啊。

http://www.datatables.net/ 看一下演示(注:DataTable默认使用Google提供Jquery CDN,因为大陆屏蔽了Google,所以演示站点无法打开,可以在Host里增加配置解决。)

dataTable默认提供客户端分页,只要table增加一个id,就可以自动分页,排序,模糊查询

 $('#tbl_supply2').DataTable(
{
}
)

可是DataTable,就在我认为已经好的时候,问题又来了。再我测试时,选择了产品,单击“关联供应商”时,系统调用  $('#tbl_supply2').DataTable() 。但是可能用户没做任何操作关闭了弹窗,又再次单击了“关联供应商”。

此处会出现一个错误“DataTable已经被初始化”。原来用户第一次单击关联供应商时,DataTable进行了初始化。再次单击时,因为已经初始化了,所以会出错。这个问题解决起来会比较简单,只要在document.Ready()里进行进行初始化就可以了。经过测试发现,因为在产品列表里,也用了AJAX,在异步回发时,页面结构已经改变,所以Ready()事件里执行会有问题。

赶快看看DataTable的接口。后来在其API里提供里找到了相关介绍 http://datatables.net/reference/option/destroy 可以利用其destroy参数

代码只要更改为:

$('#tbl_supply2').DataTable(
{
destroy: true
}
)

就可以了。
因此,最后的函数如下:增加了Ordering参数,禁止排序,lengthMenu设置分页为5或者10。

 function pageSupply() {

            $('#tbl_supply2').DataTable(

                 {
destroy: true,
"ordering": false,
"info": false,
"lengthMenu": [, ]
}
)
};

最后的页面就是完成的页面 可以去演示  http://demo.dotnetcms.org/purchase/ 查看。 另外,说说不完美的,因为是客户端分页,所以大量数据可能会影响性能。

以前给一个客户端,他们有2000多个用户列表使用DataTable分页,用户打开时,2000多行分页经常会卡。不过,在采购系统里,应该不会有2000个供应商,对于应付一二百个

供应商,DataTable 客户端分页排序,还是绰绰有余的。

使用ASP.NET AJAX与Bootstrap 弹窗解决方案的更多相关文章

  1. AJAX跨域调用ASP.NET MVC的问题及解决方案

    AJAX跨域调用ASP.NET MVC的问题及解决方案 问题描述: 解决方法: 只需要在web.config中添加如下标为红色的内容即可: <system.webServer> <h ...

  2. 【转】【Asp.Net】了解使用 ASP.NET AJAX 进行局部页面更新

    简介Microsoft的 ASP.NET 技术提供了一个面向对象.事件驱动的编程模型,并将其与已编译代码的优势结合起来.但其服务器端的处理模型仍存在技术本身所固有的几点不足: 进行页面更新需要往返服务 ...

  3. ASP.NET Ajax 客户端框架未能加载、"Sys"未定义

    在Windows Server 2003 系统上部署asp.net项目出现以下问题: IIS为6.0 导致菜单控件的图片显示不出来: WebSite:程序中的图片显示正常. 但用到ASP.net 2. ...

  4. 添加ASP.NET AJAX控件工具集到VS2010的方法

    在VS2010中Ajax控件只有5个,其实还有很多支持AJAX特定功能的服务器控件,微软是将这些控件当作开放源代码项目.所以没有集成到VS2010中.这些AJAX控件被称为ASP.NET AJAX控件 ...

  5. asp.net ajax控件tab扩展,极品啊,秒杀其它插件

    说明:asp.net ajax控件tab要设置width和height,而且在线文本编辑器放能够放入tab中,也必须是asp.net的控件型在线文本,例如fckeditor,下面是我设置好的配置. & ...

  6. asp.net ajax与jquery的冲突问题解决

    在网上看到有网友说,用了updatepannel这个asp.net ajax异步更新面板后,javascript或者jquery代码不起作用,实际上,可以在updatepannel的触发器中进行设置解 ...

  7. asp.net Ajax和web services

    新建一个web服务 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  8. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  9. ASP.NET AJAX Control Toolkit

    https://ajaxcontroltoolkit.codeplex.com/ 警告 7 未能找到引用的组件“Antlr3.Runtime”. 警告 6 未能找到引用的组件“HtmlAgilityP ...

随机推荐

  1. maven中的各种问题

    [ERROR] Plugin org.apache.maven.plugins:maven-shade-plugin:3.1 or one of its dependencies could not ...

  2. SpringBoot的Controller使用

    一: 1.注解 2.control注解 3.效果 4.RespomseBody package com.caojun.springboot; import org.springframework.be ...

  3. CSS html标签元素分类

    在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素.  常用的块状元素有: <div>.<p>.<h1>… ...

  4. 大数据技术之_16_Scala学习_01_Scala 语言概述

    第一章 Scala 语言概述1.1 why is Scala 语言?1.2 Scala 语言诞生小故事1.3 Scala 和 Java 以及 jvm 的关系分析图1.4 Scala 语言的特点1.5 ...

  5. spring@PropertySource用法

    测试例子 package com.hjzgg.auth.config; import org.springframework.beans.factory.annotation.Autowired; i ...

  6. JAVAEE——SpringBoot入门:简介、微服务、环境准备、helloworld与探究、快速构建项目

    一.Spring Boot 入门 1.Spring Boot 简介 简化Spring应用开发的一个框架: 整个Spring技术栈的一个大整合: J2EE开发的一站式解决方案: 2.微服务 2014,m ...

  7. android 滑动冲突

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 通过move事件的 拦截. 在滑动组件中,重写 在拦截触摸事件的时候  这个方法, 然后 ...

  8. Jindent——让intellij idea 像eclipse一样生成模版化的javadoc注释

    插件地址 http://plugins.jetbrains.com/plugin/2170?pr=idea 安装方法参考 http://www.cnblogs.com/nova-/p/3535636. ...

  9. LinkedIn实时低延迟数据抓取系统Databus开源

        http://www.infoq.com/cn/news/2013/03/linkedin-databus

  10. POJ 2546 &amp; ZOJ 1597 Circular Area(求两圆相交的面积 模板)

    题目链接: POJ:http://poj.org/problem? id=2546 ZOJ:problemId=597" target="_blank">http: ...