关闭

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

883人阅读 评论(0) 收藏 举报
在开始今天的题目之前,请先确认你下载并安装了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);
}


最终效果如图所示:


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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:341811次
    • 积分:4751
    • 等级:
    • 排名:第6330名
    • 原创:81篇
    • 转载:153篇
    • 译文:1篇
    • 评论:43条
    最新评论