Question

我有一个带有按钮的转发器，可以将一些数据保存到数据库中。我的问题是有时候调用DB需要一点时间，用户有时会点击保存几次导致多个条目被添加到数据库。所以我的第一个想法是添加一个throbber并在单击时禁用该按钮。悸动者正在离开，但当按钮被禁用时，它会阻止对服务器的呼叫。所以我查看了this，但由于我有一堆不同的按钮（更新，添加，...），因此调用了一些不同的服务器端方法，所以我不能只发布__doPostBack($(button).attr('id'),'') 。所以我在想我可能需要做一个ajax调用，但我想知道是否还有其他想法。这是我的代码：onClientClick实际上是在服务器端设置的，但这基本上是做什么的。

中继器：

<div style="position: relative; float: left;">
      <asp:Button ID="btnSave" runat="server" Text="Assign" OnClientClick="return fnAssignedButtonPressed(this);", OnClick="btnSave_Click" />
</div>

Javscript ：

function fnAssignedButtonPressed(button) {
//validating inputs
var valid = true;

        if(valid)
        {
           $(button).attr('disabled', 'disabled');
           showWaitCursor(true);
           __doPostBack($(button).attr('id'),'');
        }
  return valid;
}

了Serverside ：

protected void btnSave_Click(object sender, EventArgs e)
{
 //save
 // This method doesn't call called when I disable the button!!
}

Answer 1

我最终做到了这一点，但我不知道我的感受......

function fnAssignedButtonPressed(button) 
{ 
//validating inputs 
var valid = true;
     if(valid)
     {
       showWaitCursor(true);
       //set a timeout and then disable the button, this prevents the user from click the button multiple times.
       // need the timeout bc when the button becomes disabled it prevents the onlick event from firing.
       setTimeout(function() {fnDisableButton(button)}, 1); 
    }
}

function fnDisableButton(button)
{
    $(button).attr('disabled', 'disabled');
}

Answer 2

根据您的情况，Ajax肯定是一个不错的选择。否则，您可以使用jquery的UI对话框显示请等待模式，例如：

$('<div class="dialog" title="Please Wait">Please wait while your request is processing</div>').dialog({
    modal: true,
    width: 350,
    open: function (event, ui) {
        $(".ui-dialog-titlebar-close").hide();
    },
});

服务器返回后，模态应自动消失，UI对话框的模态选项会使屏幕变灰，因此用户无法点击任何内容。

禁用按钮可防止单击事件到服务器

2 个答案: