ASP.NET中的Web控件介紹
一、HTML控件
就是我們通常的說的html語(yǔ)言標(biāo)記,這些語(yǔ)言標(biāo)記在已往的靜態(tài)頁(yè)面和其他網(wǎng)頁(yè)里存在,不能在服務(wù)器端控制的,只能在客戶端通過javascript等程序語(yǔ)言來控制。
<input type="button" id="btn" value="button"/>
二、HTML服務(wù)器控件
其實(shí)就是html控件的基礎(chǔ)上加上runat="server"所構(gòu)成的控件。它們的主要區(qū)別是運(yùn)行方式不同,html控件運(yùn)行在客戶端,而html服務(wù)器控件是運(yùn)行在服務(wù)器端的。
當(dāng)ASP.NET網(wǎng)頁(yè)執(zhí)行時(shí),會(huì)檢查標(biāo)簽有無(wú)runat屬性,如果標(biāo)簽沒有設(shè)定,那么Html標(biāo)簽就會(huì)被視為字符串,并被送到字符串流等待送到客戶端,客戶端的瀏覽器會(huì)對(duì)其進(jìn)行解釋;如果Html標(biāo)簽有設(shè)定runat="server" 屬性,Page對(duì)象會(huì)將該控件放入控制器,服務(wù)器端的代碼就能對(duì)其進(jìn)行控制,等到控制執(zhí)行完畢后再將Html服務(wù)器控件的執(zhí)行結(jié)果轉(zhuǎn)換成Html標(biāo)簽,然后當(dāng)成字符串流發(fā)送到客戶端進(jìn)行解釋,不能通過js來控制它。因?yàn)楫?dāng)控件屬性中有runat="server"時(shí),生成的html控件時(shí)name和id發(fā)生的變化。
HTML 服務(wù)器控件 (HTML server control)屬于 System.Web.UI.HtmlControls 命名空間的 ASP.NET 服務(wù)器控件。
<form runat="server"> <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" /> <input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /> <input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /> <input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /> <button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button> </form>
生成的html代碼:
當(dāng)html服務(wù)器控件在服務(wù)器端添加了服務(wù)器事件(onserverclick)后客戶端生成的代碼變?yōu)?onclick="_doPostBack()",實(shí)際上是調(diào)用腳本把整個(gè)窗體提交到服務(wù)器(如果沒有添件服務(wù)器事件而只是添加了runat="server"是不會(huì)發(fā)送到服務(wù)器端的)
<form> <input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /> <input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /> <input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" /> <input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /> <button id="button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button> </form>
JS腳本:
<script type="text/javascript"> <!-- var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } // --> </script>
HTML控件,如IMG的輸入按鈕等 的 onclick ( 客戶端 )和 onserverclick( 服務(wù)端 )事件,注意 runat="server"。此處的onclick先于onserverclick執(zhí)行。
三、Web服務(wù)器控件
也稱asp.net服務(wù)器控件,是Web Form編程的基本元素,也是asp.net所特有的。它會(huì)按照client的情況產(chǎn)生一個(gè)或者多個(gè)html控件,而不是直接描述html元素。
Web 服務(wù)器控件比 HTML 服務(wù)器控件更豐富、更抽象。Web 服務(wù)器控件在 asp.net 頁(yè)上有 asp 標(biāo)記前綴,例如 <asp:Button runat=“server” />。屬于 System.Web.UI.WebControls 命名空間的ASP.NET服務(wù)器控件。
<asp:Button ID="Button2" runat="server" Text="Button"/>
當(dāng)asp:button服務(wù)器按鈕通過生成的頁(yè)面后轉(zhuǎn)化成類型為submit類型的Client控件。
<input type="submit" name="Data$ctl03$button2" value="Button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />
Web服務(wù)器控件和html服務(wù)器控件的區(qū)別
1)、Asp.net服務(wù)器控件提供更加統(tǒng)一的編程接口,如每個(gè)Asp.net服務(wù)器控件都有Text屬性。
2)、隱藏客戶端的不同,這樣程序員可以把更多的精力放在業(yè)務(wù)上,而不用去考慮客戶端的瀏覽器是ie還是firefox,或者是移動(dòng)設(shè)備。
3)、Asp.net服務(wù)器控件可以保存狀態(tài)到ViewState里,這樣頁(yè)面在從客戶端回傳到服務(wù)器端或者從服務(wù)器端下載到客戶端的過程中都可以保存。
4)、事件處理模型不同,Html標(biāo)簽和Html服務(wù)器控件的事件處理都是在客戶端的頁(yè)面上,而Asp.net服務(wù)器控件的事件處理則是在服務(wù)器上。
WEB控件,如<asp:button> 按鈕等 的 onclientclick( 客戶端 ) 先于 onclick ( 服務(wù)端 )事件執(zhí)行。
總之:客戶端點(diǎn)擊事件先于服務(wù)器端點(diǎn)擊事件執(zhí)行。也就是說,先執(zhí)行客戶端的Javascript,然后到服務(wù)器端執(zhí)行服務(wù)器的相關(guān)代碼。
四、Web用戶控件
http://www.dbjr.com.cn/article/247144.htm
五、Web自定義控件
自定義控件需要定義一個(gè)直接或間接從Control類派生的類,并重寫Render方法。在.NET框架中,System.Web.UI.Control與System.Web.UI.WebControls.WebControl兩個(gè)類是服務(wù)器控件的基類,并且定義了所有服務(wù)器控件共有的屬性、方法和事件,其中最為重要的就是包括了控制控件執(zhí)行生命周期的方法和事件,以及ID等共有屬性。
1、用戶控件和自定義控件的異同
- 使用率
在選擇使用用戶控件和自定義控件時(shí),可以首先考慮使用率。如果開發(fā)的應(yīng)用程序只是需要小范圍的使用,則可以考慮用戶控件,而如果開發(fā)的自定義控件能夠在大部分的應(yīng)用程序中被應(yīng)用,則可以考慮自定義控件。 - 創(chuàng)建技術(shù)
用戶控件和自定義控件的創(chuàng)建技術(shù)是不相同的,并且用戶控件和自定義控件創(chuàng)建的難度也不相同,用戶控件是以.ascx形式聲明并創(chuàng)建的,開發(fā)過程也比較簡(jiǎn)單,并且有設(shè)計(jì)器提供設(shè)計(jì)支持,而自定義控件是從System.Web.UI.Control派生而來的,開發(fā)過程稍微復(fù)雜,也沒有設(shè)計(jì)器提供設(shè)計(jì)支持。 - 生成方式
用戶控件和自定義控件生成的方式不同,用戶控件是以.ascx的形式呈現(xiàn),而自定義控件是以DLL的形式呈現(xiàn),通過添加引用,自定義控件能夠在【工具箱】中顯式,能夠像服務(wù)器控件一樣拖動(dòng)到頁(yè)面,并且能夠通過編程開發(fā)增加自定義屬性。而用戶控件無(wú)法在工具箱顯示,也不能夠像自定義控件那樣增加自定義屬性。 - 性能
雖然用戶控件和自定義控件編寫的過程不同,也遵循不同的創(chuàng)建模型,但是用戶控件和自定義控件都是從System.Web.UI.Control直接或間接的派生的,在性能上沒有很大的差別,主要是因?yàn)楫?dāng)用戶控件在頁(yè)面中第一次使用時(shí),將作為普通的服務(wù)器控件被解析并編譯進(jìn)配件,第二次使用時(shí),就和其他編譯型控件一樣。
實(shí)現(xiàn)自定義控件,必須創(chuàng)建一個(gè)自定義控件,自定義控件將會(huì)編譯成DLL文件。
2、實(shí)現(xiàn)自定義控件
自定義控件創(chuàng)建完成后,會(huì)自動(dòng)生成一個(gè)類,并在類中生成相應(yīng)的方法,示例代碼如下所示。
開發(fā)人員可以在源代碼中編寫和添加屬性。當(dāng)需要呈現(xiàn)給HTML頁(yè)面輸出時(shí),只需要重寫RenderContents方法即可.
為了實(shí)現(xiàn)服務(wù)器控件的智能屬性配置,開發(fā)人員能夠在源代碼中編寫屬性。
[DefaultProperty("Text")] //聲明屬性 [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1>")] //設(shè)置控件格式 public class ServerControl1 : WebControl { [Bindable(true)] //設(shè)置是否支持綁定 [Category("Appearance")] //設(shè)置類別 [DefaultValue("")] //設(shè)置默認(rèn)值 [Localizable(true)] //設(shè)置是否支持本地化操作 public string Text //定義Text屬性 { get { String s = (String)ViewState["Text"]; return ((s == null) ? "[" + this.ID + "]" : s); } set { ViewState["Text"] = value; } } //為了實(shí)現(xiàn)服務(wù)器控件的智能屬性配置,開發(fā)人員能夠在源代碼中編寫屬性 public string GuoJingString //編寫屬性 { get { return (String)ViewState["GuoJingString"]; } set { ViewState["GuoJingString"] = value; } } protected override void RenderContents(HtmlTextWriter output) //頁(yè)面呈現(xiàn) { output.Write("定義的Text屬性的值為:" + Text); //輸出為頁(yè)面呈現(xiàn) } }
當(dāng)自定義控件編寫完畢后,需要在需要使用該控件的項(xiàng)目中添加引用。在工具欄中會(huì)呈現(xiàn)自定義控件,自定義控件呈現(xiàn)在工具箱之后,就可以直接拖動(dòng)自定義控件到頁(yè)面,并且配置相應(yīng)的屬性。
用戶拖動(dòng)自定義頁(yè)面到控件后,頁(yè)面會(huì)在頭部聲明自定義控件,生成相應(yīng)的自定義控件的HTML代碼。
向頁(yè)面注冊(cè)了自定義控件,自定義注冊(cè)完畢后,就能夠在頁(yè)面中使用該控件。
<%@ Register TagPrefix="MyControl" Namespace="ServerControl1" Assembly="ServerControl1" %> <form id="form1" runat="server"> <div> <MyControl:ServerControl1 ID="ServerControl11" runat="server" /> </div> </form>
3、復(fù)合自定義控件
復(fù)合自定義控件就是功能復(fù)雜的控件。編寫復(fù)合自定義控件有以下幾種方式:
- 創(chuàng)建用戶控件,并使用用戶控件封裝的用戶界面實(shí)現(xiàn)復(fù)合控件。
- 開發(fā)一個(gè)編譯控件,封裝一個(gè)按鈕控件和文本框控件,通過重寫Render方法呈現(xiàn)。
- 從現(xiàn)有的控件中派生出新控件。
- 從基本控件類之一派生來創(chuàng)建自定義控件。
通過編寫復(fù)合控件,能夠讓控件開發(fā)更加靈活,控件的使用人員也能夠更加方便的配置控件,
例如,重寫登錄控件,前臺(tái)頁(yè)面制作人員使用該控件時(shí),可以為控件配置驗(yàn)證等功能,方便前臺(tái)人員配置和使用。
1、ASP.NET登錄控件的開發(fā)
public class ServerControl1 : WebControl { //創(chuàng)建服務(wù)器控件 public TextBox NameTextBox = new TextBox(); //創(chuàng)建TextBox控件 public TextBox PasswordTextBox = new TextBox(); //創(chuàng)建密碼控件 public Button LoginButton = new Button(); //創(chuàng)建Button控件 [Bindable(true)] [Category("Appearance")] [DefaultValue("")] [Localizable(true)] public string LoignBackGroundColor //設(shè)置背景屬性 { get { return (String)ViewState["LoignBackGroundColor"]; } set { ViewState["LoignBackGroundColor"] = value; } } protected override void RenderContents(HtmlTextWriter output) //編寫頁(yè)面輸出 { output.RenderBeginTag(HtmlTextWriterTag.Div); //創(chuàng)建Div標(biāo)簽 output.RenderBeginTag(HtmlTextWriterTag.Tr); //創(chuàng)建Tr標(biāo)簽 NameTextBox.RenderControl(output); //添加控件 output.RenderBeginTag(HtmlTextWriterTag.Td); //創(chuàng)建Td標(biāo)簽 output.RenderBeginTag(HtmlTextWriterTag.Br); //創(chuàng)建Br標(biāo)簽 output.RenderBeginTag(HtmlTextWriterTag.Tr); //創(chuàng)建Tr標(biāo)簽 PasswordTextBox.RenderControl(output); //添加控件 output.RenderBeginTag(HtmlTextWriterTag.Td); //輸出Td標(biāo)簽 } public event EventHandler LoginClick; //聲明事件 public void Submit_Click(object sender, EventArgs e) { EventArgs arg = new EventArgs(); //編寫按鈕事件方法 if (LoginClick != null) //判斷事件冒泡是否為空 { LoginClick(LoginButton, arg); //觸發(fā)事件 } } }
2、ASP.NET登錄控件的使用
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_11_4._Default" %> <%@ Register TagPrefix="Sample" TagName="Login" Src="~/LoginForm.ascx" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>無(wú)標(biāo)題頁(yè)</title> </head> <body> <form id="form1" runat="server"> <div> <Sample:Login runat="server" id="Login1"></Sample:Login> </div> </form> </body> </html>
4、自定義分頁(yè)控件
[DefaultProperty("Text")] //默認(rèn)屬性 [ToolboxData("<{0}:MyPager runat=server></{0}:MyPager>")] //控件呈現(xiàn)代碼 public class MyPager : WebControl { [Bindable(true)] [Category("Appearance")] [DefaultValue("")] [Localizable(true)] public string Text //Text文本屬性 { get { String s = (String)ViewState["Text"]; return ((s == null) ? "[" + this.ID + "]" : s); } set { ViewState["Text"] = value; } } [Bindable(true)] [Category("Data")] [DefaultValue(10)] [Localizable(true)] public int PageSize //分頁(yè)數(shù)屬性 { get { try { Int32 s = (Int32)ViewState["PageSize"]; return ((s.ToString() == null) ? 10 : s); } catch { return 10; } } set { ViewState["PageSize"] = value; } } [Bindable(true)] [Category("Data")] [DefaultValue("")] [Localizable(true)] public string IndexPage //索引頁(yè)面 { get { String s = (String)ViewState["IndexPage"]; return ((s == null) ? ("none") : s); } set { ViewState["IndexPage"] = value; } } [Bindable(true)] [Category("Data")] [DefaultValue("")] [Localizable(true)] public int Rows //總行數(shù) { get { int s = (int)ViewState["Rows"]; return ((s.ToString() == null) ? 0 : s); } set { ViewState["Rows"] = value; } } protected override void RenderContents(HtmlTextWriter output) { string html = ""; int pageCount = 0; //分頁(yè)數(shù) if (Rows % PageSize > 0) //開始分頁(yè) { pageCount = (Rows / PageSize) + 1; //分頁(yè)計(jì)算 } else { pageCount = Rows / PageSize; } html += "<table><tr>"; for (int i = 0; i < pageCount; i++) { if (IndexPage != i.ToString()) //如果查看的是當(dāng)前頁(yè)面,則高亮顯示 { html += "<td style=\"padding:5px 5px 5px 5px;background:#f0f0f0;border:1px dashed #ccc;\">"; //呈現(xiàn)相應(yīng)的HTML } else { html += "<td style=\"padding:5px 5px 5px 5px;background:Gray;border:1px dashed #ccc;\">"; //呈現(xiàn)相應(yīng)的HTML } html += "<a href=\"pages.aspx?page=" + i + "\">" + i + "</a>"; html += "</td>"; //完成HTML } html += "</tr></table>"; output.Write(html); //頁(yè)面呈現(xiàn) } }
何其他的應(yīng)用程序如果需要使用分頁(yè)控件,則需要首先添加引用。
使用自定義控件并配置相應(yīng)的屬性:
<%@ Register TagPrefix="MyControl" Namespace="MyPager" Assembly="MyPager" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>無(wú)標(biāo)題頁(yè)</title> </head> <body> <form id="form1" runat="server"> <div> <MyControl:MyPager ID="MyPager1" runat="server" DataBase="mytable" IndexPage="1" PageName="default.aspx" PageSize="1" Pwd="Bbg0123456#" Table="mynews" Uid="sa" /> </div> </form> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ASP.NET中CheckBoxList復(fù)選框列表控件詳細(xì)使用方法
本文主要介紹CheckBoxList幾種常見的用法,并做出范例演示供大家參考,希望對(duì)學(xué)習(xí)asp.net的朋友有所幫助。2016-04-04.NET?Core使用CZGL.SystemInfo庫(kù)獲取主機(jī)運(yùn)行資源
這篇文章介紹了.NET?Core使用CZGL.SystemInfo庫(kù)獲取主機(jī)運(yùn)行資源的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-01-01詳解ABP框架中的數(shù)據(jù)過濾器與數(shù)據(jù)傳輸對(duì)象的使用
ABP框架是一個(gè)基于ASP.NET的Web開發(fā)框架,這里我們來詳解ABP框架中的數(shù)據(jù)過濾器與數(shù)據(jù)傳輸對(duì)象的使用,需要的朋友可以參考下2016-06-06詳解.net循環(huán)、邏輯語(yǔ)句塊(基礎(chǔ)知識(shí))
本篇是介紹.NET 基礎(chǔ)部分,主要簡(jiǎn)述循環(huán),判斷,對(duì)初學(xué)者具有很好的參考借鑒價(jià)值,下面就跟小編一起來看下吧2016-12-12