Asp.net 2.0+Atlas打造无刷新Tab效果

转载 2006年06月07日 10:47:00
在开始今天的题目之前,请先确认你下载并安装了Atlas和Visual Studio 2005 Web Application Projects,因为下面会用到。Atlas是微软推出的Free Ajax Framework,关于Atlas的更多信息请查看:http://atlas.asp.net/

OK,开始今天的题目。今天我将使用Asp.net 2.0中新增的两个控件——Menu控件和MultiView控件,并结合Atlas实现无刷新的Tab效果,最终效果类似于桌面程序中的TabControl。通过本文你将了解到Menu及MultiView控件的简单使用方法,以及通过Atlas实现很酷的Ajax效果,而且方法极其简单。

首先,我们建立一个AtlasWebApplication工程(如果你成功安装了Atlas和Web Application,VC#的My Templates中便会出现此选项)


然后,向页面中添加一个UpdatePanel控件,并将ScriptManager控件的EnablePartialRendering属性设置为True,这样UpdatePanel控件才能实现无刷新效果。紧接着在UpdatePanel添加一个Menu控件和一个MultiView控件,具体代码如下:
程序代码 程序代码
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="12px" ForeColor="#666666" StaticSubMenuIndent="10px" orientation="Horizontal" OnMenuItemClick="Menu1_MenuItemClick">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#666666" ForeColor="White" />
<DynamicMenuStyle BackColor="#E3EAEB" />
<StaticSelectedStyle BackColor="#1C5E55" />
<DynamicSelectedStyle BackColor="#1C5E55" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<Items>
<asp:MenuItem Text="标签1" Value="0" Selected="True"></asp:MenuItem>
<asp:MenuItem Text="标签2" Value="1"></asp:MenuItem>
<asp:MenuItem Text="标签3" Value="2"></asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#666666" ForeColor="White" />
</asp:Menu>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="Tab1" runat="server">
<div style="height:200px; width:300px; border:solid 1px #1C5E55;">现在显示的是标签1</div>
</asp:View>
<asp:View ID="Tab2" runat="server">
<div style="height:200px; width:300px; border:solid 1px #1C5E55;">现在显示的是标签2</div>
</asp:View>
<asp:View ID="Tab3" runat="server">
<div style="height:200px; width:300px; border:solid 1px #1C5E55;">现在显示的是标签3</div>
</asp:View>
</asp:MultiView>
</ContentTemplate>
</atlas:UpdatePanel>

接下来,在页面中添加一个UpdateProgress,以显示Loading效果,代码如下:
程序代码 程序代码
<atlas:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="padding:1px;background-color:#CC4444;position:absolute;right:15px;top:1px;color:#FFF">Loading...</div>
</ProgressTemplate>
</atlas:UpdateProgress>

最后,双击Menu控件,为其添加单击事件响应代码
程序代码 程序代码
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
//此处只是为了便于观看页面右上角Loading的效果而用
System.Threading.Thread.Sleep(2000);
MultiView1.ActiveViewIndex = int.Parse(e.Item.Value);
}


最终效果如图所示:


在线演示:点击查看
完整源码下载:下载文件 点击下载此文件

相关文章推荐

Atlas.dll(For asp.net 2.0)

  • 2007年08月07日 06:33
  • 1.83MB
  • 下载

Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果]

转载自:http://blog.csdn.net/lifuyun/article/details/1688008, 原博客中附有源代码   (一). 概述         1. 实现GridVi...

asp.net ajax 和 asp.net 2.0中的fileupload合力打造无刷新

在做一个信息管理平台时用到了图片,就像做一个上传的    正好用的是asp.net Ajax    就试着做了一个    不很好        自定义用户控件文件 PicUpload.asc...
  • wyh0318
  • wyh0318
  • 2012年04月10日 13:56
  • 337

ASP.NET 2.0无刷新页面新境界(转载)

     “无刷新页面”,只是一种不确切的效果描述(其实还有其他各种方法来实现这个效果),更确切的说法是:在页面上用JavaScript调用服务器端的一个方法,然后处理返回的数据。实现它最标准的方法当...

使用windbg調試iis應用程序池崩溃的asp.net 2.0 bug.

使用windbg調試iis應用程序池崩溃的asp.net 2.0 bug. 新上線的asp.net 2.0 項目,不定時的報告以下錯誤: Fau...
  • jeffkxt
  • jeffkxt
  • 2015年06月24日 09:46
  • 991

ASP.NET 2.0 实现伪静态网页方法 3种方法

方法一:利用Httphandler实现URL重写(伪URL及伪静态) 我们有时候会见到这样的地址:“http://www.huoho.com/show-12-34.html”,你或许认为在站点服...

ASP.Net 2.0窗体身份验证机制详解(FormsAuthentication) (转载)

ASP.Net 2.0窗体身份验证机制详解(FormsAuthentication) (转载) ASP.Net 2.0窗体身份验证机制详解(FormsAuthentication) ...

ASP.NET 2.0 实现伪静态网页方法

利用Mircosoft URLRewriter.dll实现页面伪静态昨天,转贴了一篇利用ISAPI筛选器来实现URL伪静态的文章,我按照文章上的内容做,可是没有做出来,目前看来,该方法没有使用Micr...

Asp.net 2.0 自定义伪静态源码

根据微软官方伪静态UrlRewrite.dll源码,自己改写应用进项目中。  1、首先,我们写个用于HttpModule请求的类 RolesProvider using System; us...
  • ysn1314
  • ysn1314
  • 2014年08月22日 17:08
  • 519

使用ASP.NET 2.0 Profile存储用户信息[翻译] Level 200

作者: Stephen Walther 原文地址:http://msdn.microsoft.com/asp.net/default.aspx?pull=/library/en-us/dnvs05/...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.net 2.0+Atlas打造无刷新Tab效果
举报原因:
原因补充:

(最多只允许输入30个字)