關於MagicAjax的用法 每10秒刷新 更改等待效果

轉自:http://azhai.cnblogs.com/archive/2006/01/30/324381.html

最近,用了一下MagicAjax 覺得不錯,使用很簡單,經驗終結如下:

  1、打開vs 添加 MagicAjax.dll,就會有AjaxPanel 控件,就往上拖東西吧。(簡單吧!)
  2、打開web.config 添加:

        <configSections>
           <section name="magicAjax" type="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax"/>
        </configSections>

            <system.web>
               ...
                  <httpModules>
                         <add name="MagicAjaxModule" type="MagicAjax.MagicAjaxModule, MagicAjax"/>
                 </httpModules>
              ...
           </system.web>

       以上兩步就可以實現Ajax了,是不是很簡單。如果你覺得loading....很難看,接着來。



 3、首先,下載magicAjax源碼,拷貝script目錄到你的目錄裏。

4、 打開web.config 添加:

           <magicAjax tracing="false" scriptPath="~/script">
            <pageStore/>
           </magicAjax>

5、 打開script目錄,編輯AjaxCallObject.js(在最後)找到並改成下面的,
           .....
                  function CreateWaitElement() {
                      var elem = document.getElementById('__AjaxCall_Wait');
                   if (!elem) {
                             elem = document.createElement("div");
                             elem.id = '__AjaxCall_Wait';
                             elem.style.position = 'absolute';
                             elem.style.height = 17;
                             elem.border = "1px";
                             elem.style.paddingLeft = "3px";
                             elem.style.paddingRight = "3px";
                             elem.style.fontSize = "12px";
                             elem.style.borderColor = "#990000";
                             elem.style.borderWidth = "0";
                             elem.style.borderStyle="solid";
                             elem.style.backgroundColor = "#990000";
                             elem.style.color = "#FFFFFF";
                             elem.innerHTML = "正在加載...";
                             elem.style.visibility = 'hidden';

                        document.body.insertBefore(elem, document.body.firstChild);    
                }
                     waitElement = elem;   
                   }
                    // end wait element
      
           試一下 ,看看效果,怎麼出現亂碼?別急,接着改。

6、 打開web.config 改
       第一:<?xml version="1.0" encoding="gb2312" ?>
       第二:添加
                      <globalization
                               requestEncoding="gb2312"
                                responseEncoding="gb2312"
                           />
         
       好,再試試!如何,不錯吧!大家可能還有更好的方法,期待高手指點!

 
評論# re: 關於MagicAjax的用法 2006-01-30 22:52 azhai

 

再加一個定時刷新的:
...
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//每10秒刷新
MagicAjax.AjaxCallHelper.SetAjaxCallTimerInterval(10000);
}
this.Label1.Text = DateTime.Now.ToString();

看看AjaxCallObject.js,當請求的時候,他會象GMail那樣在右上腳出現一個Wait...的等待,很cool,你只要在這裏做一個小更改,改CreateWaitElement那部分就能達到另外的效果我這裏把請求數據時,改成windows關機時,整個頁面變灰的那種效果,類似的js如下:

<SCRIPT type="text/javascript">
    
<!--
    
function log_out()
    {
        ht1 
= parent.frames.item(0).document.getElementsByTagName("html");
        ht1[
0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
        ht2 
= document.getElementsByTagName("html");
        ht2[
0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
        
if (confirm('你是否確認註銷?'))
        {
            
return true;
        }
        
else
        {
            ht1[
0].style.filter = "";
            ht2[
0].style.filter = "";
            
return false;
        }
    }
    
//-->
</SCRIPT>
補充一下:改最後那個windows關機效果的時候,要這句在aspx文件上面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >

如何改變那個很cool的Wait...的等待顯示位置:

很cool的Wait...的等待顯示位置我已經找到修改的位置了,在這個函數裏改就可以

function MoveWaitElement()
{
if (!waitElement)
CreateWaitElement();

var width = document.body.clientWidth;
waitElement.style.top = document.body.scrollTop;
waitElement.style.left = width + document.body.offsetLeft - waitElement.offsetWidth;
}

想輸入客戶端腳本,但是使用Response.Write("<script>...</script>");不行的,不知道如何輸入出我的客戶端腳本呢?

嘗試用:
AjaxCallHelper.WriteXXXX(...);
 

發佈了29 篇原創文章 · 獲贊 4 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章