• ASP.NET AJAX 学习笔记


    最近看了看Asp.net Ajax,初级入门教程肯定就非Terrylee的Ajax入门系列了,虽说有些东西到正式版之后有所变化,不过照着学习一遍在不同的地方想办法用新的实现,还是一件比较有意思的事情啊。

    现在就将遇到的一些问题和自己的一些想法记录下来,就当整理下思路了。

    1、在后台注册异步的服务器端控件。通过ScriptManager的RegisterAsyncPostBackControl方法去将一个服务器端控件注册成一个异步触发器。可以在点击这个服务器端控件的时候不整页刷新。就像这个控件放在UpdatePanel中一样。

    2、在UpdatePanel嵌套的时候可以2个UpdatePanel或者子UpdatePanel进行刷新。点击外面UpdatePanel中的按钮的时候,外层和里面嵌套的UpdatePanel都会刷新,点里面的子UpdatePanel的时候只会子UpdatePanel进行刷新,上层的UpdatePanel是不会刷新的。

    3、一个页面中有多个UpdatePanel的时候,要想通过一个UpdatePanel中的事件去刷新另外一个UpdatePanel中数据。需要在一个UpdatePanel中去设置AsyncPostBackTrigger为另外一个UpdatePanel中的一个按钮。在按钮的事件处理函数中要对另外一个UpdatePanel的数据进行绑定,这样才能看到更新之后的效果。

    4、关于UpdateProgress的使用。如果在不涉及脚本去控制UpdateProgress的显示与否的时候,有二种方式去将UpdateProgress与UpdatePanel进行关联。一就是将UpdateProgress放在UpdatePanel的ContentTemplate,这种情形下可以不用指定UpdateProgress的AssociatedUpdatePanelID属性,应该是默认的关联上了包含它在内的那个UpdatePanel。另一种是将UpdateProgress和UpdatePanel平级放置,这样的话为了不至于混淆,要指定UpdateProgress的AssociatedUpdatePanelID属性。不过为了养成好的习惯,最好在每个UpdateProgress中都指定AssociatedUpdatePanelID。

    如果在UpdateProgress中放置了按钮,要通过脚本去控制是不是要取消异步操作的话,有几点注意事项。我刚开始自己写的时候没有注意,总是说Sys未定义的错误。后来发现是要将script脚本快放在ScriptManager声明之后就可以了。这个问题有好几个可能的原因,有的是未添加System.Web.Extensions的引用,有的是web.config中httphandle没有设置好,还有就是按照的ajax版本不对。总之,我的问题就是在把script快放到ScriptManager声明后面解决了的。

    在用脚本控制是不是要取消异步操作的时候,我觉得有个很奇怪的现象,就是我只要写了那段代码,在当前那个UpdatePanel中点击那个激发异步操作的按钮会正常的出现UpdateProgress,点击取消也是可以正常实现的。但是要是我再加一个UpdatePanel,并且为这个UpdatePanel再指定另外一个UpdateProgress的时候,我在这个UpdatePanel中点击按钮激发异步操作的时候,不仅会出现这个UpdatePanel里面的UpdateProgress,之前用脚本控制的UpdateProgress也会显示出来,而且我在这个上面点“取消”去取消异步操作的话还有用。就是说这个时候它取代了我这个UpdatePanle中的UpdateProgress。会同时显示2个UpdateProgress出来,这点比较郁闷。不知道怎么解决啊,各位有知道的指点下啊。

    var pp=Sys.WebForms.PageRequestManager.getInstance();                
    function CancelAsyncPostBack()
    {
        if (pp.get_isInAsyncPostBack())
        {
        pp.abortPostBack();
        }
    }
    pp.add_initializeRequest(InitializeRequest);
    pp.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender,args)
    {
        if (pp.get_isInAsyncPostBack())
        {
            args.set_cancel(true);
        }
        postBackElement =args.get_postBackElement();
      
        if (postBackElement.id="Panel1Trigger")
        {
            $get("UpdateProgress1").style.display="block";
        }
    }
     
    function EndRequest(sender,args)
    {
        if (postBackElement.id="Panel1Trigger")
        {
            $get("UpdateProgress1").style.display="none";
        }
    }

    5、关于异常处理的提示。用脚本去控制显示一个DIV出来,包含错误提示的,用来代替浏览器的alert。在我这边死活那个DIV就是弹不出来,就是不显示,害我郁闷了好一段时间。我把代码贴出来,大家帮我看看。

    <%@ Page Language="C#" AutoEventWireup="true" Codebehind="WebForm8.aspx.cs" Inherits="AJAXEnabledWebApplication1.WebForm8" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>使用ScriptManager控件</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
        body {
            font-family: Tahoma;
        }
        #AlertDiv{
        left: 40%; top: 40%;
        position: absolute;  200px;
        padding: 12px; 
        border: #000000 1px solid;
        background-color: white; 
        text-align: left;
        visibility: hidden;
        z-index: 99;
        }
        #AlertButtons{
        position: absolute;
        right: 5%;
        bottom: 5%;
        }
        </style>
    </head>
    <body id="bodytag">
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
                </asp:ScriptManager>
     
                <script language="javascript" type="text/javascript">
         
                    var DivElem= 'AlertDiv';
                    var messageElem='AlertMessage';
                    var errorMessageAdditional = 'Please try again.';
                    var bodyTag='bodytag';
                   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                   function ToggleAlertDiv(visString)
                   {
                       if (visString='hidden')
                       {
                       $get(bodyTag).style.backgroundColor='white';
                       }
                       else
                       {
                       $get(bodyTag).style.backgroundColor='gray';
                       }
                       var adiv=$get(DivElem);
                       adiv.style.visibility=visString;
                   }
                   
                   function ClearErrorState()
                   {
                       $get(messageElem).innerHTML='';
                       ToggleAlertDiv('hidden');
                   }
                   
                   function EndRequestHandler(sender,args)
                   {
                       if (args.get_error()!=undefined&&args.get_error().httpStatusCode=='500')
                       {
                       var errormsg=args.get_error().message;
                       args.set_errorHandled(true);
                       ToggleAlertDiv('visible');
                       
                       $get(messageElem).innerHTML='"'+errormsg+'"'+errorMessageAdditional;
                       }
                   }
                   
    </script>
     
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
                            <asp:Label ID="UpdatePanelMessage" runat="server"></asp:Label>
                            <br />
                            last update:<%
       1: =DateTime.Now.ToString() 
    %>>
                            <br />
                            <asp:Button ID="Button1" runat="server" Text="成功的异步" OnClick="SuccessProcessClick_Handler"
                                OnClientClick="ClearErrorState()" />
                                <br />
                                死活那个DIV就是弹不出来啊。郁闷<br />
                            <asp:Button ID="Button2" runat="server" Text="异步操作出错" OnClick="ErrorProcessClick_Handler"
                                OnClientClick="ClearErrorState()" />
                        </asp:Panel>
                    </ContentTemplate>
                </asp:UpdatePanel>
                <div id="AlertDiv">
                    <div id="AlertMessage">
                    </div>
                    <br />
                    <div id="AlertButtons">
                        <input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>

    后台代码主要就是下面三个方法了:

    protected void SuccessProcessClick_Handler(object sender, EventArgs e)
    {
        UpdatePanelMessage.Text = "异步回调成功完成.";
    }
     
    protected void ErrorProcessClick_Handler(object sender, EventArgs e)
    {
        throw new ArgumentException();
    }
     
    protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
    {
        ScriptManager1.AsyncPostBackErrorMessage = "异常信息为:" + e.Exception.Message;
    }

    6、脚本调用WebService的情况。调用WebService的时候的脚本可以放在head快中,不需要放在ScriptManager声明之后了。注意一点就是在调用WebService的时候要将命名空间也带上。例如 AJAXEnabledWebApplication1.WebService1.HelloWorld();

    在包含母板页的页面上面使用的话要在ContentPage中使用ScriptManagerProxy,而不是ScriptManager。这样在使用的时候就不会因为母板页的ScriptManager和ContentPage中的ScriptManagerProxy出现调用混淆的情况了。

    还有几篇没有看完,等看完了接着再写。总体说来,微软还是为我们做了很多事情了,这个Asp.Net ajax的使用还是比较方便的,改天去试一下Ajax Control Toolkit中的那些控件试一下,看看会不会给我带来新的惊喜。

    作者:bluesky4485
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    反射
    IDEA配置数据库
    配置idea的maven镜像为aliyun
    蓝桥---芯片测试(思维)
    汉诺塔(思维、DP思想)
    立方数(质因子、优化)
    碎碎念(DP)
    牛牛战队的比赛地(三分)
    子段乘积(尺取、逆元)
    子段异或(位运算)
  • 原文地址:https://www.cnblogs.com/bluesky4485/p/1546024.html
Copyright © 2020-2023  润新知