★★★★★FireGrass★★★★★

※※※※※ΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞΞジ
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

使用IE Web 控件和Web用户控件

Posted on 2006-08-29 14:56  火草  阅读(1177)  评论(1编辑  收藏  举报

一.下载控件
microsoft webcontrols控件包括四个组件:MultiPage、TabStrip、Toolbar、treeView,treeview可以到
 http://www.asp.net/IEWebControls/Download.aspx?tabindex=0&tabid=1去下载,下载后得到文件IEWebControls,只有360KB,安装后自动在C:\Program Files建立IE Web Controls,根据改文件夹下的README.txt修改build.bat,主要有以下4步:
         1、打开bulid.bat的内容,查看csc.exe路径是否正确,一般不能正确使用这可能是原因之一,csc.exe为系统文件,如果它的路径与你的计算机不符合,修改后存盘再执行bulid.bat,将得到Microsoft.Web.UI.WebControls.dll和一些文件夹。

   2、查看默认的web站点,一般默认的web站点为C:\Inetpub\wwwroot,如果不是可以通过打开管理工具àInternet 服务管理器,方法:对默认web站点单击右键à属性à主目录,修改主目录。

   3、将C:\Program Files\IE Web Controls\build下runtime文件夹下所有内容复制到主目录\webctrl_client\1_0下,是将iewebcontrols四大控件的系统文件复制到默认web站点下。

   4、将C:\Program Files\IE Web Controls\build下Microsoft.Web.UI.WebControls.dll文件复制到主目录中建立的项目文件夹下\bin中。
 通过对以上四个方面的操作后执行build.bat,iewebcontrols才能正常使用
添加新项

二、添加控件
打开Microsoft Visual Studio .NET, 在web工具箱中单击右键,选择“添加/删除项(I)...”通过浏览添加Microsoft.Web.UI.WebControls.dll文件,添加后可以在.NET框架组件中选择命名空间为microsoft.web.ui.webcontrols的treeview。
三.使用MultiPage和TabStrip
1.新建一个MultiPage.aspx文件
2.html中添加相应的部分:
 注册microsoft.web.ui.webcontrols控件

<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<body>部分
           

<tr>
        
<td><iewc:tabstrip id="Tabstrip2" runat="server" TargetID="MultiPage1" TabDefaultStyle="background-color:#B5CEE7;font-family:verdana;font-weight:bold;font-size:8pt;color:#000000;width:120;height:21;text-align:center;"   TabHoverStyle="background-color:#97B2E8" TabSelectedStyle="background-color:#3366CC;color:#ffffff;">
                 
<iewc:Tab Text="空运进口" TargetID="pgvAiriIn"></iewc:Tab>
                 
<iewc:TabSeparator></iewc:TabSeparator>
                 
<iewc:Tab Text="空运出口" TargetID="pgvAiriOut"></iewc:Tab>
                 
<iewc:TabSeparator></iewc:TabSeparator>
                 
<iewc:Tab Text="海运进口" TargetID="pgvSeaIn"></iewc:Tab>
                 
<iewc:TabSeparator></iewc:TabSeparator>
                 
<iewc:Tab Text="海运出口" TargetID="pgvSeaOut"></iewc:Tab>
                 
<iewc:TabSeparator></iewc:TabSeparator>
                 
<iewc:Tab Text="陆运进出口" TargetID="pgvLand"></iewc:Tab>
                 
<iewc:TabSeparator></iewc:TabSeparator>
                
<iewc:Tab Text="国内结转" TargetID="pgvCarryForward"></iewc:Tab>
                
</iewc:tabstrip></td>
 
</tr>
 
<tr>
          
<td><iewc:multipage id="Multipage1" runat="server">
                     
<iewc:PageView id="pgvAiriIn">
                               
<TABLE class="TabOuter" cellSpacing="0" borderColorDark="#ffffff" cellPadding="1" width="100%" border="1">
                                         
<tr>
                                              
<TD class="TdLabel" width="174" style="HEIGHT: 16px"><FONT face="宋体">预录入号</FONT></TD>
                                              
<TD width="175" style="HEIGHT: 16px"><FONT face="宋体">
                                                     
<asp:label id="Label3" width="100%" runat="server">GP002</asp:label></FONT></TD>
                                             
<TD class="TdLabel" width="174" style="HEIGHT: 16px"><FONT face="宋体">提单号</FONT></TD>
                                             
<TD style="HEIGHT: 16px"><FONT face="宋体">
                                                     
<asp:label id="Label4" width="100%" runat="server">PK86547</asp:label></FONT></TD>
                                        
</tr>
                                 
</TABLE>
                      
</iewc:PageView>
                       
<iewc:PageView id="pgvAiriOut">
                                  
<TABLE class="TabOuter" cellSpacing="0" borderColorDark="#ffffff" cellPadding="1" width="100%"  border="1">
                                         
<tr>
                                                
<TD class="TdLabel" width="174" style="HEIGHT: 16px"><FONT face="宋体">预录入号</FONT></TD>
                                               
<TD width="175" style="HEIGHT: 16px"><FONT face="宋体">
                                                        
<asp:label id="Label1" width="100%" runat="server">GP002</asp:label></FONT></TD>
                                                
<TD class="TdLabel" width="174" style="HEIGHT: 16px"><FONT face="宋体">提单号</FONT></TD>
                                                 
<TD style="HEIGHT: 16px"><FONT face="宋体">
                                                            
<asp:label id="Label2" width="100%" runat="server">PK8654724324234</asp:label></FONT></TD>
                                           
</tr>
                                 
</TABLE>
                         
</iewc:PageView>
                  
 </iewc:multipage>
         </
td>
</tr>

再打开设计界面就可以看到效果了。
 3.需要注意的问题
使用multipage后台是不会自动定义PageView里的控件,如果里面没有特殊的控件可以使用遍历的方式处理,如果有需要特殊对待的(如按钮和其他一些有特别意义的控件)控件必须手动定义:
         
 protected System.Web.UI.WebControls.Label Label4;
这样你就可以在后台使用PageView里的控件了
 到这里应该基本上会使用MultiPage和TabStrip了
学会使用MultiPage和TabStrip后你会发现PageView里的控件无法在设计页面里修改,必须到html里去修改代码再回到设计页面看效果,是不是觉的很麻烦,使用“Web用户控件”处理这个问题,
下面就来介绍下怎么写一个Web用户控件。
一.添加Web用户控件WebUserControlTest.ascx
 添加完后你会发现Web用户控件跟.aspx文件有些相似就是少了html部分,只有一句话
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="WebUserControlTest.ascx.cs" Inherits="WebApplication1.Controls.WebUserControlTest" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>

二.添加内容
把你原来要添加到aspx的form里的东西直接添加到上一句的下面
<%@Register TagPrefix="webdiyer" Namespace="EOffice.Components" Assembly="aspnetpager"%>
<LINK href="../CSS/green.css" type="text/css" rel="stylesheet">
<asp:datagrid id="dg" BorderStyle="Solid" AllowSorting="True" AllowPaging="True" AutoGenerateColumns="False"
    Width
="100%" Font-Size="14px" Align="center" runat="server">
    
<AlternatingItemStyle BackColor="#EAEAEA"></AlternatingItemStyle>
    
<ItemStyle BackColor="Ivory"></ItemStyle>
    
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" BackColor="#66CCFF"></HeaderStyle>
    
<Columns>
        
<asp:BoundColumn DataField="aa" ReadOnly="True" HeaderText="编号">
            
<HeaderStyle Wrap="False" Width="5%"></HeaderStyle>
        
</asp:BoundColumn>
        
<asp:BoundColumn DataField="bb" HeaderText="新闻标题">
            
<HeaderStyle Wrap="False" Width="50%"></HeaderStyle>
        
</asp:BoundColumn>
        
<asp:BoundColumn DataField="cc" HeaderText="新闻来源">
            
<HeaderStyle Wrap="False" Width="20%"></HeaderStyle>
        
</asp:BoundColumn>
        
<asp:EditCommandColumn ButtonType="LinkButton" UpdateText="更新" HeaderText="编辑命令" CancelText="取消" EditText="编辑">
            
<ItemStyle Wrap="False" HorizontalAlign="Center" Width="10%"></ItemStyle>
        
</asp:EditCommandColumn>
    
</Columns>
    
<PagerStyle Visible="False"></PagerStyle>
</asp:datagrid><WEBDIYER:ASPNETPAGER id="pager" Width="100%" runat="server" ShowSelectBox="Never" ShowCustomInfoSection="Left"
    AlwaysShow
="True" HorizontalAlign="center" ShowInputBox="always" SubmitButtonStyle="border:1px solid #000066;height:20px;width:30px"
    InputBoxStyle
="border:1px #0000FF solid;text-align:center" SubmitButtonText="转到" CssClass="mypager" TextBeforeInputBox="转到"
    CustomInfoSectionWidth
="70%"></WEBDIYER:ASPNETPAGER><asp:label id="lblAuto_ID" runat="server">1</asp:label>

我这里用到了ASPNETPAGER控件,需要先注册下,大家可以把自己想写的东西写进去,到后台WebUserControlTest.ascx.cs处理事件的响应部分,更.aspx文件的处理方式一样,我就不多说了。一个Web用户控件已经好了,接下来是怎么调用这个控件
三.调用控件
 1.注册控件
<%@ Register TagPrefix="url" TagName="WebUserControl" Src="../Controls/WebUserControlTest.ascx" %>
注意:我是把控件和web页面分别放在不同的文件夹下的
 2.在要用的地方添加控件
<iewc:PageView id="pgvCarryForward">
            
<url:WebUserControl id="WebUserControl" runat="server"></url:WebUserControl>
   
</iewc:PageView>
如此控件已经添加到PageView,如果你要改PageView里的控件可以直接到WebUserControlTest.ascx上去改,改完后自然会反映到web页面上去,加完后你一定会想知道怎么处理web用户控件,下面就是。
 3.后台处理
  定义控件
protected WebUserControlTest WebUserControl;
这样你就可以调用WebUserControlTest控件里提供的方法和属性,如你在WebUserControlTest 控件里定义了一个属性来给WebUserControlTest 中某个控件赋值:
public string LblAutoId
        {
            
set
            {
                
this.lblAuto_ID.Text = value;
            }
            
get
            {
                
return this.lblAuto_ID.Text;
            }
        }
在web页面只要如下就可以调用了:
WebUserControl.LblAutoId = "2";
好了,整个过程已经讲完,如果有问题的话可以来信互相探讨探讨。