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

在开始今天的题目之前，请先确认你下载并安装了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);
}

最终效果如图所示：