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按钮的点击事件中，您可以点击所有.net按钮事件。

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

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

2 个答案: