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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
原文地址:https://www.cnblogs.com/bluesky4485/p/1546024.html