ASP.NET中的Web控件介紹
一、HTML控件
就是我們通常的說的html語言標(biāo)記，這些語言標(biāo)記在已往的靜態(tài)頁面和其他網(wǎng)頁里存在,不能在服務(wù)器端控制的，只能在客戶端通過javascript等程序語言來控制。
<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)頁執(zhí)行時(shí)，會(huì)檢查標(biāo)簽有無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 頁上有 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ù)器按鈕通過生成的頁面后轉(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里，這樣頁面在從客戶端回傳到服務(wù)器端或者從服務(wù)器端下載到客戶端的過程中都可以保存。
4)、事件處理模型不同，Html標(biāo)簽和Html服務(wù)器控件的事件處理都是在客戶端的頁面上，而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://dhdzp.com/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)到頁面，并且能夠通過編程開發(fā)增加自定義屬性。而用戶控件無法在工具箱顯示，也不能夠像自定義控件那樣增加自定義屬性。 - 性能
雖然用戶控件和自定義控件編寫的過程不同，也遵循不同的創(chuàng)建模型，但是用戶控件和自定義控件都是從System.Web.UI.Control直接或間接的派生的，在性能上沒有很大的差別，主要是因?yàn)楫?dāng)用戶控件在頁面中第一次使用時(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頁面輸出時(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) //頁面呈現(xiàn)
{
output.Write("定義的Text屬性的值為:" + Text); //輸出為頁面呈現(xiàn)
}
}當(dāng)自定義控件編寫完畢后，需要在需要使用該控件的項(xiàng)目中添加引用。在工具欄中會(huì)呈現(xiàn)自定義控件，自定義控件呈現(xiàn)在工具箱之后，就可以直接拖動(dòng)自定義控件到頁面，并且配置相應(yīng)的屬性。
用戶拖動(dòng)自定義頁面到控件后，頁面會(huì)在頭部聲明自定義控件，生成相應(yīng)的自定義控件的HTML代碼。
向頁面注冊(cè)了自定義控件，自定義注冊(cè)完畢后，就能夠在頁面中使用該控件。
<%@ 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)頁面制作人員使用該控件時(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) //編寫頁面輸出
{
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>無標(biāo)題頁</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<Sample:Login runat="server" id="Login1"></Sample:Login>
</div>
</form>
</body>
</html>4、自定義分頁控件
[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 //分頁數(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 //索引頁面
{
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; //分頁數(shù)
if (Rows % PageSize > 0) //開始分頁
{
pageCount = (Rows / PageSize) + 1; //分頁計(jì)算
}
else
{
pageCount = Rows / PageSize;
}
html += "<table><tr>";
for (int i = 0; i < pageCount; i++)
{
if (IndexPage != i.ToString()) //如果查看的是當(dāng)前頁面，則高亮顯示
{
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); //頁面呈現(xiàn)
}
}何其他的應(yīng)用程序如果需要使用分頁控件，則需要首先添加引用。
使用自定義控件并配置相應(yīng)的屬性：
<%@ Register TagPrefix="MyControl" Namespace="MyPager" Assembly="MyPager" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標(biāo)題頁</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)文章
方法(Method)是一個(gè)已命名的語句集。如果以前使用過其他編程語言，如C或Visual Basic等，就可以將方法視為函數(shù)或者子程序相似的東西。每個(gè)方法都有一個(gè)名稱和一個(gè)主體。方法名應(yīng)該是一個(gè)有意義的標(biāo)識(shí)符，它應(yīng)描述出方法的用途(如CalculateIncomeTax)。方法主體包含了調(diào)用方法時(shí)實(shí)際執(zhí)行的語句。你可以為大多數(shù)方法提供一些數(shù)據(jù)來進(jìn)行處理，并讓它返回一些信息(通常是處理結(jié)果)。方法是一種基本的、功能強(qiáng)大的編程機(jī)制。2008-04-04
.Net中的不可變集合（Immutable Collection）程序集簡(jiǎn)介
這篇文章介紹了.Net中的不可變集合（Immutable Collection）程序集，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章介紹了ASP.NET中使用用戶控件的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
這篇文章介紹了ASP.NET?Core?Web?API，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
在了解Asp.net請(qǐng)求處理流程的過程中，個(gè)人認(rèn)為有必要從源代碼的角度來了解asp.net管道是怎么實(shí)現(xiàn)的,需要的朋友可以參考下2012-11-11
WPF框架Prism中ViewModelLocator用法介紹
這篇文章介紹了WPF框架Prism中ViewModelLocator的用法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-02-02
詳解ABP框架中領(lǐng)域?qū)拥念I(lǐng)域事件Domain events
ABP是基于ASP.NET框架之上的Web開發(fā)框架(GitHub：https://github.com/aspnetboilerplate),這篇我們來詳解ABP框架中領(lǐng)域?qū)拥念I(lǐng)域事件Domain events,需要的朋友可以參考下2016-06-06
本文詳細(xì)講解了MSMQ微軟消息隊(duì)列，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
檢測(cè)含有中文字符串的實(shí)際長(zhǎng)度
檢測(cè)含有中文字符串的實(shí)際長(zhǎng)度...2006-08-08
部署ASP.NET?Core程序到Windows系統(tǒng)
這篇文章介紹了部署ASP.NET?Core程序到Windows系統(tǒng)的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03