asp.net2.0中MultiView应用实例

jinvasshole

浏览: 771306 次

最近访客更多访客>>

Leemon323

loveofyou

肖邦也没谱

Garry_panjun

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1175)

社区版块

存档分类

2012-03 ( 128)
2012-02 ( 76)
2012-01 ( 44)
更多存档...

在asp.net1.1中曾经推出了TreeView、MultiPage等插件（因为不是vs2003内置的），需要下载安装相关的插件才能使用，这些当年我也曾用过，不过感觉用起来不是太方便（到服务器上部署时还需要安装一遍），现在到vs2005中这些都成为内置控件了，极大的方便了开发和部署，TreeView控件似乎没有太多要说的，今天我就展示一下MultiPage控件的升级产品MultiView控件。

设计时视图：

以下是运行时的截图：

前台aspx代码如下：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="MultiViewDemo.aspx.cs"Inherits="MultiViewDemo"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>MultiView应用实例</title>
<styletype="text/css">
body
{
font-size:11pt;
font-family:宋体;
}
.mainTitle
{
font-size:12pt;
font-weight:bold;
font-family:宋体;
}
.commonText
{
font-size:11pt;
font-family:宋体;
}
.littleMainTitle
{
font-size:10pt;
font-weight:bold;
font-family:宋体;
}
.TopTitle
{
border:0px;
font-size:10pt;
font-weight:bold;
text-decoration:none;
color:Black;
display:inline-block;
width:100%;
}
.SelectedTopTitle
{
border:0px;
font-size:10pt;
text-decoration:none;
color:Black;
display:inline-block;
width:100%;
background-color:White;
}
.ContentView
{
border:0px;
padding:3px3px3px3px;
background-color:White;
display:inline-block;
width:390px;
}
.SepBorder
{
border-top-width:0px;
border-left-width:0px;
font-size:1px;
border-bottom:Gray1pxsolid;
border-right-width:0px;
}
.TopBorder
{
border-right:Gray1pxsolid;
border-top:Gray1pxsolid;
background:#DCDCDC;
border-left:Gray1pxsolid;
color:black;
border-bottom:Gray1pxsolid;
}
.ContentBorder
{
border-right:Gray1pxsolid;
border-top:Gray0pxsolid;
border-left:Gray1pxsolid;
border-bottom:Gray1pxsolid;
height:100%;
width:100%;
}
.SelectedTopBorder
{
border-right:Gray1pxsolid;
border-top:Gray1pxsolid;
background:nonetransparentscrollrepeat0%0%;
border-left:Gray1pxsolid;
color:black;
border-bottom:Gray0pxsolid;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<fieldsetstyle="width:400px">
<legend>MultiView应用实例</legend>
<tablecellpadding="0"cellspacing="0"width="100%"border="0">
<tr>
<td>
<tablerunat="server"cellpadding="0"cellspacing="0"width="100%"border="0">
<trstyle="height:22px">
<tdclass="SelectedTopBorder"id="Cell1"align="center"style="width:80px;">
<asp:LinkButtonID="lButtonCompany"runat="server"OnClick="lButtonCompany_Click">公司介绍</asp:LinkButton></td>
<tdclass="SepBorder"style="width:2px;height:22px;"></td>
<tdclass="TopBorder"id="Cell2"align="center"style="width:80px;">
<asp:LinkButtonID="lButtonProduct"runat="server"OnClick="lButtonProduct_Click">产品介绍</asp:LinkButton></td>
<tdclass="SepBorder"style="width:2px;height:22px;"></td>
<tdclass="TopBorder"id="Cell3"align="center"style="width:80px;">
<asp:LinkButtonID="lButtonContact"runat="server"OnClick="lButtonContact_Click">联系我们</asp:LinkButton></td>
<tdclass="SepBorder"style="width:2px;height:22px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<tableclass="ContentBorder"cellpadding="0"cellspacing="0"width="100%">
<tr>
<tdvalign="top">
<asp:MultiViewID="mvCompany"runat="server"ActiveViewIndex="0">
<asp:ViewID="View1"runat="server">
我们公司是一个正在上升时期的公司。公司目前有中科院计算机院士3人，博士后32人，博士63人，研究生120人，本科生356人，具有非常强大研发实力。</asp:View>
<asp:ViewID="View2"runat="server">
我们有丰富的产品线，还可以为用户单独定制。目前有吹牛软件、撒谎软件、包二奶软件等等，正在研发的软件有火星定位软件、超时空软件等等。</asp:View>
<asp:ViewID="View3"runat="server">
我们的联系方式是119，传真是110，是120，售后电话114。</asp:View>
</asp:MultiView> 
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>

</div>
</form>
</body>
</html>

后台cs代码如下：

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;

publicpartialclassMultiViewDemo:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{

}
protectedvoidlButtonCompany_Click(objectsender,EventArgse)
{
mvCompany.ActiveViewIndex=0;
Cell1.Attributes["class"]="SelectedTopBorder";
Cell2.Attributes["class"]="TopBorder";
Cell3.Attributes["class"]="TopBorder";
}
protectedvoidlButtonProduct_Click(objectsender,EventArgse)
{
mvCompany.ActiveViewIndex=1;
Cell1.Attributes["class"]="TopBorder";
Cell2.Attributes["class"]="SelectedTopBorder";
Cell3.Attributes["class"]="TopBorder";
}
protectedvoidlButtonContact_Click(objectsender,EventArgse)
{
mvCompany.ActiveViewIndex=2;
Cell1.Attributes["class"]="TopBorder";
Cell2.Attributes["class"]="TopBorder";
Cell3.Attributes["class"]="SelectedTopBorder";
}
}

这里你可以修改页面中的css样式代码，更改成适合自己风格的色彩和样式。

分享到：