建立功能豐富的Web應(yīng)用程式介面- 使用IE Web Control 資策會(huì)

建立功能豐富的

Web應(yīng)用程式介面

-使用IEWebControl

資策會(huì)教育訓(xùn)練處王寧疆

MCAD.NET/MCSD.NET/MCT議程為什麼要使用IEWebControl?認(rèn)識(shí)IEWebControl安裝IEWebControl使用TreeView使用TabStrip和MultiPage使用ToolBar為什麼要使用IEWebControl?Web應(yīng)用程式的特性容易安裝容易部署反應(yīng)速度較慢使用者介面功能較差沒有功能表沒有工具列沒有TreeView沒有多頁(yè)操作畫面認(rèn)識(shí)IEWebControlTreeViewTabStripMultiPageToolBar安裝IEWebControl0.下載IEWebControl1.安裝TreeViewControl.msi2.把webctrl_client目錄複製到wwwroot底下3.使用滑鼠右鍵點(diǎn)中工具箱,選擇[新增/移除項(xiàng)目],瀏覽到IEWebControl安裝目錄下的bin目錄下的Microsoft.Web.UI.WebControls.DLL,按下[選取]後,再按下[確定]鍵4.把欲使用的TreeView,ToolBar,TabStrip,MultiPage控制項(xiàng)加到WebForm使用TreeView控制項(xiàng)範(fàn)例TreeViewTreeNode使用TreeView控制項(xiàng)利用[屬性]視窗編輯TreeView物件的Nodes集合從XML文件匯入資料TreeView/TreeNode常用的屬性TreeView常用的屬性NodesTargetTreeNodeTypeSrcTreeNodeSrcTreeNodeXsltSrcAutoPostBackTreeNode常用的屬性ChildTypeTextNavigateUrlImageUrlSelectedImageUrlXML文件製作TreeNodeType<iewc:treeview

runat="server"id="oTree"ChildType="Folder"><iewc:treenodetypeType="Folder" ExpandedImageUrl="images/folderopen.gif" ImageUrl="images/folder.gif"/><iewc:treenodetypeType="Link"ImageUrl="images/link.gif"/><iewc:treenodetext="ASP.NetSites"ChildType="Link"> <iewc:treenodetext="ASPAlliance" navigateurl="http://"/><iewc:treenodetext="4GuysFromRolla" navigateurl=""/> <iewc:treenodetext="DotNetJunkies" navigateurl="http://"/></iewc:treenode></iewc:treeview>FolderLink設(shè)定DefaultStyle,HoverStyle,SelectedStyle屬性<iewc:treeview

runat="server"id="oTree"ChildType="Folder"SelectedStyle="background:ffffcf;color:black;text-decoration:underline"

DefaultStyle="font-family:Verdana"

HoverStyle="background:ffffff;color:#000080;text-decoration:underline">

…</iewc:treeview>

從XML文件匯入資料–使用TreeNodeSrc屬性<?xmlversion="1.0"encoding="utf-8"?><TREENODES>

<treenodetext="ASP.NetSites"ChildType="Link"

Target="main">

<treenodetext="ASPAlliance"navigateurl="http://"/>

<treenodetext="4GuysFromRolla" navigateurl=""/> <treenodetext="DotNetJunkies"navigateurl="http://"/></treenode>

<treenodetext="SqlServerSites"ChildType="Link"

Target="main"> <treenodetext="Swynk"navigateurl="http://"/> <treenodetext="Sql-Server-P"navigateurl="http://www.sql- server-"/></treenode></TREENODES>從XML文件匯入資料–使用TreeNodeTypeSrc屬性<?xmlversion="1.0"encoding="utf-8"?><TREENODETYPES>

<treenodetype

Type="Folder"

ExpandedImageUrl="images/folderopen.gif" ImageUrl="images/folder.gif"/>

<treenodetype

Type="Link"

ImageUrl="images/link.gif"/> <treenodetype

Type="File"

ImageUrl="images/file.gif"/></TREENODETYPES>TreeNodeType常用的屬性TypeExpandedImageUrlImageUrl善用XSLT查詢資料庫(kù)得到的XML文件無法直接給TreeView控制項(xiàng)使用一般的XML文件TreeView可以接受的XML文件套用XSLT-使用TreeNodeSrc和TreeNodeXsltSrc屬性<?xmlversion="1.0"encoding="UTF-8"?><books>

<bookprice="34.95"><title>ASP3.0</title><authors><author>Mitchell</author><author>Atkinson</author></authors><year>1999</year></book>

<bookprice="29.95"><title>DesigningASP</title><authors><author>Mitchell</author></authors><year>2000</year></book></books><xsl:stylesheet

xmlns:xsl="..."version='1.0'><xsl:templatematch="/books">

<TREENODES><xsl:for-eachselect="book">

<treenode><xsl:attributename="text"><xsl:value-ofselect="title"/></xsl:attribute>

<treenode><xsl:attributename="text">Price-$<xsl:value-ofselect="@price"/></xsl:attribute>

</treenode><treenode></xsl:for-each></TREENODES></xsl:template></xsl:stylesheet>XMLXSLT使用XSLT產(chǎn)生器DataSet名稱Template名稱XSLT產(chǎn)生器的功能自動(dòng)為XML文件建立XSLT文件,將XML文件中的資料做成TreeView控制項(xiàng)可以顯示的資料自動(dòng)加入超連結(jié),方便製作Master-Detail資料呈現(xiàn)可以搭配TreeNodeTypeSrc屬性設(shè)定一起使用XSLT產(chǎn)生器產(chǎn)生的XML文件ImportsSystem.Xml…DimxwriterAsXmlTextWriter=NewXmlTextWriter(txtXslFile.Text,System.Text.Encoding.UTF8)xwriter.WriteStartElement("xsl:stylesheet")xwriter.WriteAttributeString("xmlns:xsl",_ "/1999/XSL/Transform")xwriter.WriteAttributeString("version","1.0")xwriter.WriteStartElement("xsl:template")….

使用XSLT產(chǎn)生器產(chǎn)生的XSL文件製作網(wǎng)頁(yè)設(shè)定:1.TreeNodeSrc屬性2.TreeNodeTypeSrc屬性3.ChildType屬性4.Target屬性程式製作PrivateSubPage_Load(..)HandlesMyBase.LoadSqlDataAdapter1.Fill(Ds1)DataView1.Table=Ds1.Tables("Titles")DataView1.RowFilter="pub_id="&Request("Param")DataGrid1.DataSource=DataView1DataGrid1.DataBind()EndSubDetails.aspx好用的DataView類別對(duì)DataSet中的記錄執(zhí)行過濾,排序,或搜尋過濾Table屬性,RowFilter屬性排序Table屬性,Sort屬性搜尋Table屬性,Sort屬性,Find/FindRows方法TabStrip控制項(xiàng)和MultiPage控制項(xiàng)使用範(fàn)例TabStripMultiPage網(wǎng)頁(yè)設(shè)計(jì)-DataGrid<asp:datagridid=DataGrid1runat="server"

AutoGenerateColumns="False"DataMember="Products"

DataSource="<%#Ds1%>">….<Columns>

<asp:ButtonColumnText="檢視"HeaderText="詳細(xì)資料"

CommandName="Select"></asp:ButtonColumn>

<asp:BoundColumn

DataField="ProductID"

SortExpression="ProductID"HeaderText="產(chǎn)品編號(hào)"></asp:BoundColumn><asp:BoundColumn../> ….</asp:BoundColumn></Columns></asp:datagrid>使用TabStrip控制項(xiàng)和MultiPage控制項(xiàng)TabStripMultiPage<iewc:multipage

id="MultiPage1">

<iewc:PageView

id="RelatedInformationPage"> <h3>RelatedInformation</h3> <asp:Label

Runat="server"text="Otheritemsforsale" ID="Label2"></asp:Label> …</iewc:PageView>

….</iewc:multipage>當(dāng)成TabStrip的Item的TargetID屬性的內(nèi)容值當(dāng)成TabStrip的TargetID屬性的內(nèi)容值TabStrip/MultiPage控制項(xiàng)常用的屬性TabStrip控制項(xiàng)TargetIDOrientationTab成員(Item)常用的屬性TextTargetIDMultiPage控制項(xiàng)IDPageView成員常用的屬性ID編輯TabStrip控制項(xiàng)和MultiPage控制項(xiàng)<iewc:tabstripid="TabStrip1"runat="server"TargetID="MultiPage1">

<iewc:TabText="類型"TargetID="CategoryPage"></iewc:Tab><iewc:TabText="供應(yīng)商"TargetID="SupplierPage"></iewc:Tab></iewc:tabstrip><iewc:multipage

runat="server"id="MultiPage1"><iewc:PageViewid="CategoryPage"><h3>產(chǎn)品類型</h3><table><tr> <td>編號(hào):</td> <td><asp:Label

Runat="server"ID="CategoryID"></asp:Label></td></tr><tr> <td>參考圖案:</td> <td><asp:Image

Runat="server"ID="Picture"></asp:Image></td></tr></table></iewc:PageView>

….</iewc:multipage>處理Page_Load和ItemCommand事件ImportsMicrosoft.Web.UI.WebControls…PrivateSubPage_Load(..)HandlesMyBase.LoadIfNotPage.IsPostBackThendaProduct.Fill(Ds1)daCategory.Fill(Ds1)daSupplier.Fill(Ds1)

Session("DataSet")=Ds1DataGrid1.DataBind()

DimdrAsDataRow=Ds1.Tables("Products").Rows(0)

ShowDetails(dr)EndIfEndSubPrivateSubDataGrid1_ItemCommand(..)HandlesDataGrid1.ItemCommandDimds1AsDataSet=Session("DataSet")DimposAsInteger=e.Item.DataSetIndex

DimdrAsDataRow=Ds1.Tables("Products").Rows(pos)

ShowDetails(dr)EndSub製作ShowDetails方法DataView1.Table=Ds1.Tables("Categories")DataView1.RowFilter="CategoryID="&dr("CategoryID")DimlblCategoryIDAsLabel=_ CType(MultiPage1.FindControl("CategoryID"),Label)lblCategoryID.Text=DataView1(0)("CategoryID")DimlblCategoryNameAsLabel=_ CType(MultiPage1.FindControl("CategoryName"),Label)lblCategoryName.Text=DataView1(0)("CategoryName")DimlblDescriptionAsLabel=_ CType(MultiPage1.FindControl("Description"),Label)lblDescription.Text=DataView1(0)("Description")DimPictureAsWebControls.Image=_ CType(MultiPage1.FindControl("Picture"),WebControls.Image)Picture.ImageUrl="GetImage.aspx?ID="&dr("CategoryID")製作GetImage.aspxPrivateSubPage_Load(…)HandlesMyBase.LoadDimiasInteger=Request("ID")-1Dimds1AsDataSet=Session("DataSet")Dimbuf()AsByte=_ CType(ds1.Tables("Categories").Rows(i)("Picture"),Byte())DimmsAsMemoryStream=NewMemoryStream

ms.Write(buf,78,buf.Length-78)DimbmpAsBitmapbmp=NewBitmap(ms)

Response.ContentType="image/gif'"

bmp.Save(Response.OutputStream,ImageFormat.Gif)

ms.Close()EndSub使用ToolBar控制項(xiàng)標(biāo)籤ASP.NET控制項(xiàng)說明ToolbarToolbar工具列ToolbarButtonToolbarButton工具列按鈕ToolbarCheckButtonToolbarCheckButton不會(huì)自動(dòng)彈回的工具列按鈕ToolbarCheckGroupToolbarCheckGroup互斥的工具列按鈕群組ToolbarDropDownListToolbarDropDownList下拉式的工具列按鈕ToolbarLabelToolbarLabel只用來顯示文字的工具列按鈕ToolbarSeparatorToolbarSeparator分隔線ToolbarTextBoxToolbarTextBox輸入欄位ToolBar/ToolBarItem控制項(xiàng)的常用屬性ToolBar控制項(xiàng)的常用屬性ItemsDefaultStyleHoverStyleSelectedStyleOrientationAutoPostBackToolBarItem控制項(xiàng)的常用屬性AutoPostBackImageUrlToolTipTextID為ToolBar控制項(xiàng)加入按鈕ToolBar控制項(xiàng)的常用事件ButtonClickCheckChange需把Toolbar的AutoPostBack屬性設(shè)定成True處理ToolBar控制項(xiàng)的ButtonClick事件PrivateSubToolbar1_ButtonClick(ByValSenderAsObject,_

ByValeAsSystem.EventArgs)

DimbtnAsToolbarItem=CType(sender,ToolbarItem);SelectCasebtn.ID case"NormalButton": DimtlbTextControlAsToolbarTextBox=_ CType(Toolbar1.Items(X),ToolbarTextBox); DimtlbDropDownListAsToolbarDropDownList=_ CType(Toolbar1.Items(Y),ToolbarDropDownList); …. EndSelectEndSub處理ToolBar控制項(xiàng)的CheckChange事件PrivateSubToolbar1_CheckChange(ByValSenderAsObject,_ ByValeAsSystem.EventArgs)

DimbtnAsToolbarItem=CType(sender,ToolbarItem); SelectCasebtn.IDcase"CheckButton": IfCType(btn,ToolbarCheckButton).Selected

Then

Response.Write("CheckButtonSelected") EndIfcase"GroupCheck1": IfCType(btn,ToolbarCheckButton).SelectedThen Response.Write("GroupCheck1Selected") EndIf EndSelectEndSub使用ToolBar控制項(xiàng)的範(fàn)例(一)–排序1.不需要設(shè)定DataSource程式製作(一)ImportsMicrosoft.Web.UI.WebControls…PrivateSubPage_Load(..)HandlesMyBase.LoadIfNotIsPostBackThenSqlDataAdapter1.Fill(Ds1)

Session("Products")=Ds1DataGrid1.DataSource=Ds1.Tables("Products")DataGrid1.DataBind()

DimtlbDropDownListAsToolbarDropDownList=_ CType(Toolbar1.Items(1),ToolbarDropDownList)

ForEachdcAsDataColumnInDs1.Tables("Products").Columns

tlbDropDownList.Items.Add(dc.ColumnName)NextEndIfEndSub程式製作(二)PrivateSubToolbar1_ButtonClick(…)HandlesToolbar1.ButtonClickDimtbAsToolbarItem=CType(sender,ToolbarItem)

DimtbgAsToolbarCheckGroup=CType(Toolbar1.Items(2),_ ToolbarCheckGroup)DimtbSortFieldAsToolbarDropDownList=CType(Toolbar1.Items(1),_ ToolbarDropDownList)SelectCasetb.IDCase"Sort"

DimstrSortOrderAsString=IIf(tbg.Items(0).Selected,"Asc","Desc")Ds1=Session("Products")

DataView1.Table=Ds1.Tables("Products")DataView1.Sort=tbSortField.SelectedItem.Text&strSortOrderDataGrid1.DataSource=DataView1DataGrid1.DataBind()EndSelectEndSub使用ToolBar控制項(xiàng)的範(fàn)例(二)–搜尋程式製作(一)ImportsMicrosoft.Web.UI.WebControlsPrivateSubPage_Load(..)HandlesMyBase.LoadIfNotIsPostBackThenSqlDataAdapter1.Fill(Ds1)

Session("DataSet")=Ds1DataGrid1.DataBind()EndIfEndSubPrivateSubToolbar1_ButtonClick(..)HandlesToolbar1.ButtonClick

DimtbAsToolbarItem=CType(sender,ToolbarItem)SelectCasetb.ID …EndSelectEndSub程式製作(二)Case"Find"

DimtbTextAsToolbarTextBox=_ CType(Toolbar1.Items(1),ToolbarTextBox)Ds1=Session("DataSet")DataGrid1.DataBind()'清掉Item原有的BackColorDataView1.Table=Ds1.Tables("Customers")DataView1.Sort="CustomerID"

DimposAsInteger=DataView1.Find(tbText.Text)Ifpos<>-1Then DataGrid1.Items(pos).BackColor=Color.LimeGreenEndIf程式製作(二)Case"FindCountry"

DimtbCountryTextAsToolbarTextBox=_ CType(Toolbar1.Items(5),ToolbarTextBox)Ds1=Session("DataSet")DataGrid1.DataBind()'清掉Item原有的BackColorDataView1.Table=Ds1.Tables("Customers")DataView1.Sort="Country"

Dimdrv()AsDataRowView=_ DataView1.FindRows(tbCountryText.Text)

ForEachdvAsDataRowViewIndrvDataView1.Sort="CustomerID"DimposAsInteger=DataView1.Find(dv("CustomerID"))Ifpos<>-1ThenDataGrid1.Items(pos).BackColor=Color.LightBlueEndIfNext使用ToolBar控制項(xiàng)的範(fàn)例(三)–分頁(yè)1.設(shè)定分頁(yè)2.把PageStyle的Visible屬性設(shè)定成False程式製作(一)ImportsMicrosoft.Web.UI.WebControls…PrivateSubPage_Load(..)HandlesMyBase.LoadIfNotPage.IsPostBackThenSqlDataAdapter1.Fill(Ds1)SqlDataAdapter2.Fill(Ds1)

Session("DataSet")=Ds1DataGrid1.DataBind()EndIfEndSub程式製作(二)PrivateSubToolbar1_ButtonClick(…)HandlesToolbar1.ButtonClick

Ds1=Session("DataSet")DataGrid1.DataSource=Ds1.Tables("Products")DimbtnAsToolbarItem=CType(sender,ToolbarItem) Se