MagicAjax的用法, 每10秒刷新, 更改等待loading效果
一、使用MagicAjax
1、打开vs 添加 MagicAjax.dll,就会有AjaxPanel 控件,就往上拖东西吧。(简单吧!)
代码如下:
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>
<ajax:AjaxPanel ID="AjaxPanel1" runat="server">
</ajax: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....效果
如果你觉得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"
/>
好,再试试!如何,不错吧!大家可能还有更好的方法,期待高手指点!
三、再加一个定时刷新的:
...
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如下:
<!--
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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >
四、如何改变那个很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(...);