當前位置:編程學習大全網 - 編程語言 - 網頁的那個按鈕怎麽做

網頁的那個按鈕怎麽做

那個Button是控件,

妳可以添加HTMLbutton控件,<input type="button" id="btn" value="button"/>

或者服務器控件

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

或者妳可以通過壹些網頁編輯軟件DW,或者微軟的visual studio在設計模式下直接拖到妳想要的位置

下面是壹些參考

asp.net之所以現在開發方便和快捷,關鍵是它有壹組強大的控件庫,包括web服務器控件,web用戶控件,web自定義控件,html服務器控件和html控件等。這裏我主要說說html控件、html服務器控件和web服務器控件的區別。

1、html控件:就是我們通常的說的html語言標記,這些語言標記在已往的靜態頁面和其他網頁裏存在,不能在服務器端控制的,只能在客戶端通過javascript和vbscript等程序語言來控制。<input type="button" id="btn" value="button"/>

2、html服務器控件:其實就是html控件的基礎上加上runat="server"所構成的控件.它們的註意區別是運行方式不同,html控件運行在客戶端,而html服務器控件是運行在服務器端的。參考其他資料是這樣說的: 當ASP.NET 網頁執行時,會檢查標註有無runat 屬性,如果標註沒有設定,那麽Html標註就會被視為符串,並被送到字符串流等待送到客戶端,客戶端的瀏覽器會對其進行解釋;如果Html標註有設定runat="server" 屬性,Page 對象會將該控件放入控制器,服務器端的代碼就能對其進行控制,等到控制執行完畢後再將Html服務器控件的執行結果轉換成Html標註,然後當成字符串流發送到客戶端進行解釋<input id="Button" type="button" value="button" runat="server" />

3、web服務器控件:也稱asp.net服務器控件,是Web Form編程的基本元素,也是asp.net所特有的。它會按照client的情況產生壹個或者多個html控件,而不是直接描述html元素。如: <asp:Button ID="Button2" runat="server" Text="Button"/>那麽它和html服務器控件有什麽區別呢?參照其他網頁的資料看法如下:

1)、Asp.net服務器控件提供更加統壹的編程接口,如每個Asp.net服務器控件都有Text屬性。

2)、隱藏客戶端的不同,這樣程序員可以把更多的精力放在業務上,而不用去考慮客戶端的瀏覽器是ie還是firefox,或者是移動設備。

3)、Asp.net服務器控件可以保存狀態到ViewState裏,這樣頁面在從客戶端回傳到服務器端或者從服務器端下載到客戶端的過程中都可以保存。

4)、事件處理模型不同,Html標註和Html服務器控件的事件處理都是在客戶端的頁面上,而Asp.net服務器控件則是在服務器上,舉例來說:

<input id="Button4" type="button" value="button" runat="server"/>是Html服務器控件,此時我們點擊此按鈕,頁面不會回傳到服務器端,原因是我們沒有為其定義鼠標點擊事件。

<input id="Button4" type="button" value="button" runat="server" onserverclick="test" />我們為Html服務器控件添加了壹個onserverclick事件,點擊此按鈕頁面會發回服務器端,並執行test(object sender, EventArgs e)方法。

<asp:Button ID="Button2" runat="server" Text="Button" />是Asp.net服務器控件,並且我們沒有為其定義click,但是我們點擊時,頁面也會發回到服務器端。

由此可見:Html標註和Html服務器控件的事件是由頁面來觸發的,而Asp.net服務器控件則是由頁面把Form發回到服務器端,由服務器來處理。

4、下面我就結合我自己的測試來說明問題:

這段代碼是我放在repeat中的模板裏的:其中DeleteCheck是壹個js腳本函數,註意是用於是否發送到服務器端的,這裏就不展示腳本代碼了。

<input runat="server" type="button" id="delete" value="Server button" />

<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>

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

展現出來的html代碼如下:

<input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" />

<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />

<input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" / >

<input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />

<button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

<input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />

可以看出以下幾點:

1、當控件屬性中有runat="server"時,生成的html控件時name和id發生的變化(.net Framework)。

2、當asp:button服務器按鈕通過生成的頁面後轉化成類型為submit類型的Client控件。

3、當控件是html控件時通過生成的頁面和原來的html代碼完全壹樣(理由上面已經說名)。

另外我還測試了把這段代碼直接放到form標記中(不放到其他子標記中)如:

<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>

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" />

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>直接放到form標記中生成的html代碼

<script type="text/javascript">

<!--

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

i f (!theForm.onsubmit (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

}

// -->

</script>

<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>

<input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" />

<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

這裏有可以看出幾點:

1、當html服務器控件在服務器端添加了服務器事件後生成的代碼變為:onclick="_doPostBack()",實際上是調用腳本把整個窗體提交到服務器(如果沒有添件服務器事件而只是添加了runat="server"是不會發送到服務器端的)這裏註意如果要在html服務器控件中添加壹個客戶端事件如上面的 <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />變成 <input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" />那樣生成的html代碼變成 <input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />提示有腳本錯誤原因是onclick事件執行了2個腳本且書寫的格式不正確。onclick="return DeleteCheck(this);_doPostBack()"這樣的話就只能執行第壹個函數而第二個函數就不能執行了(return).如果用onclick="return DeleteCheck(this),_doPostback()"是指2個函數同時都要執行沒有影響(相當於壹條語句)。在我的壹個項目中需要對於控件進行區分總結,我在網上找了找加上自己的實際測試總結如下:

asp.net之所以現在開發方便和快捷,關鍵是它有壹組強大的控件庫,包括web服務器控件,web用戶控件,web自定義控件,html服務器控件和html控件等。這裏我主要說說html控件、html服務器控件和web服務器控件的區別。

1、html控件:就是我們通常的說的html語言標記,這些語言標記在已往的靜態頁面和其他網頁裏存在,不能在服務器端控制的,只能在客戶端通過javascript和vbscript等程序語言來控制。<input type="button" id="btn" value="button"/>

2、html服務器控件:其實就是html控件的基礎上加上runat="server"所構成的控件.它們的註意區別是運行方式不同,html控件運行在客戶端,而html服務器控件是運行在服務器端的。參考其他資料是這樣說的: 當ASP.NET 網頁執行時,會檢查標註有無runat 屬性,如果標註沒有設定,那麽Html標註就會被視為字符串,並被送到字符串流等待送到客戶端,客戶端的瀏覽器會對其進行解釋;如果Html標註有設定runat="server" 屬性,Page 對象會將該控件放入控制器,服務器端的代碼就能對其進行控制,等到控制執行完畢後再將Html服務器控件的執行結果轉換成Html標註,然後當成字符串流發送到客戶端進行解釋<input id="Button" type="button" value="button" runat="server" />

3、web服務器控件:也稱asp.net服務器控件,是Web Form編程的基本元素,也是asp.net所特有的。它會按照client的情況產生壹個或者多個html控件,而不是直接描述html元素。如: <asp:Button ID="Button2" runat="server" Text="Button"/>那麽它和html服務器控件有什麽區別呢?參照其他網頁的資料看法如下:

1)、 Asp.net服務器控件提供更加統壹的編程接口,如每個Asp.net服務器控件都有Text屬性。

2)、 隱藏客戶端的不同,這樣程序員可以把更多的精力放在業務上,而不用去考慮客戶端的瀏覽器是ie還是firefox,或者是移動設備。

3)、 Asp.net服務器控件可以保存狀態到ViewState裏,這樣頁面在從客戶端回傳到服務器端或者從服務器端下載到客戶端的過程中都可以保存。

4)、 事件處理模型不同,Html標註和Html服務器控件的事件處理都是在客戶端的頁面上,而Asp.net服務器控件則是在服務器上,舉例來說:

<input id="Button4" type="button" value="button" runat="server"/>是Html服務器控件,此時我們點擊此按鈕,頁面不會回傳到服務器端,原因是我們沒有為其定義鼠標點擊事件。

<input id="Button4" type="button" value="button" runat="server" onserverclick="test" />我們為Html服務器控件添加了壹個onserverclick事件,點擊此按鈕頁面會發回服務器端,並執行test(object sender, EventArgs e)方法。

<asp:Button ID="Button2" runat="server" Text="Button" />是Asp.net服務器控件,並且我們沒有為其定義click,但是我們點擊時,頁面也會發回到服務器端。

由此可見:Html標註和Html服務器控件的事件是由頁面來觸發的,而Asp.net服務器控件則是由頁面把Form發回到服務器端,由服務器來處理。

4、下面我就結合我自己的測試來說明問題:

這段代碼是我放在repeat中的模板裏的:其中DeleteCheck是壹個js腳本函數,註意是用於是否發送到服務器端的,這裏就不展示腳本代碼了。

<input runat="server" type="button" id="delete" value="Server button" />

<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>

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" />

展現出來的html代碼如下:

<input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" />

<input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" />

<input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" / >

<input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" />

<button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button">Button-Button</button>

<input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" />

可以看出以下幾點:

1、當控件屬性中有runat="server"時,生成的html控件時name和id發生的變化(.net Framework)。

2、當asp:button服務器按鈕通過生成的頁面後轉化成類型為submit類型的Client控件。

3、當控件是html控件時通過生成的頁面和原來的html代碼完全壹樣(理由上面已經說名)。

另外我還測試了把這段代碼直接放到form標記中(不放到其他子標記中)

如: <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>

<asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" />

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>直接放到form標記中生成的html代碼

<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>

<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>

<input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" />

<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

這裏有可以看出幾點:

1、當html服務器控件在服務器端添加了服務器事件後生成的代碼變為:onclick="_doPostBack()",實際上是調用腳本把整個窗體提交到服務器(如果沒有添件服務器事件而只是添加了runat="server"是不會發送到服務器端的)這裏註意如果要在html服務器控件中添加壹個客戶端事件如上面的 <input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" />

變成 <input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" />

那樣生成的html代碼變成 <input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" />提示有腳本錯誤原因是onclick事件執行了2個腳本且書寫的格式不正確。onclick="return DeleteCheck(this);_doPostBack()"這樣的話就只能執行第壹個函數而第二個函數就不能執行了(return).如果用onclick="return DeleteCheck(this),_doPostback()"是指2個函數同時都要執行沒有影響(相當於壹條語句)。

2、asp:button中的onclientclick事件生成後就變成了onclick事件了,類型變成了type="submit".然而服務器事件的onclick我想是通過發送到服務器端執行的。

3、LinkButton不定義onclick事件,它會自動的生成下面代碼發送到服務器端。 href="javascript:__doPostBack('LinkButton1',' ')"

4、asp:button中的onclientclick事件生成後就變成了onclick事件了,類型變成了type="submit".然而服務器事件的onclick我想是通過發送到服務器端執行的。

  • 上一篇:R語言學習筆記之聚類分析
  • 下一篇:嵌入式軟件開發工資怎麽樣?二本畢業好找工作嗎?
  • copyright 2024編程學習大全網