maple-net

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

先上图,看看效果

使用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的朋友只需要把相应的文件复制的其他工程中就可以运行了。

/Files/maple-net/Demo.rar

posted on 2008-11-27 17:01  Maple  阅读(712)  评论(1编辑  收藏  举报