如何使用 jQuery 禁用按钮，但在单击它后还运行服务器代码？答案

【问题标题】：How can I have a button be disabled with jQuery but also run server code once it's been clicked?如何使用 jQuery 禁用按钮，但在单击它后还运行服务器代码？
【发布时间】：2012-02-17 18:29:05
【问题描述】：

我有一个可以执行存储过程的按钮。单击它后，我希望将其禁用，以便用户无法多次单击它。但是，一旦单击它，我还想通过onclick 事件在服务器端运行一些 C#。截至目前，我所做的所有代码都是禁用该按钮，但它不会运行服务器端的东西。这可以实现吗？这是我的 jQuery：

 $("#btnGenerate").click(function () {
        $(this).attr("disabled", true).val("Generating...");
    });

【问题讨论】：

您是想只运行一些代码，还是希望它影响页面中的 html，例如将一些内容加载到 div 中？
我将在单击按钮时运行存储过程。我可能会稍微修改页面（可能会显示确认文本或其他内容），但此页面上不会显示数据（如果这是您所要求的）。
我只是问，因为我正在更改我的数据库中的一个标志，并希望动态地向用户显示它已经发生了。所以我在 div 上使用了 actionresult 和 javascript .load。我已经在这里发布了我的答案，它应该很好用。

标签： c# jquery asp.net

【解决方案1】：

您可以在隐藏/禁用按钮后立即对服务器进行 ajax 调用。

你可以这样做：

$("#btnGenerate").click(function () {  
    $(this).attr("disabled", true).val("Generating...");  
    // an ajax call to the server to call the stored procedure
    $.ajax({
         url: "CallStoredProcedure.aspx",
         context: $("#value"),
         success: function(){
                $(this).val("done!");
           }});  
    }

【讨论】：

【解决方案2】：

不要禁用按钮，只需删除点击事件处理程序。

$(this).unbind();

无论如何，这对用户来说可能不会那么烦人，因为这样他们仍然可以看到被点击的按钮，但没有意识到实际上没有发生任何事情。

然后只需在 unbind() 调用之后放置您需要触发服务器端代码的任何 AJAX 调用。

【讨论】：

【解决方案3】：

是的，可以实现。不过，您确实需要向服务器发送一些东西。那个代码在哪里？你应该这样做：

$("#btnGenerate").click(function () {

    // UPDATE THE BUTTON  
    $(this).val("Generating...");

    // PERFORM C# SERVER SIDE CODE

    // ON SERVER SIDE CODE SUCCESS, DISABLE THE BUTTON
    $(this).attr("disabled", true);

});

【讨论】：

我不确定 javascript 是如何处理这类事情的，但是如果用户在按钮被禁用之前快速单击了两次按钮，则队列中可能已经有另一个事件触发器导致服务器请求触发两次。

【解决方案4】：

如果您要更改页面上的任何内容，例如您提到的确认文本，那么您可以在您希望确认的位置创建一个 div

<div id="confirmmessage">

</div>

然后像这样设置你的javascript：

<script type="text/javascript">
   function dowork() {
        $("#confirmmessage").load('/home/myfunction');                        
    }       
</script>

然后在家庭控制器中：

public ActionResult myfunction()
        {
            //DO Some work here, then return the view below, with a pass or fail maybe? anything
            return PartialView("mymessage");
        }

最后一件事，创建一个名为“mymessage”的局部视图

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
 <h3>Work done!</h3>

这会将已完成的工作加载到您的确认消息 div 中.. 或者如果您喜欢未完成..

你可以将一个字符串传递给 actionresult，或者如果你想隐藏它们，可以在调用它之前设置一些会话变量

希望对您有所帮助。

马丁

【讨论】：

另外，只是想，您可以在加载时添加一些 javascript 到局部视图，以便在需要时再次启用按钮。

【解决方案5】：

在您的表单中添加Hidden Button。

标记

<asp:Button ID="Button1" 
    style="display:none;position:absolute;left:-1000px;width:0px" 
    runat="server" Text="Click me" OnClick="ClickIt"/>

protected void ClickIt(object sender, EventArgs e)
{

}

Disable your button 就像你已经在做的那样。

JavaScript

$("#btnGenerate").click(function () {
        $(this).attr("disabled", true).val("Generating...");
    });

现在，在单击原始按钮时执行隐藏按钮的单击。在隐藏按钮处理程序中移动您的代码。

JavaScript

$("#btnGenerate").click(function () {
        $(this).attr("disabled", true).val("Generating...");
        document.getElementById('<%= Button1.ClientID').click();
    });

最后，您可以在隐藏按钮的定义中再次启用您的按钮。希望对你有帮助

【讨论】：