ASP.NET 用MultiView和View实现选项卡效果

最新推荐文章于 2018-02-22 21:11:58 发布

DoveFeng

最新推荐文章于 2018-02-22 21:11:58 发布

阅读量2.2k

点赞数 1

分类专栏： Windows

Windows 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

ASP.NET中的MultiView和View可以作为其他控件的容器，提供了一种可方便地显示信息的替换视图方式。通常情况下， MultiView和View搭配使用。我一般很少使用这两控件，本文讲讲用MultiView和View实现选项卡效果。贴上前台代码：

[html] view plain copy print ?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>用MultiView和View实现选项卡效果</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnIntroduction" runat="server" BorderWidth="0" Text="公司简介" OnClick="btnIntroduction_Click" />
<asp:Button ID="btnWelcome" runat="server" BorderWidth="0" Text="欢迎加盟" OnClick="btnIntroduction_Click" />
<table style="border: 1px ridge #0000FF; width: 100%;">
<tr valign="top">
<td style="width: 300; height: 250">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:Label ID="Label1" runat="server"></asp:Label>
</asp:View>
<asp:View ID="View2" runat="server">
<asp:Label ID="Label2" runat="server"></asp:Label>
</asp:View>
</asp:MultiView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>用MultiView和View实现选项卡效果</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnIntroduction" runat="server" BorderWidth="0" Text="公司简介" OnClick="btnIntroduction_Click" />
        <asp:Button ID="btnWelcome" runat="server" BorderWidth="0" Text="欢迎加盟" OnClick="btnIntroduction_Click" />
        <table style="border: 1px ridge #0000FF; width: 100%;">
            <tr valign="top">
                <td style="width: 300; height: 250">
                    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                        <asp:View ID="View1" runat="server">
                            <asp:Label ID="Label1" runat="server"></asp:Label>
                        </asp:View>
                        <asp:View ID="View2" runat="server">
                            <asp:Label ID="Label2" runat="server"></asp:Label>
                        </asp:View>
                    </asp:MultiView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

设计效果如下：

用两个Button（btnIntroduction、btnWelcome）作为切换Tab按钮，这两个Button按钮关联到同一个事件处理。其实用ImageButton来实现应该会更好看一点。

后台cs实现切换功能代码：

[csharp] view plain copy print ?

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace WebApplication3
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = @"本公司为一家集软件开发、传统网络开发以及无线网络开发的大型科技公司。公司自成立以来经过长期发展，取得了80多项国家专利！" + "\r\n" +
@"本公司为一家集软件开发、传统网络开发以及无线网络开发的大型科技公司。公司自成立以来经过长期发展，取得了80多项国家专利！" + "\r\n" +
@"本公司为一家集软件开发、传统网络开发以及无线网络开发的大型科技公司。公司自成立以来经过长期发展，取得了80多项国家专利！" + "\r\n" +
@"本公司为一家集软件开发、传统网络开发以及无线网络开发的大型科技公司。公司自成立以来经过长期发展，取得了80多项国家专利！";
Label2.Text = @"欢迎有志之士加盟本公司！
软件开发工程师
要求：
1、热爱软件行业；
2、熟悉、net框架，能熟练使用C#和JavaScript进行编码；
3、熟悉SQL Server等常用的数据库；
4、有良好的编码规范习惯；
5、做事认真负责，服从公司的工作安排；
6、吃苦耐劳，敬业。 ";
}
protected void btnIntroduction_Click(object sender, EventArgs e)
{
//获取被触发的Button对象
Button b = (Button)sender;
if (b.ID == "btnIntroduction")
{
//激活View1
MultiView1.SetActiveView(View1);
}
else
{
//激活View2
MultiView1.SetActiveView(View2);
}
}
}
}

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace WebApplication3
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = @"本公司为一家集软件开发、传统网络开发以及无线网络开发的大型科技公司。公司自成立以来经过长期发展，取得了80多项国家专利！" + "\r\n" +
@"本公司为一家集软件开发、传统网络开发以及无线网络开发的大型科技公司。公司自成立以来经过长期发展，取得了80多项国家专利！" + "\r\n" +
@"本公司为一家集软件开发、传统网络开发以及无线网络开发的大型科技公司。公司自成立以来经过长期发展，取得了80多项国家专利！" + "\r\n" +
@"本公司为一家集软件开发、传统网络开发以及无线网络开发的大型科技公司。公司自成立以来经过长期发展，取得了80多项国家专利！";
            Label2.Text = @"欢迎有志之士加盟本公司！
        软件开发工程师
        要求： 
        1、热爱软件行业； 
        2、熟悉、net框架，能熟练使用C#和JavaScript进行编码； 
        3、熟悉SQL Server等常用的数据库； 
        4、有良好的编码规范习惯； 
        5、做事认真负责，服从公司的工作安排； 
        6、吃苦耐劳，敬业。 ";
        }

        protected void btnIntroduction_Click(object sender, EventArgs e)
        {
            //获取被触发的Button对象
            Button b = (Button)sender;
            if (b.ID == "btnIntroduction")
            {
                //激活View1
                MultiView1.SetActiveView(View1);
            }
            else
            {
                //激活View2
                MultiView1.SetActiveView(View2);
            }
        }
    }
}

浏览效果：

DoveFeng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET 用MultiView和View实现选项卡效果

ASP.NET中的MultiView和View可以作为其他控件的容器，提供了一种可方便地显示信息的替换视图方式。通常情况下， MultiView和View搭配使用。我一般很少使用这两控件，本文讲讲用MultiView和View实现选项卡效果。贴上前台代码：[html] view plaincopyprint?%@ Page Language="C#" AutoEve
复制链接

扫一扫