Điều hướng trang web với Ajax loading Image

Có lần khi vào các trang web mà các ứng dụng web được chuyển hướng đến, có thể mất một thời gian để trả lời hoặc tải. Ví dụ, sau khi người dùng đăng nhập thành công vào một ứng dụng web, ứng dụng sẽ chuyển hướng yêu cầu đến trang nhà. Hãy tưởng tượng rằng , nếu trang được đề cập có chứa một bảng điều khiển và cá nhân hoá nhiều WebParts Các trang web yêu cầu có thể mất một thời gian để phản ứng phụ thuộc vào tốc độ người dùng kết nối Internet và số lượng lưu lượng truy cập mạng tại bất kỳ thời gian nhất định.. Một số người dùng có thể thiếu kiên nhẫn và cám dỗ để nhấp về các nút khác hoặc liên kết trên trang web, xem hình 1 Để khắc phục vấn đề này,. đầu tiên, chuyển hướng yêu cầu tới một trang trung gian, và sau đó tải các trang yêu cầu từ đó. Mục đích chính của trang trung gian là để hiển thị một tải AJAX chỉ báo hình (hình 2), trong khi chờ đợi người dùng cho trang web yêu cầu để đáp ứng.

CSS kết hợp với Ajax TabContainer Control trong asp.net

Tên bài viết: CSS kết hợp với Ajax TabContainer Control trong asp.net
Tác giả: Quang.It
Phiên bản: ASP.NET 2.0
Cấp độ bài viết: Dễ hiểu, nắm bắt nhanh, đơn giản.
Tóm tắt: Điều này giải thích cho chúng ta làm thế nào để tạo ra phong cách riêng của css cho Ajax TabContainer Control.
1> Đầu tiên tạo 1 ASP.NET AjaxEnabled Website.
2> Kéo và thả TabContainer Control từ Toolkit đến web form.
3> Nhấn đúp TabContainer Control để chuyển sang trang xử lý .CS
Chép code này vào:

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" >
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Quang.IT">
<ContentTemplate>
<asp:TextBox ID="TextBox1" Text="Test by Quang" runat="server"></asp:TextBox>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Storm">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Admin 4rum DNGAZ"></asp:Label>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Diễn đàn Đà Nẵng">
<ContentTemplate>
<asp:Button ID="Button1" PostBackUrl="http://dngaz.com" runat="server" Text="Nhấn vào liên kết" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>

Lưu ý: Phải có ScriptManager thì mới hoạt động được Ajax nhé.
4> Bây giờ cùng tạo file CSS. Đặt tên là: Tab.css

/*Header*/
.Tab .ajax__tab_header
{
color: #4682b4;
font-family:Calibri;
font-size: 14px;
font-weight: bold;
background-color: #ffffff;
margin-left: 0px;
}
/*Body*/
.Tab .ajax__tab_body
{
border:1px solid #b4cbdf;
padding-top:0px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
color: #ffffff;
background:url("tab_active.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
color: #ffffff;
background:url("tab_left_active.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
color: #ffffff;
background:url("tab_right_active.gif") no-repeat right;
padding-right:6px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab
{
color: #000000;
background:url("tab_hover.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_hover .ajax__tab_inner
{
color: #000000;
background:url("tab_left_hover.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_hover .ajax__tab_outer
{
color: #000000;
background:url("tab_right_hover.gif") no-repeat right;
padding-right:6px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
color: #666666;
background:url("tab_Inactive.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_inner
{
color: #666666;
background:url("tab_left_inactive.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_outer
{
color: #666666;
background:url("tab_right_inactive.gif") no-repeat right;
padding-right:6px;
margin-right: 2px;
}

5> Bây giờ thêm CssClass="Tab" đến TabContainer:

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="Tab" >