利用AJAX來達到Mouse移到Button時與MultiView做即時更換
這個範例有點像Yahoo首頁的新聞
只要滑鼠移動到MultiView上面的Button就可以更改到他所指定的畫面(View)
以下是C#範例：
MULITIVIEW_CS.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MULITIVIEW_CS.aspx.cs" Inherits="MULITIVIEW_CS" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>未命名頁面</title>
07
08 <script>
09 function goto(btn)
10 {
11 __doPostBack(btn.name, "");
12 }
13 </script>
14
15 </head>
16 <body>
17 <form id="form1" runat="server">
18 <div>
19 <asp:ScriptManager ID="ScriptManager1" runat="server">
20 </asp:ScriptManager>
21 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="運動" Width="100px" /><asp:Button
22 ID="Button2" runat="server" OnClick="Button2_Click" Text="影視" Width="100px" /><asp:Button
23 ID="Button3" runat="server" OnClick="Button3_Click" Text="國際" Width="100px" /><asp:UpdatePanel
24 ID="UpdatePanel1" runat="server">
25 <contenttemplate>
26 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="1">
27 <asp:View ID="View1" runat="server">
28 <table border="1" style="width: 300px; height: 100px" cellpadding="0" cellspacing="0">
29 <tr>
30 <td valign="top">
31 運動內容</td>
32 </tr>
33 </table>
34 </asp:View>
35 <asp:View ID="View2" runat="server"><table border="1" style="width: 300px; height: 100px" cellpadding="0" cellspacing="0">
36 <tr>
37 <td valign="top">
38 影視內容</td>
39 </tr>
40 </table>
41 </asp:View>
42 <asp:View ID="View3" runat="server"><table border="1" style="width: 300px; height: 100px" cellpadding="0" cellspacing="0">
43 <tr>
44 <td valign="top">
45 國際內容</td>
46 </tr>
47 </table>
48 </asp:View>
49 </asp:MultiView>
50 </contenttemplate>
51 <triggers>
52 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
53 <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
54 <asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
55 </triggers>
56 </asp:UpdatePanel>
57 </div>
58 </form>
59 </body>
60 </html>
61
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>未命名頁面</title>
07
08 <script>
09 function goto(btn)
10 {
11 __doPostBack(btn.name, "");
12 }
13 </script>
14
15 </head>
16 <body>
17 <form id="form1" runat="server">
18 <div>
19 <asp:ScriptManager ID="ScriptManager1" runat="server">
20 </asp:ScriptManager>
21 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="運動" Width="100px" /><asp:Button
22 ID="Button2" runat="server" OnClick="Button2_Click" Text="影視" Width="100px" /><asp:Button
23 ID="Button3" runat="server" OnClick="Button3_Click" Text="國際" Width="100px" /><asp:UpdatePanel
24 ID="UpdatePanel1" runat="server">
25 <contenttemplate>
26 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="1">
27 <asp:View ID="View1" runat="server">
28 <table border="1" style="width: 300px; height: 100px" cellpadding="0" cellspacing="0">
29 <tr>
30 <td valign="top">
31 運動內容</td>
32 </tr>
33 </table>
34 </asp:View>
35 <asp:View ID="View2" runat="server"><table border="1" style="width: 300px; height: 100px" cellpadding="0" cellspacing="0">
36 <tr>
37 <td valign="top">
38 影視內容</td>
39 </tr>
40 </table>
41 </asp:View>
42 <asp:View ID="View3" runat="server"><table border="1" style="width: 300px; height: 100px" cellpadding="0" cellspacing="0">
43 <tr>
44 <td valign="top">
45 國際內容</td>
46 </tr>
47 </table>
48 </asp:View>
49 </asp:MultiView>
50 </contenttemplate>
51 <triggers>
52 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
53 <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
54 <asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
55 </triggers>
56 </asp:UpdatePanel>
57 </div>
58 </form>
59 </body>
60 </html>
61
MULITIVIEW_CS.aspx.cs
01 
using System;
02
using System.Data;
03using System.Configuration;
04using System.Collections;
05using System.Web;
06using System.Web.Security;
07using System.Web.UI;
08using System.Web.UI.WebControls;
09using System.Web.UI.WebControls.WebParts;
10
using System.Web.UI.HtmlControls;
11
12public partial class MULITIVIEW_CS : System.Web.UI.Page
13{
14
protected void Page_Load(object sender, EventArgs e)
15
{
16 if (!IsPostBack)
17 {
18 this.Button1.Attributes.Add("onmouseover", "goto(this)");
19 this.Button2.Attributes.Add("onmouseover", "goto(this)");
20 this.Button3.Attributes.Add("onmouseover", "goto(this)");
21
}
22 }
23 protected void Button1_Click(object sender, EventArgs e)
24 {
25 this.MultiView1.ActiveViewIndex = 0;
26 }
27 protected void Button2_Click(object sender, EventArgs e)
28 {
29 this.MultiView1.ActiveViewIndex = 1;
30 }
31 protected void Button3_Click(object sender, EventArgs e)
32 {
33 this.MultiView1.ActiveViewIndex = 2;
34 }
35}
36
using System;
using 02
using System.Data;03
using System.Configuration;04
using System.Collections;05
using System.Web;06
using System.Web.Security;07
using System.Web.UI;08
using System.Web.UI.WebControls;09
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class MULITIVIEW_CS : System.Web.UI.Page13
{14
protected void Page_Load(object sender, EventArgs e)15
{
16
if (!IsPostBack)17
{18
this.Button1.Attributes.Add("onmouseover", "goto(this)");19
this.Button2.Attributes.Add("onmouseover", "goto(this)");20
this.Button3.Attributes.Add("onmouseover", "goto(this)");21
}22
}23
protected void Button1_Click(object sender, EventArgs e)24
{25
this.MultiView1.ActiveViewIndex = 0;26
}27
protected void Button2_Click(object sender, EventArgs e)28
{29
this.MultiView1.ActiveViewIndex = 1;30
}31
protected void Button3_Click(object sender, EventArgs e)32
{33
this.MultiView1.ActiveViewIndex = 2;34
}35
}36
