ASP.NET AJAX 学习笔记
2009-08-14 12:50
633 查看
最近看了看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出来,这点比较郁闷。不知道怎么解决啊,各位有知道的指点下啊。
5、关于异常处理的提示。用脚本去控制显示一个DIV出来,包含错误提示的,用来代替浏览器的alert。在我这边死活那个DIV就是弹不出来,就是不显示,害我郁闷了好一段时间。我把代码贴出来,大家帮我看看。
后台代码主要就是下面三个方法了:
6、脚本调用WebService的情况。调用WebService的时候的脚本可以放在head快中,不需要放在ScriptManager声明之后了。注意一点就是在调用WebService的时候要将命名空间也带上。例如 AJAXEnabledWebApplication1.WebService1.HelloWorld();
在包含母板页的页面上面使用的话要在ContentPage中使用ScriptManagerProxy,而不是ScriptManager。这样在使用的时候就不会因为母板页的ScriptManager和ContentPage中的ScriptManagerProxy出现调用混淆的情况了。
现在就将遇到的一些问题和自己的一些想法记录下来,就当整理下思路了。
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; width: 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中的那些控件试一下,看看会不会给我带来新的惊喜。
相关文章推荐
- ASP.NET Ajax 学习笔记(1) -- ASP.NET Ajax的安装
- ASP.NET MVC4 IN ACTION学习笔记-第六波[Ajax in ASP.NET MVC][1/3]
- Asp.Net Ajax 学习笔记16 Profile Service扩展方式
- ASP.NET 3.5核心编程学习笔记(57):针对AJAX应用程序的WCF服务
- Asp.net Ajax 学习笔记2 UpdatePanel的使用(上)
- Asp.Net Ajax 学习笔记11 Microsoft AJAX Library中的面向对象类型系统
- asp.net ajax 学习笔记--对javascript对象的扩展
- ASP.NET Ajax 学习笔记(1) -- ASP.NET Ajax的安装
- ASP.Net MVC开发基础学习笔记:四、校验、AJAX与过滤器
- ASPNET AJAX RC1.0 学习笔记
- Asp.Net Ajax 学习笔记18 Authentication Service的实现方式与扩展
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
- ASP.NET学习笔记(5)——原生Ajax基本操作
- asp.net ajax 学习笔记
- Asp.net Ajax 学习笔记5 UpdatePanel的使用(下)
- (学习Asp.net Ajax笔记一)使用 Microsoft AJAX Library 创建自定义客户端脚本之一
- ASP.NET 3.5核心编程学习笔记(52):Microsoft AJAX JavaScript类库
- ASP.NET AJAX Extensions 学习笔记之下载安装
- Asp.Net Ajax 学习笔记22 使用Microsoft Ajax Library中的浏览器兼容功能
- Asp.Net Ajax 学习笔记21 VS2008的JavaScript代码提示功能