Asp.net Ajax框架教程[教程下载]
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 %>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</
body
>
|
7. Triggers
属性用法示例
|
<
body
>
<form id="form1" runat="server">
<div>
<!--
注释 -->
<span sty
分享到：
发表评论
lovnet
最新评论
|
评论