在页面加载完后再自动读取数据填充服务器控件是怎么做到的?


在页面加载完后再自动读取数据填充服务器控件是怎么做到的? 而不是填充后服务器控件后再显示页面。

也可说是怎样异步读取数据库??? 

当一个页面需要读取数据库来填充服务器控件时(用缓存的情况除外),显示时会特别慢。 

好多网站已经实现页面加载后提示‘正在读取...’,以减少用户感觉上的等待时间,不知是怎么实现的?

22 个解决方案

#1


AJAX吧。AJAX可以实现。

#2


既然你都说了是异步读取了,也应该知道ajax这东西吧?

#3


ajax实现,在body的onload事件里写ajax方法:
<body onload="GetData();">

好多网站已经实现页面加载后提示‘正在读取...’,以减少用户感觉上的等待时间,不知是怎么实现的?
-----------------
用自带的updatePanel就可以做到

#4


自己写代码的话,
javascript + xmlhttp + WEB服务(也有的是aspx页面,我不推荐)

#5


期待。关注。

#6


要想完全理解其工作机制,还是先自己写代码来实现。

#7


这种情况都可以用net的ajax来做.除了一个updatePanel是返回的数据,另一个updatePropress就是等待返回时所出现的内容,拉出来,放上 "等待加载 "的图片,设置好时间.OK...最简单方便的方法

#8



<script language="javascript" type="text/javascript">
var req;
var sel1;
function talktoServer(url,s1){
    sel1 = s1;  
req = newXMLHTTPRequest();
var callbackHandler = getReadyStateHandler;//注册客户端回调函数
req.onreadystatechange = callbackHandler;
req.open("POST",url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//对url进行编码
 req.send(null);

}
//创建一个xmlhttprequest对象
function newXMLHTTPRequest(){
var xmlreq = false;  //定义一个xmlhttprequest变量,初始值为false
if(window.XMLHTTPRequest) {
xmlreq = new XMLHTTPRequest();  //如果支持XMLHTTPRequest,则创建
} else if(window.ActiveXObject) {
try {
xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); //IE高版本中创建XMLHTTP对象
} catch (e1) {                                 //创建第一个XMlHTTP失败
try {
xmlreq = new ActiveObject("Microsoft.XMLHTTP"); //IE低版本中创建XMLHTTP
} catch (e2) {
}
}
}

return xmlreq;
}
//服务器回调函数
function getReadyStateHandler(){

if(req.readyState ==4) { //已经加载
if(req.status == 200) { //返回成功
var obj = document.getElementById("class1"); 
var obj2 = document.getElementById("class2");
var xmlDoc = req.responseXML;
var node = xmlDoc.documentElement;
if(sel1!="-1")
{
  obj2.options.length = 0;
  obj2.add(new Option("二级分类","-1"));
}
for(var i=0;i<=node.childNodes.length-1;i++)
{
//添加一个选项 
    if(node.childNodes(i).childNodes(2).text=="0" && sel1=="-1")
    {
    obj.add(new Option(node.childNodes(i).childNodes(1).text,node.childNodes(i).childNodes(0).text)); 
    }
    
    if(sel1==node.childNodes(i).childNodes(2).text)
    {
       obj2.add(new Option(node.childNodes(i).childNodes(1).text,node.childNodes(i).childNodes(0).text));
    }
}


}
        else
        {
document.getElementById("divLoad").InnerHTML="<font color=red>正在加载,请稍后...</font>";
        }
}
</script>

#9


上面就是XmlHttpRequest +js实现的,建议试试,这样就可以知道他是怎么做的,比直接用微软自带的要理解的深

#10


用updatePanel也可以,简单点的话,直接用ICallbackEventHandler接口
  
    //调用后台方法 
    function GetServerDesktopHtml() 
    { 
        var context = ''; 
        WebForm_DoCallback('__Page',"",ShowDesktopHtml,context,null,false);
        
        var pb=new ProcessBar();
        pb.name="请稍后,模块正在加载...";    //要显示的文字
        pb.num=1;
        pb.mode=6;                           //进度条样式 (1-11)共11种
        var dsv=document.createElement("div");
        dsv.id = "divProcessTmp";
        dsv.innerHTML=pb.GetProcessHtml();
        document.body.appendChild(dsv);
    }
    
    //后台回调方法
    function ShowDesktopHtml(htmlReceipt, context) 
    { 
        var divRpt = document.getElementById("divDesktop");
        divRpt.innerHTML = htmlReceipt;
        edit = true;
        inint();
        var divPs = document.getElementById("divProcessTmp");
        divPs.innerHTML = "";
     }


后台

        //注册异步脚本
        Page.ClientScript.GetCallbackEventReference(this, "", "ShowDesktopHtml", "context");
    #region 异步加载用户自定义桌面

    public string GetCallbackResult()
    {
        string strHtml = "";
        //todo 读取数据,构造为字符串返回
        return strHtml;
    }

    public void RaiseCallbackEvent(string eventArgument)
    {

    }

    #endregion

#11


这个问题看似在一个UpdatePanel里放一个GridView+SqlDataSource,加个UpdateProgress控件就OK了似的。

但你试试,其实还是加载完后才显示。几万条数据时就会看出来了。

所以,要么我哪个地方没转过弯来,要么这根本不是简单UpdatePanel+UpdateProgress就能搞定的。

#12


等待进度条
function ProcessBar()
{
    this.num=0;
this.name="";
this.mode=1;
this.play="block";
this.top= parseInt(window.screen.availHeight-250)/2;
this.left= parseInt(window.screen.availWidth - 400)/2;
this.GetProcessHtml=function()
{
var divv;
divv="<div id='tempid' style='display:"+this.play+";position:absolute; width:300px; height:50px; z-index:999; top:"+this.top+"; left:"+this.left+";'>";
if(this.num==0)
    divv+="<table cellpadding='0' cellspacing='0' style='width:300px; height:50px; border:2px solid #7998B7; font-size:12px; text-align:center; vertical-align:middle;'>";
else
    divv+="<table cellpadding='0' cellspacing='0' style='width:300px; height:50px; border:2px solid #7998B7; font-size:12px; padding-top:10px; text-align:center; vertical-align:middle;'>";
if(this.mode<=5)
{
divv+="<tr>";
divv+="<td style='height:20px; padding-top:10px;'>"+this.name+"</td>";
divv+="</tr>";
divv+="<tr>";
divv+="<td><img src='../images/loading/"+this.mode+".gif' alt='' /></td>";
divv+="</tr>";
}
else
{
divv+="<tr>";
divv+="<td style='width:100px;' align='center'><img src='../images/loading/"+this.mode+".gif' alt='' /></td><td align='left'>"+this.name+"</td>";
divv+="</tr>";
}
divv+="</table></div>";
return divv;
}
}

#13


呵呵,楼上回复真快。我试试先。。。

#14


大家都说用Ajax...
其实,如果返回数据填充到GridView等复杂一些的服务器控件,用Ajax+js不显得很复杂吗?!

我给楼主一个简单的实现方式:

<html>    
     <head>    
     <title></title>    
     <script type="text/javascript">    
         var url = 'http://www.google.co.uk/search?hl=en&q=asp.net&meta='; //the details page you want to display... 
     </script>    
     <style>    
         .loading-indicator {    
             font-size:8pt;    
             background-repeat: no-repeat;      
             background-position:top left;    
             padding-left:20px;    
             height:18px;    
             text-align:left;    
         }    
         #loading{    
             position:absolute;    
             left:45%;    
             top:40%;    
             border:1px solid #B2D0F7;       
             padding:10px;    
             font:bold 14px verdana,tahoma,helvetica;    
             color:#003366;    
             width:180px;    
             text-align:center;    
         }    
     </style>    
     <div id="loading">    
         <div class="loading-indicator">    
             Page Loading...    
         </div>    
     </div>    
     </head>    
     <body onload="location.href = url;" style="overflow:hidden;overflow-y:hidden">    
     </body>    
     <script>    
        if(document.layers) {    
             document.write('<Layer src="' + url + '" visibility="hide"></Layer>');    
         }    
        else if(document.all || document.getElementById) {    
             document.write('<iframe src="' + url + '" style="visibility:hidden;"></iframe>');    
         }    
        else {    
             location.href = url;    
         }    
     </script>    
</html>

#15


看来fellowcheng兄弟说的应用Client-Callback最接近我本来想要的。

如果应用Ajax又怎么达到Client-Callback达到的那种效果?

#16


sorry,应该是说不会XmlHTTPReqest,应用UpdatePanel之类的东西达到Client-Callback达到的效果。

或者应用封装好的ASP.NET AJAX客户端中心的代码达到这种效果?

#17


应该是说不用XmlHTTPReqest

#18


mark

#19


说白了,难道页面上有UpdatePanel,内时有GridView+SqlDataSource时就完全没有办法应用异步读取吗?

#20


看看这个,也许对你有帮助
http://groups.csdn.net/develope/topic/12d1ac1e-9545-41a2-b972-60932571e1e0.aspx

#21


up

#22


我知道如果想在页面第一次显示时让GridView异步显示数据,那就要处理Render部分了。

GridView在Page life cycle里在Render阶段怎样生成html markup,这个貌似不透明吧?

看来只能靠XmlHttpRest或client callback来异步取得相对简单的html markup,而不是像GridView这样的庞然大物。

或者首页显示方面应用Cache来提高响应速度了。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号