使用Javascript单击时禁用放置在ASP.NET模板内的Button

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 + "');");
}

但它不起作用。 我使用Firebug来检查浏览器呈现的页面，但是虽然源代码看起来很完美，但是在单击时不会执行 Javascript函数。

如果JavaScript函数替换我Validate(btnFinishId)与Validate()转而使用后面的代码中添加OnClientClick我写的：

 <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添加附加一个click事件。 然后，您可以使用css隐藏.net按钮。

在html按钮的click事件中，您可以使用.net按钮单击事件。

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