Asp.net Ajax框架教程
目录
(一).概述...
(二).应用场景代码示例...
1).ScriptManager控件示例...
1. 在异步调用服务端注册客户端脚本新方法...
2. 捕获Ajax异步调用中错误(默认使用alert提示).
3. 捕获Ajax异步调用中错误(自定义输出错误方式)
2).UpdatePanel控件示例...
4. RenderMode属性用法示例...
5. UpdateMode用法示例...
6. ChildrenAsTriggers属性用法示例...
7. Triggers属性用法示例...
3). UpdateProgress控件示例...
8. 在异步更新时显示滚动进度条...
4). Timer控件示例...
9.在客户端无刷新定时执行服务端方法...
5). Ajax中新Validators控件用法示例...
10. Validators控件使用配置示例...
6). 在客户端请求服务端最基本的执行方式...
11. 使用Ajax library类库中的客户端WebReqest对象请求服务端...
7). 在客户端调用页面后台(Page behind)中方法...
12. 在客户端调用页面后台(Page behind)中方法示例...
8). 在客户端调用WebService中的服务端方法...
13. 调用WebService示例...
9). 错误回调处理...
14. 掌握客户端错误回调处理方法...
10). Ajax library客户端编程特性...
15. Asp.net Ajax框架中的客户端对象与服务端对象交互...
16.DataSet/DataTable/DataRow正反序列化JSON格式程序集使用...
17. 客户端类使用Sys.StringBuilder使用示例...
18. WebRequestManager对象的客户端事件示例...
11). 在Ajax操作中访问 Session-Cache-Application 对象...
19. 在WebService方法中使用Session/Cache/Application对象...
20. 在Page后台方法中使用Session/Cache/Application对象...
12). Ajax 客户端类库对现有 javascript对象的扩展功能...
21. 扩展Array对象方法forEach使用示例...
22. 对 JavaScript Function对象扩展, 注册事件新方式...
23. Ajax对String对象扩展方法String.format的使用...
13). 在Ajax library中的客户端面向对象(OO)功能...
24. 客户端注册命名空间, 定义接口, 类继承示例...
14). Asp.net Ajax 中的多语功能...
25. Asp.net服务端使用全局和本地资源文件示例...
26. Asp.net客户端使用全局和本地资源文件示例...
业余时间学习了一下微软的Asp.net Ajax框架教程, 在学习时顺便整理了一个教程. 此教程包括26个精简的小例子, 主要针对开发应用场景和功能点进行展开示例, 在实际开发中也可以作为查找手册使用. 注释都在每个示例中.
Asp.net Ajax客户端对Ajax编程支持非常丰富, 因此使用起来比较灵活.
Author:【夜战鹰】【ChengKing(ZhengJian)】
(二).应用场景代码示例
1).ScriptManager控件示例
1. 在异步调用服务端注册客户端脚本新方法
|
前台页面代码:
<body>
<form id="form1" runat="server">
<div>
<!-- 注释 -->
<!-- 在服务端注册客户端脚本新方法 -->
<!-- 通过Page.ClientScript实例注册客户端脚本方法在异步提交时不起作用. Microsoft采用ScriptManager实例, 并与Page.ClientScript方法一一对应的方法来实现此功能, 具体看示例后台代码. -->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
当前时间: <%= DateTime.Now %>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click1" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
后台服务端代码:
public partial class _AA_ScriptManager_RegistClientScript_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click1(object sender, EventArgs e)
{
//Ajax框架中新调用方式
ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "UpdateSucceed", "alert('Update time succeed!')", true);
//默认调用方式(在异步调用XmlHttp方式中无效)
//Page.ClientScript.RegisterStartupScript(this.GetType(), "UpdateSucceed", "<script>alert('Update time succeed!')</script>");
}
}
|
2. 捕获Ajax异步调用中错误(默认使用alert提示)
|
前台页面代码:
<body>
<form id="form1" runat="server">
<div>
<!-- 注释 -->
<!-- 在Asp.net Ajax框架的异步调用中, 默认情况下不会直接拋出错误详细信息. 可以借助ScriptManager的OnAsyncPostBackError事件来实现 -->
<!-- AllowCustomErrorsRedirect="false" 表示遇到错误不跳转到Web.Config中定义的错误处理页面
<system.web>
<customErrors mode="On" defaultRedirect="~/DisplayError.aspx"></customErrors>
</system.web>
如果设置为true, 则出错时会自动将页面跳转到当前站点根目录下面的DisplayError.aspx页面.
-->
<asp:ScriptManager ID="ScriptManager1" runat="server" AllowCustomErrorsRedirect="false" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
后台页面代码:
public partial class _AA_ScriptManager_GetAsycError_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
int a = 5, b = 0;
int c = a / b;
}
protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
ScriptManager.GetCurrent(this).AsyncPostBackErrorMessage = e.Exception.Message;
}
}
|
3. 捕获Ajax异步调用中错误(自定义输出错误方式)
|
前台页面代码:
<body>
<form id="form1" runat="server">
<div>
<!-- 注释 -->
<!-- 在Asp.net Ajax框架的异步调用中, 默认情况下不会直接拋出错误详细信息. 可以借助ScriptManager的OnAsyncPostBackError事件来实现 -->
<!-- AllowCustomErrorsRedirect="false" 表示遇到错误不跳转到Web.Config中定义的错误处理页面
<system.web>
<customErrors mode="On" defaultRedirect="~/DisplayError.aspx"></customErrors>
</system.web>
如果设置为true, 则出错时会自动将页面跳转到当前站点根目录下面的DisplayError.aspx页面.
-->
<!--注意add_endRequest方法不能写到<head></head>中, 因为这时ScriptManager实例还没有创建. 不好之处是方法写在<head></head>块中使页面有些乱.-->
<asp:ScriptManager ID="ScriptManager1" runat="server" AllowCustomErrorsRedirect="false">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<div id="divMessage" style="color:Red;"></div>
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, e)
{
e.set_errorHandled(true); //表示自定义显示错误, 将默认的alert提示禁止掉.
$get("divMessage").innerHTML = e.get_error().message;
});
</script>
</div>
</form>
</body>
后台服务端代码:
public partial class _AA_ScriptManager_GetAsycDetailError_CustomDisplayError_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
int a = 5, b = 0;
int c = a / b;
}
}
|
2).UpdatePanel控件示例
4. RenderMode属性用法示例
|
<body>
<form id="form1" runat="server">
<div>
<!-- 注释 -->
<!-- RenderMode属性功能与Html标签的style.display属性作用一样, 只是UpdatePanel只有Block和Inline两种方式 -->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block">
<ContentTemplate>
UpdatePanel1(Display设置为Block)
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Block">
<ContentTemplate>
UpdatePanel2(Display设置为Block)
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" RenderMode="Inline">
<ContentTemplate>
UpdatePanel3(Display设置为Inline)
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel4" runat="server" RenderMode=Inline>
<ContentTemplate>
UpdatePanel4(Display设置为Inline)
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
|
5. UpdateMode用法示例
|
<body>
<form id="form1" runat="server">
<div>
<!-- 注释 -->
<!-- UpdateMode属性可以设置为Always和Conditional两种方式. 默认情况下属性值为Always. -->
<!-- 如果设置为Conditional, 则只有当前UpatePanel内部的元素(比如button)提交时, 才能引起当前UpdatePanel更新;-->
<!-- 如果设置为Always, 则不管点击UpdatePanel内部还是外部的按钮都会使当前UpdatePanel更新 -->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=always>
<ContentTemplate>
UpdatePanel1时间:<%= DateTime.Now %>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode=conditional>
<ContentTemplate>
UpdatePanel2时间:<%= DateTime.Now %>
<asp:Button ID="Button2" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
</div>
</form>
</body>
|
6. ChildrenAsTriggers属性用法示例
|
<body>
<form id="form1" runat="server">
<div>
<!-- 注释 -->
<!-- ChildrenAsTriggers属性可以设置为True或False. 默认情况下属性值为True. -->
<!-- 如果设置为False, 则点击当前UpdatePanel中的元素不会引起当前UpdatePanel更新;但它可能会引起本UpdatePanel之外的页面局部更新. -->
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
UpdatePanel1时间: <%= DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode=conditional ChildrenAsTriggers="false">
<ContentTemplate>
UpdatePanel2时间: <%= DateTime.Now %>
|