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);
}


最终效果如图所示:


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

ASP.NET—015:ASP.NET中无刷新页面实现

前面也说过在asp.net中前后前交互的问题。使用了ajax.js的方法:$.post和$.ajax。http://blog.csdn.net/yysyangyangyangshan/article/...
  • yysyangyangyangshan
  • yysyangyangyangshan
  • 2014年09月30日 00:18
  • 7207

Android零基础入门第70节:ViewPager轻松完成TabHost效果

使用ViewPager轻松替代TabHost,开放性和灵活性更大。
  • cqkxzsxy
  • cqkxzsxy
  • 2017年09月28日 10:30
  • 408

asp.net实现无刷新用户验证的简单例子

 html代码:http://www.w3.org/1999/xhtml" >    无标题页        var xmlHttp = null;        function createXML...
  • ssqjd
  • ssqjd
  • 2007年11月19日 19:44
  • 335

Asp.net 2.0 无刷新图片上传+回显

简单三步实现图片无刷新上传:注意是上传,至于上传时的验证,比如图片的尺寸,大小,格式。自行解决。如果我搞定了,也会贴上来的。 兼容性想还不错:FF,CH,IE,猎豹,都是可以实现的。如果看到...
  • yangming19860624
  • yangming19860624
  • 2012年10月09日 15:25
  • 711

asp.net单步无刷新上传并回显图片

找了N多的办法,总算是解决了这个问题: 首先添加两个js库 可以自己去网上下载 然后就是前台代码部分 这里把fileupload控件隐藏, 然后通过普通按钮的点击事件来触发file...
  • qq_28018731
  • qq_28018731
  • 2015年12月01日 11:10
  • 585

Asp.net无刷新二级联动

Asp.net无刷新二级联动数据库建立表provinceid provinceName1 陕西3 山东8 河南表cityid cityname provinceid1 西安 12 济南 33 郑州 8...
  • wengman
  • wengman
  • 2009年04月20日 22:35
  • 2707

在asp.net网页中实现tabPage功能(上)

  我是个.net新手,所以我写的东西在好些高手们看来似乎比较粗浅,还请大家海涵!并希望大家多多指导、多提意见,我会十分感激的,谢谢!  前几天在做一个项目时,项目经理非要让我在asp.net网页中实...
  • lyanliu
  • lyanliu
  • 2008年03月17日 20:25
  • 2531

ASP.NET页面内跳转无刷新-- window.location.hash

在开发在线考试系统中,需要实现用户
  • Metal1
  • Metal1
  • 2014年09月23日 10:52
  • 2141

AJAX实现无刷新加载数据

导读:   第一步:下载安装官方ASP.NET Ajax Framework   微软不久前发布了.Net 2.0 Ajax framework(以前叫Atlas)。你可以到http://ajax....
  • janrn
  • janrn
  • 2008年03月22日 09:29
  • 472

无刷新倒计时实现

Document window.onload=function(){ function Timeover(){ var...
  • u011551941
  • u011551941
  • 2014年05月07日 13:32
  • 593
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.net 2.0+Atlas打造无刷新Tab效果
举报原因:
原因补充:

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