Asp.Net Form表單控制元件的回車預設事件

阿新 • • 發佈：2019-01-18

在WEB頁面上，通常SUBMIT型別的按鈕會被預設指派為所在FORM表單的提交按鈕

在做ASP.net WEB應用的時候，常常遇到會在同一個頁面裡新增多個按鈕，而每個按鈕肯定都會觸發頁面回送事件。

在ASP.NET中，只能指定一個帶有runat="server"的FORM表單，因此，這個表單會指派哪個按鈕為預設提交按鈕呢？

不做任何處理的情況下是很難控制的，例如在同一個頁面裡做了N個搜尋框，設計上理想的思路是在某一輸入框輸入關鍵字後，使用者按ENTER鍵，執行當前輸入的輸入框對應的提交按鈕，但是，實際上往往事與願違。無論怎麼提交，總是會只執行某一個按鈕事件。

如果指定Form的預設按鈕，可以指定Form的DefaultButton屬性值為一個按鈕的ID。但這樣下來，回車時就永遠執行這個按鈕，其它按鈕無法被回車觸發。

網上很多方法都是使用JAVASCRIPT來進行判斷，在輸入框中加入KEYPRESS之類的事件，然後檢查eventCode，如果是回車鍵，那麼就指定執行某一個按鈕。

這個方法不是不行，但是，並不好維護，而且在處理複雜的邏輯時，往往不好控制。

其實，ASP.NET給出了很好的解決方案，只是通常不被人注意。

首先，遮蔽瀏覽器提交模式，也就是說，FORM不再預設指定一個ENTER提交的按鈕

方法是將控制元件button的UseSubmitBehavior設定為false（LinkButton和ImageButton沒有這個屬性，不必設定），這樣這個按鈕就不會接受回車提交，這樣就不會出現使用者焦點在頁面某處聚焦時按回車提交的情況。

為什麼會這樣呢？檢視頁面原始檔我們會發現本來ASP.NET的BUTTON伺服器控制元件在傳送到客戶端後type="submit"，但這時UseSubmitBehavior設定為false後，type="button" ，而且多了一個onclick事件，內容是"javascript:__doPostBack('Button1','')" id="Button1"，這樣，就說明，這個按鈕不再是FORM的提交按鈕了，而只是一個普通按鈕，要提交頁面必須執行click事件，所以怎麼點回車，也不會執行這個按鈕的提交事件。

剛才只是第一步，阻止了預設的提交。但是，我們要的效果是回車可以提交啊。只是設定這一個屬性當然無法達到我們想要的效果。

接下來，我們要了解Panel控制元件。

其實Panel控制元件是非常有用的，他是一個容器，在ASP.NET的Panel控制元件中有一個屬性 DefaultButton， 這個屬性在ASP.NET的Form控制元件中也有（前有敘述）。

Panel是一個特殊的控制元件 MSDN上的說明是：使用Panel 控制元件來組織 Form、另一 Panel 或模板中的內容和控制元件。

也就是說Panel是ASP.NET對Form的一個補充，可以給表單分割槽域的控制元件，這也是為什麼ASP.NET AJAX容器使用該控制元件的原因。

我們都知道，ASPX只能有一個runat=“server”的FORM表單，那麼要進行細緻，具體的FORM操作怎麼辦，那麼就得靠Panel控制元件

這裡，我們就會用到Panel的這個功能

將一組輸入框和按鈕放在一個Panel中，指定該Panel的DefaultButton屬性為按鈕ID，這樣，當用戶焦點處於這個Panel內的某一控制元件時，點選回車就會執行這個Panel的DefaultButton所指定的按鈕。

Panel是Form的補充控制，可以通過使用Panel對錶單進行更多的操作，這樣，ASP.NET只能擁有一個Form所引起的一些困難都可以迎刃而解。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=GBK">
 5     <title>submit例子 - aspxhome.com</title>
 6 </head>
 7 <body>
 8     <h1>本demo演示在文字框中按enter鍵是否觸發提交表單</h1>
 9     <h2>預設情況下，一個文字框的時候，提交，不管按鈕type是submit還是button</h2>
10     <form action="http://www.csdn.net">
11         <input type="text">
12         <input type="button" value="提交">
13     </form>
14     <h2>一個文字框的時候怎麼才能做到不提交，方法是加一個隱藏掉的文字框</h2>
15     <form action="http://www.csdn.net">
16         <input type="text">
17         <input type="text" style="display:none">
18         <input type="button" value="提交">
19     </form>
20     <h2>只要有type為submit的按鈕存在，一個文字框還是多個文字框都提交</h2>
21     <form action="http://www.csdn.net">
22         <input type="text">
23         <input type="submit" value="提交">
24     </form>
25     <h2>只要有type為submit的按鈕存在，一個文字框還是多個文字框都提交</h2>
26     <form action="http://www.csdn.net">
27         <input type="text">
28         <input type="text">
29         <input type="submit" value="提交">
30     </form>
31     <h2>多個文字框的時候，不提交，用type為button的按鈕就行啦</h2>
32     <form action="http://www.csdn.net">
33         <input type="text">
34         <input type="text">
35         <input type="button" value="提交">
36     </form>
37     <h2>用button元素時，FX和IE下有不同的表現</h2>
38     <form action="http://www.csdn.net">
39         <input type="text">
40         <input type="text">
41         <button>提交</button>
42     </form>
43     <h2>radio和checkbox在FX下也會觸發提交表單，在IE下不會</h2>
44     <form action="http://www.csdn.net">
45         <input type="text">
46         <input type="radio" name="a">
47         <input type="checkbox" name="b">
48         <input type="checkbox" name="c">
49         <input type="button" value="提交">
50     </form>
51     <h2>type為image的按鈕，等同於type為submit的效果</h2>
52     <form action="http://www.csdn.net">
53         <input type="text">
54         <input type="text">
55         <input type="image" src="/images/logo.gif">
56     </form>
57 </body>
58 </html>

Asp.Net Form表單控制元件的回車預設事件

Asp.Net Form表單控制元件的回車預設事件

form表單控制元件向後臺傳遞陣列

asp.net中的html控制元件點選事件與伺服器控制元件點選事件的不同

C# 新增Excel表單控制元件（Form Controls）

Vue之表單控制元件繫結

asp.net 如何獲取html控制元件select

不使用ASP.NET中的伺服器控制元件將如何上傳檔案？

ASP.NET遇到問題---Loginview控制元件

【ASP.NET】——WEB伺服器控制元件

第三章表單 3-4 表單控制元件

Vue 表單控制元件

細說 Angular 的自定義表單控制元件（贊，實用)

Vue 的（v-model）表單控制元件繫結

HTML5（一）語義化標籤、新增表單控制元件

ASP.NET關於使用CreateUserWizard控制元件實現註冊需注意的要點

asp.net 自定義伺服器控制元件屬性 [Bindable(true)]...

vuejs表單控制元件繫結

js 動態新增多表單控制元件 div

HTML常用行標籤和表單控制元件

ASP.NET 中的資料來源控制元件

Asp.Net Form表單控制元件的回車預設事件

相關推薦