Home »

Tạo Tabs sử dụng Multiview và View

3 thg 9, 2013

I. Giới thiệu Việc tạo ra các tabs trong asp.net có rất nhiều cách, và bài viết sau đây sẽ giới thiệu tới các bạn cách tạo ra tabs đơn giản sử dụng Multiview và View. II. Sử dụng code Bài viết được viết dựa trên ASP.Net với ngôn ngữ là C#. Ở đây chúng ta tạo ra 3 control Image Button. Sau đó chúng ta tạo một container là Multiview, tiếp đó chúng ta [...]

Tạo Tabs sử dụng Multiview và View

I. Giới thiệu
Việc tạo ra các tabs trong asp.net có rất nhiều cách, và bài viết sau đây sẽ giới thiệu tới các bạn cách tạo ra tabs đơn giản sử dụng Multiview và View.
II. Sử dụng code
Bài viết được viết dựa trên ASP.Net với ngôn ngữ là C#. Ở đây chúng ta tạo ra 3 control Image Button. Sau đó chúng ta tạo một container là Multiview, tiếp đó chúng ta thêm 3 view con vàoMultiview vừa tạo là view1, view2, view3.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table border="0" cellpadding="2" cellspacing="3" width="100%">
<tr>
<td align="center">
<asp:ImageButton ID="ImageButton1" runat="server" Width="70px"
Height="25px" onclick="ImageButton1_Click" ImageUrl="~/View_images/By-Range_n.Png" />
<asp:ImageButton ID="ImageButton2" runat="server" Width="70px"
Height="25px" onclick="ImageButton2_Click" ImageUrl="~/View_images/Details_n.Png" />
<asp:ImageButton ID="ImageButton3" runat="server" Width="70px"
Height="25px" onclick="ImageButton3_Click" ImageUrl="~/View_images/Toppers_n.Png"  />
</td></tr>
<tr><td colspan="3"><asp:MultiView ID="MultiView1" runat="server">
<table width="100%" cellpadding="2" cellspacing="5">
<tr><td>
<asp:View ID="View1" runat="server">
By range view page.
</asp:View>
</td>
<td>
<asp:View ID="View2" runat="server"><br />
Detail view page
</asp:View>
</td>
<td>
<asp:View ID="View3" runat="server">
Toppers view page
</asp:View></td></tr></table>
</td></tr></table>
Tiếp theo là code behind bạn viết như sau
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SetDefaultView();
}
set();
}
protected void set()
{
ImageButton1.ImageUrl = "View_images/By-Range_n.Png";
ImageButton2.ImageUrl = "View_images/Details_n.Png";
ImageButton3.ImageUrl = "View_images/Toppers_n.Png";
}
private void SetDefaultView() // reder view at first page load
{
MultiView1.ActiveViewIndex = 0;
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
// assign image to pressed button
{ 
MultiView1.ActiveViewIndex = 0;
ImageButton1.ImageUrl = "View_images/By-Range_p.Png";
GridView1.Visible = false;
}
protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
{
MultiView1.ActiveViewIndex = 1;
ImageButton2.ImageUrl = "View_images/Details_p.Png";
}
protected void ImageButton3_Click(object sender, ImageClickEventArgs e)
{
MultiView1.ActiveViewIndex = 2;
ImageButton3.ImageUrl = "View_images/Toppers_p.Png";
}
Hy vọng bài viết trên sẽ giúp ích cho các bạn trong việc lập trình ASP.NET. Chúc các bạn thành công!
Tags:

Comments[ 0 ]


Đăng nhận xét