• MagicAJax 的使用


    一、使用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如下:

    <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(...);

  • 相关阅读:
    HTML5数据推送SSE原理及应用开发
    用Docker构建分布式Redis集群
    开发者必备的12个JavaScript库
    分享:我用一天时间开发的 新年送祝福 微信手机网站(可在线体验附图)(要代码的留下邮箱)
    祝福csdn回望2014,展望2015 大致可以这样总结和展望
    对 云寻觅贴吧(http://tieba.yunxunmi.com/)的简要分析
    开源前夕先给大家欣赏一下我用C语言开发的云贴吧 网站自动兼容-移动、手机、PC自动兼容云贴吧
    舞蹈模特欣欣(六)棚拍私房 大家看看像小龙女(李若彤)吗?
    终于解决了贴吧手机版的一个重大BUG
    比基尼美女_人像摄影吧主题
  • 原文地址:https://www.cnblogs.com/Traner/p/2819971.html
Copyright © 2020-2023  润新知