1. 程式人生 > >ASP.NET多個Button的頁面,回車執行按鈕事件(轉)

ASP.NET多個Button的頁面,回車執行按鈕事件(轉)

主要有兩種實現方法分別是:JavaScript的方法與Panel的方法

一、JavaScript的方法

①單輸入框(文字框)單按鈕的實現方法

  以下功能實現:在輸入框中輸入內容之後,按回車鍵就執行按鈕事件!
  在.aspx頁面的Head區域中新增:

複製程式碼
<SCRIPT LANGUAGE="javacript">
  function SubmitKeyClick(button)
  {   
   if (event.keyCode == 13)
   {       
    event.keyCode=9;
    event.returnValue = false;     document.all[按鈕ID].click();    }   } </SCRIPT>
複製程式碼

  ②多輸入框(文字框)多按鈕的實現方法
  以下功能實現,在不同的輸入框中輸入內容後,按回車鍵執行不同的按鈕事件!
  在.aspx頁面的Head區域中新增:

複製程式碼
<script   type="text/javascript">  
      function   BtnClick(obj)  
           {  
                 if(event.keyCode==13)  
                 {  
                       if(obj==document.all.文字框ID) { document.all.Button1.click(); } else { document.all.Button2.focus(); document.all.Button2.click(); } } } </script> 
複製程式碼

  在頁面的cs檔案的Load中新增:

this.文字框ID.Attributes.Add("onkeydown","BtnClick(this);");  
this.另外的文字框ID.Attributes.Add("onkeydown", "BtnClick(this);");

二、使用Panel控制元件

在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所引起的一些困難都可以迎刃而解。

 

原文:https://www.cnblogs.com/leoreey/p/5630582.html

主要有兩種實現方法分別是:JavaScript的方法與Panel的方法

一、JavaScript的方法

①單輸入框(文字框)單按鈕的實現方法

  以下功能實現:在輸入框中輸入內容之後,按回車鍵就執行按鈕事件!
  在.aspx頁面的Head區域中新增:

複製程式碼
<SCRIPT LANGUAGE="javacript">
  function SubmitKeyClick(button)
  {   
   if (event.keyCode == 13)
   {       
    event.keyCode=9;
    event.returnValue = false;     document.all[按鈕ID].click();    }   } </SCRIPT>
複製程式碼

  ②多輸入框(文字框)多按鈕的實現方法
  以下功能實現,在不同的輸入框中輸入內容後,按回車鍵執行不同的按鈕事件!
  在.aspx頁面的Head區域中新增:

複製程式碼
<script   type="text/javascript">  
      function   BtnClick(obj)  
           {  
                 if(event.keyCode==13)  
                 {  
                       if(obj==document.all.文字框ID) { document.all.Button1.click(); } else { document.all.Button2.focus(); document.all.Button2.click(); } } } </script> 
複製程式碼

  在頁面的cs檔案的Load中新增:

this.文字框ID.Attributes.Add("onkeydown","BtnClick(this);");  
this.另外的文字框ID.Attributes.Add("onkeydown", "BtnClick(this);");

二、使用Panel控制元件

在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所引起的一些困難都可以迎刃而解。

 

原文:https://www.cnblogs.com/leoreey/p/5630582.html