提交按钮 onclick javascript 呈现从 asp.net 2.0 到 4.0 的差异答案

【问题标题】：submit button onclick javascript rendering diffrences from asp.net 2.0 to 4.0提交按钮 onclick javascript 呈现从 asp.net 2.0 到 4.0 的差异
【发布时间】：2013-07-13 22:01:51
【问题描述】：

我在 ASP.Net 网络表单中有以下按钮：

<asp:Button id="btn_submit" text="Submit (Click only Once)" OnClick="process_form" runat="server" />

在页面代码中，我使用了以下函数禁用多个提交（这在 ASP.Net 2.0 下运行良好）...

private sub prevent_multiple_submits()

dim sb as StringBuilder

sb = New StringBuilder()

sb.Append( "this.value = 'Please wait...';this.disabled = true;" )
sb.Append( Page.ClientScript.GetPostBackEventReference( btn_submit, String.Empty ) )

btn_submit.Attributes.Add( "onclick", sb.ToString() )

end sub

当页面在 ASP.Net 2.0 下运行时，呈现的 HTML 如下（工作正常）...

<input type="submit" name="btn_submit" value="Submit (Click only Once)" onclick="this.value = 'Please wait...';this.disabled = true;__doPostBack('btn_submit','');" id="btn_submit" />

当页面在 ASP.Net 4.0 下运行时，呈现的 HTML 如下：

<input type="submit" name="btn_submit" value="Submit (Click only Once)" onclick="this.value = &#39;Please wait...&#39;;this.disabled = true;__doPostBack(&#39;btn_submit&#39;,&#39;&#39;);" language="javascript" id="btn_submit" />

...由于某种原因，该按钮永远不会显示为禁用...（就像在 ASP.Net 2.0 下一样）...

表单仍然提交并且一切正常——但是按钮在被点击后从未出现过？！

还有其他人处理过这种行为吗？ .. 如果是这样，您是否找到了解决方案而无需更改 web.config、使用 JQuery 等。

顺便说一句，

我确实找到了以下参考资料；但在 ASP.Net 4.0 下对我来说还没有任何效果。

ASP.NET, javascript: silly annoying apostrophe problem

HTMLEncode/HTMLDecode and the apostrophe ASP.net

我想问题应该是如何将未转义的 javascript 代码添加到 asp.net 按钮？

提前致谢

【问题讨论】：

标签： javascript asp.net button onclick

【解决方案1】：

您可以通过完全删除 prevent_multiple_submits 子并将 onClientClick 属性添加到您的按钮来避免这种情况：

<asp:Button id="btn_submit" text="Submit (Click only Once)" OnClick="process_form" runat="server" onClientClick="this.value = 'Please wait...';this.disabled = true;" />

虽然我会更进一步：

onClientClick="disable(this)"

<script type="text/javascript">
    function disable(elem) {
        elem.value = "Please wait...";
        elem.disabled = true;
    }
</script>

或者使用 jQuery，也删除 onClientClick：

$(document).ready(function() {
    $('form').submit(function() {
        $('input[id^="btn_submit_"]').prop('disabled', true).val('Please wait...');
    });
});

另一个隐藏按钮而不是禁用的jQuery解决方案：

$(document).ready(function() {
    $('form').submit(function() {
        var btn = $('input[id^="btn_submit_"]');
        btn.after('<span>Please wait...</span>');
        btn.hide();
    });
});

当然，这两种 jQuery 解决方案都可以在 vanilla js 中使用，但语法更冗长，你必须查一下。

【讨论】：

嗨 Jason - 感谢您抽出宝贵时间回答。我尝试使用上面的“onClientClick”代码进行测试——不幸的是，它不起作用——问题是提交按钮被禁用并且“process_form”永远不会执行。我宁愿只使用 ASP.Net 解决方案，而不必求助于 JQuery
有人用 ASP.Net 4.0 做过吗？？？甚至可以不使用 JQuery 吗？
@user1377587 我给出的前两个解决方案不使用 jQuery。所以这是一个不同的问题，禁用按钮会导致表单无法提交。经过一番研究，我不确定您的解决方案过去是如何工作的（也许这是 2.0 和 4.0 之间的另一个区别）。您可以改为隐藏按钮并附加一个带有“请稍候”的文本的跨度。我已编辑以添加该解决方案。
承认——我只是希望有一个“纯”的 ASP.Net 解决方案——再次感谢！
您认为什么是“纯”asp.net 解决方案？因为即使您的原始 (2.0) 代码也使用了 javascript。

【解决方案2】：

好的，

我觉得有点愚蠢，因为经过一些试验后，似乎虽然 ASP.Net 4.0 的呈现方式与 ASP.Net 2.0 不同——但代码实际上仍然可以工作。那就是按钮被禁用了——它永远不会以这种方式出现。

问题是当按钮通过 javascript 被禁用时，没有视觉线索表明它正在发生，即：按钮没有像以前的版本那样显示为“灰色”。为了确认这一点，我将 prevent_multiple_submits 子例程更改如下：

private sub prevent_multiple_submits()

dim sb as StringBuilder

sb = New StringBuilder()

sb.Append( "this.disabled=true;this.style.backgroundColor='#EFEFEF';this.style.color='#000000';this.value='Please wait...';" )
sb.Append( Page.ClientScript.GetPostBackEventReference( btn_submit, String.Empty ) )

btn_submit.Attributes.Add( "onclick", sb.ToString() )

end sub

现在——当按钮被点击时，按钮变为灰色（表示它被禁用）——这曾经在 ASP.Net 2.0 下自动发生。如果没有颜色变化——按钮永远不会显示为禁用（即使它是禁用的）——这就是 2.0 和 4.0 渲染之间的区别。

希望这对其他人有所帮助。

再次感谢。

【讨论】：