我想 大家对MagicAjax都很了解了吧,我再把MagicAjax的使用说一遍:
1.到 http://www.magicajax.net/ 下载最新的DLL组件以及源码包;
2.配置 Web.config:
<
configSections
>
< section name ="magicAjax" type ="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax" />
</ configSections >
< section name ="magicAjax" type ="MagicAjax.Configuration.MagicAjaxSectionHandler, MagicAjax" />
</ configSections >
<
magicAjax
scriptPath
="~/Script"
outputCompareMode
="HashCode"
tracing
="false"
>
< pageStore mode ="NoStore" unloadStoredPage ="false" cacheTimeout ="5" maxConcurrentPages ="5" maxPagesLimitAlert ="false" />
</ magicAjax >
< pageStore mode ="NoStore" unloadStoredPage ="false" cacheTimeout ="5" maxConcurrentPages ="5" maxPagesLimitAlert ="false" />
</ magicAjax >
<
pages
>
< controls >
< add tagPrefix ="ajax" namespace ="MagicAjax.UI.Controls" assembly ="MagicAjax" />
</ controls >
</ pages >
< controls >
< add tagPrefix ="ajax" namespace ="MagicAjax.UI.Controls" assembly ="MagicAjax" />
</ controls >
</ pages >
<
httpModules
>
< add name ="MagicAjaxModule" type ="MagicAjax.MagicAjaxModule, MagicAjax" />
</ httpModules >
< add name ="MagicAjaxModule" type ="MagicAjax.MagicAjaxModule, MagicAjax" />
</ httpModules >
3.在你需要用到MagicAjax的页面头部声明:
<%
@ Register TagPrefix
=
"
ajax
"
Namespace
=
"
MagicAjax.UI.Controls
"
Assembly
=
"
MagicAjax
"
%>
用AjaxPanle包含你要进行无刷新的控件;
<
asp:Content runat
=
"
server
"
ID
=
"
LinkButton_Content
"
ContentPlaceHolderID
=
"
LinkButton_ContentPlaceHolder
"
>
< ajax:AjaxPanel runat = " server " ID = " AjaxPanle0 " >
< uc7:MasterTemplate runat = " server " ID = " MasterTemplate1 " />
</ ajax:AjaxPanel >
</ asp:Content >
< asp:Content runat = " server " ID = " Menu_Content " ContentPlaceHolderID = " menu_ContentPlaceHolder " >
< ajax:AjaxPanel runat = " server " ID = " AjaxPanel1 " >
< asp:WebPartZone ID = " WebPartZone1 " runat = " server " SkinID = " WebPartZoneSkin " >
< ZoneTemplate >
< uc4:Menu ID = " Menu1 " runat = " server " SiteId = " -1 " ModuleCode = " 1000 " Rows = " 1 " Columns = " 10 "
PanelWidth = " 100% " HrefCss = " link2 " SiteConfig = " SiteCode " />
</ ZoneTemplate >
</ asp:WebPartZone >
</ ajax:AjaxPanel >
</ asp:Content >
< ajax:AjaxPanel runat = " server " ID = " AjaxPanle0 " >
< uc7:MasterTemplate runat = " server " ID = " MasterTemplate1 " />
</ ajax:AjaxPanel >
</ asp:Content >
< asp:Content runat = " server " ID = " Menu_Content " ContentPlaceHolderID = " menu_ContentPlaceHolder " >
< ajax:AjaxPanel runat = " server " ID = " AjaxPanel1 " >
< asp:WebPartZone ID = " WebPartZone1 " runat = " server " SkinID = " WebPartZoneSkin " >
< ZoneTemplate >
< uc4:Menu ID = " Menu1 " runat = " server " SiteId = " -1 " ModuleCode = " 1000 " Rows = " 1 " Columns = " 10 "
PanelWidth = " 100% " HrefCss = " link2 " SiteConfig = " SiteCode " />
</ ZoneTemplate >
</ asp:WebPartZone >
</ ajax:AjaxPanel >
</ asp:Content >
到此,所有的工作已经完成,你就可以完成无刷新了。。。简单吧。。。哈哈。。。
注:
关于 Loading... 字体,有些人想改变成中文,这个当然可以实现,但是在Web.config里面进行设置,会出现很多问题,譬如你页面的编码都乱了。那如何解决呢?
不要急,我们可以改变思维,用图片来替代,如何?这个当然是可以实现的:
找到源码包里面的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.style.paddingLeft = "3px";
elem.style.paddingRight = "3px";
elem.style.fontSize = "11px";
elem.style.fontFamily = 'Arial, Verdana, Tahoma';
elem.style.border = "#000000 1px solid";
elem.style.backgroundColor = "DimGray";
elem.style.color = "#ffffff";
elem.innerHTML = '<img src="../Images/load.gif">';
elem.style.visibility = 'hidden';
document.body.insertBefore(elem, document.body.firstChild);
}
waitElement = elem;
}
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.style.paddingLeft = "3px";
elem.style.paddingRight = "3px";
elem.style.fontSize = "11px";
elem.style.fontFamily = 'Arial, Verdana, Tahoma';
elem.style.border = "#000000 1px solid";
elem.style.backgroundColor = "DimGray";
elem.style.color = "#ffffff";
elem.innerHTML = '<img src="../Images/load.gif">';
elem.style.visibility = 'hidden';
document.body.insertBefore(elem, document.body.firstChild);
}
waitElement = elem;
}
把 elem.innerHTML = '<img src="../Images/load.gif">'; 改成做好的图片字样就OK啦。。。