返回> 网站首页
[转载]非Ajax无刷之利用Asp.Net回调机制
yoours2013-11-30 15:00:24
简介一边听听音乐，一边写写文章。
使用无刷，一种使用JS,另一种则使用AJax,使用起比较方便,但与后台的交互不是很好。
ClientScript.GetCallbackEventReference是asp.net提供的回调机制。
首先,要使用这个方法,必有继承一个接口:ICallbackEventHandler,
接口里面两个方法如下:
// 摘要:
// 返回以控件为目标的回调事件的结果。
// 返回结果:
// 回调的结果。
string GetCallbackResult();
// 摘要:
// 处理以控件为目标的回调事件。
// 参数:
// eventArgument:
// 一个字符串，表示要传递到事件处理程序的事件参数。
void RaiseCallbackEvent(string eventArgument);
看说明很详细,我们的页面里面必有实现这个方法与前台交互,这下就方便了!ClientScript.GetCallbackEventReference用法,这个方法是在前台实现：
<script type="text/javascript">
//需要调用这个方法启用后台方法
//arg与context为前台需要传递给后台的参数,好好利用吧
function CallServer(arg, context)
{
//this不用说了
//arg是后台能接收到的方法,也是后台返回来的值
//ReceiveServerData为后台执行完成后,前台执行的方法
//context参数原封不动传给ReceiveServerData
<%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>;
}
//这个方法就是你要执行的前台操作,可以返回结果,也可以改变控件状态,自己喜欢吧~
function ReceiveServerData(result, context)
{
...
}
</script>
有了这两个方法之后,就可以了。
以进度条为例，首先,在HTML文档中加入如下代码：
<div>
<table class="statusTable"> <tr>
<td id="progress1"> </td>
<td id="progress2"> </td>
<td id="progress3"> </td>
<td id="progress4"> </td>
<td id="progress5"> </td>
<td id="progress6"> </td>
<td id="progress7"> </td>
<td id="progress8"> </td>
<td id="progress9"> </td>
<td id="progress10"> </td>
</tr> </table>
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text="0"></asp:Label>
</div>
<div>
<input id="btnRequest" type="button" value="请求" onclick="Request()" />
<input id="btnStop" type="button" value="停止" disabled="disabled" onclick="Stop()" />
</div>
Js部分加入如下Js代码：
<script language="javascript" type="text/javascript">
var idx = 0;
var progressTimer;
var progressInterval = 1000;
function Request()
{
document.getElementById("btnStop").disabled = "";
document.getElementById("btnRequest").disabled = "disabled";
if(idx >= 10)
{
Clear();
return;
}
var arg = idx;
<%= ClientScript.GetCallbackEventReference(this, "arg", "GetMsgBack",null) %>;
idx++;
progressTimer = setTimeout('Request()',progressInterval);
}
function GetMsgBack(result)
{
document.getElementById('progress'+idx).style.backgroundColor = 'blue';
var status = Number(result) * 10;
document.getElementById("Label1").innerHTML = status + "%";
}
function Stop()
{
clearTimeout(progressTimer);
Clear();
}
function Clear()
{
idx = 0;
document.getElementById("btnStop").disabled = "disabled";
document.getElementById("btnRequest").disabled = "";
document.getElementById("Label1").innerHTML = "0";
for (var i = 1; i <= 10; i++)
document.getElementById('progress' + i).style.backgroundColor = 'transparent';
}
</script>
css样式文件中加入如下代码：
.statusTable
{
width:100px;
border:solid 1px #000000;
padding-bottom:0px;
margin-bottom:0px;
}
.statusTable td
{
height:20px;
}
Asp.Net服务端实现回调代码如下：
public partial class DigitStatus : System.Web.UI.Page, ICallbackEventHandler
{
private string AspEventArgs;
protected void Page_Load(object sender, EventArgs e)
{
}
public void RaiseCallbackEvent(string EventArgs)
{
AspEventArgs = EventArgs;
}
public string GetCallbackResult()
{
int i = Convert.ToInt32(AspEventArgs);
i++;
return i.ToString();
}
}
这样,一个简易的进度条就实现了
文章评论
1512人参与，0条评论