JavaScriptを使用してクリックすると、ASP.NETテンプレート内に配置されたボタンを無効にします。

Question

ASP.NET Webフォームアプリケーションがあります。

私の目標は、複数の送信を避けるために、ユーザーのクリックに応じて送信ボタンbtnFinishを無効にすることです。

<asp:Button ID="btnFinish" runat="server" Text="Finish" UseSubmitBehavior="false" 
CausesValidation="true" CommandName="MoveComplete" CssClass="buttonStyle"/> 

のJavascript関数である：

function Validate(btnFinishId) { 

      btnObj = document.getElementById(btnFinishId) 

      if (Page_IsValid) { 
       btnObj.disabled = true 
      } 
      else { 
       alert('Page has some validation error'); 
       } 

      // this is to prevent the actual submit 
      e.preventDefault(); 

      return false; 
    }; 

btnFinishはASP.NETウィザードコントロールにFinishNavigationTemplate内に配置されます。 したがって、ランタイムエラーを避けるために、私は、プログラム制御のClientIDを取得し、ボタンのOnClientClickイベントに追加する必要があります。

Button btFinish = MyWizard.FindControl("FinishNavigationTemplateContainerID$btnFinish") as Button; 

if (btFinish != null){ 
    btFinish.Attributes.Add("onclientclick", "Validate('" + btFinish.ClientID + "');"); 
} 

をしかし、それは動作しません。ソースコードは、のJavascript機能がを実行しない]をクリックすると、完璧に見えるが、私は、ブラウザによってレンダリングされたページを確認してFirebugのを使用しますが。

私はValidate()でValidate(btnFinishId)を交換し、代わりに私が書くOnClientClickを追加するための背後にあるコードを使用してのJavascriptを機能にした場合：

<asp:Button OnClientClick="Validate();" "ID="btnFinish" runat="server" Text="Finish" UseSubmitBehavior="false" 
    CausesValidation="true" CommandName="MoveComplete" CssClass="buttonStyle"/> 

関数が実行されますが、もちろん、私がやりたいことはありませんボタンIDがないためです。誰にでも解決策がありますか？

Answer 1

あなたは正しい道を歩いています。

<script type="text/javascript"> 
    validate = function(btn){ 

     //trigger client-side validation 
     var valid = Page_ClientValidate(""); 

     //disable the button if the form is valid 
     btn.disabled = valid; 

     //trigger postback if the form is valid 
     //otherwise do nothing 
     return valid;       
    } 
</script> 
<asp:Button ID="btnFinish" runat="server" Text="Finish" OnClientClick="return validate(this);" OnClick="btnFinish_Click" ... /> 

それは一種の後方に見えますが、あなたはこのように機能を短縮することができます：：

<script type="text/javascript"> 
    validate = function(btn){ 
     btn.disabled = Page_ClientValidate("");       
     return btn.disabled;       
    } 
</script> 

Answer 2

一つの方法は、添付し、ページ上の通常のHTMLボタンを作成、追加することで、この動作するはずのような何かjQueryによるクリックイベント。 その後、cssを使用して.netボタンを非表示にすることができます。

html buttomのclickイベントでは、すべての.netボタンclickイベントが可能です。

$("#yourbutton").trigger("click");