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

Disable Button placed inside an ASP.NET template upon click using Javascript

本文关键字：NET ASP 按钮 单击 Javascript 使用      更新时间：2023-09-26

I havea an ASP.NET Web Forms application.

我的目标是在用户单击时禁用提交按钮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。有人有解决方案吗？

你走在正确的轨道上。这样的事情应该有效：

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

一种方法是在页面上创建一个普通的HTML按钮，使用jQuery添加附加点击事件。然后，可以使用 css 隐藏 .net 按钮。

在 html buttom 的单击事件中，可以执行所有 .net 按钮单击事件。

$("#yourbutton").trigger("click");
相关文章：