先上图,看看效果
使用jquery-1.2.6和.NET实现的,基本原理我就不写了,很简单现实ICallbackEventHandler下的两个接口,控制控件的重画,代码我写了详细的注释,自己看看吧。
ASPX代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxDemo.aspx.cs" Inherits="AjaxDemo" %>
<!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></title>
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery-1.2.6.js" type="text/javascript"></script>
<script src="JS/ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//给标签tabs li a的第一个元素注册点击事件
$("#tabs li a").eq(0).click(function() {
UC(1);
})
//给标签tabs li a的第二个元素注册点击事件
$("#tabs li a").eq(1).click(function() {
UC(2);
})
//给标签tabs li a的第三个元素注册点击事件
$("#tabs li a").eq(2).click(function() {
UC(3);
})
$("#tabs ul").tabs();
});
//加载控件
function UC(tag) {
var uc = "fragment" + tag;
if ($("#" + uc).html().length == 0) {//控件内如果有值,将不执行重新加载
$("#" + uc).html("<img src=\"Images/6-0-1-1.gif\" alt=\"请稍候\" />请稍候……");
CallServer(tag, uc);
}
}
//重画控件,_v-新的内容,_i-需要更新的控件ID
function ReceiveCallback(_v, _i) {
$("#" + _i).html(_v);
}
</script>
</head>
<body>
<form runat="server" id="FromAjax">
<div id="tabs">
<ul>
<li><a href="#fragment1">tag1</a></li>
<li><a href="#fragment2">tag2</a></li>
<li><a href="#fragment3">tag3</a></li>
</ul>
<div id="fragment1">
<asp:PlaceHolder ID="PlaUC" runat="server" />
</div>
<div id="fragment2">
</div>
<div id="fragment3">
</div>
</div>
</form>
</body>
</html>
CS代码
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Globalization;
using System.Threading;
public partial class AjaxDemo : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//注册脚本,实现类型局部刷新
string callbackReference = ClientScript.GetCallbackEventReference(this, "_v", "ReceiveCallback", "fragment1", false);
string callbackScript = string.Format("function CallServer(_v,fragment1){{ {0} }}", callbackReference);
ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
AddUC("1");
}
}
#region 动态装载控件
/// <summary>
/// 绑定控件
/// </summary>
protected void AddUC(string uid)
{
Control ct = null;
switch (uid)
{
case "1":
ct = base.LoadControl("WebUC_1.ascx");
break;
case "2":
Thread.Sleep(3000);//线程阻塞3秒,体现加载与不加载的区别
ct = base.LoadControl("WebUC_2.ascx");
break;
case "3":
Thread.Sleep(3000);//线程阻塞3秒,体现加载与不加载的区别
ct = base.LoadControl("WebUC_3.ascx");
break;
}
PlaUC.Controls.Add(ct);
}
#endregion
#region ICallbackEventHandler 成员
public string GetCallbackResult()
{
return Render(PlaUC);
}
public void RaiseCallbackEvent(string eventArgument)
{
AddUC(eventArgument);
}
#endregion
#region 控件重画
/// <summary>
/// 获取指定控件重画的内容
/// </summary>
/// <param name="control"></param>
/// <returns></returns>
public static string Render(Control control)
{
StringWriter SW = new StringWriter(CultureInfo.InvariantCulture);
HtmlTextWriter HTW = new HtmlTextWriter(SW);
control.RenderControl(HTW);
HTW.Flush();
HTW.Close();
return SW.ToString();
}
#endregion
}
代码是用VS2008写的,VS2005的朋友只需要把相应的文件复制的其他工程中就可以运行了。