使用 javascript 更改 asp.net 按钮的文本答案

【问题标题】：change text of asp.net button with javascript使用 javascript 更改 asp.net 按钮的文本
【发布时间】：2010-08-21 22:35:45
【问题描述】：

我有一个表单提交按钮，它连接了 asp.net 验证器。如果我创建一个 javascript 函数来将文本更改为单击时处理它不起作用。该按钮标记验证器并导致整个页面回发。这是我的代码：

 protected void Page_Load(object sender, EventArgs e)
{
    btnPurchase.Attributes["onClick"] = "submit()";
}

HTML

<script type="text/javascript">
    function submit() {
        document.getElementById("ctl00_ContentPlaceHolder1_btnPurchase").value = "Processing";
    };
</script>

如果表单通过验证，我的目标是将按钮文本更改为购买 onclick，然后在我后面的代码中，一旦表单回发，它就会变回原始值。

【问题讨论】：

如果是我，我只会让自己头疼并禁用按钮并显示动态添加某种“正在处理...”图像到页面。您可以从ajaxload.info 免费获得一些很棒的“微调器”图像
我遇到的问题是该按钮在页面回发后才会自行禁用，而不是点击

标签： javascript asp.net

【解决方案1】：

我遇到了这个 100% 完美的解决方案。我正在使用带有更新面板的脚本管理器...

<script type="text/javascript">

        // Get a reference to the PageRequestManager.
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        // Using that prm reference, hook _initializeRequest
        // and _endRequest, to run our code at the begin and end
        // of any async postbacks that occur.
        prm.add_initializeRequest(InitializeRequest);


        // Executed anytime an async postback occurs.
        function InitializeRequest(sender, args) {
            // Get a reference to the element that raised the postback,
            //   and disables it.
            $get(args._postBackElement.id).disabled = true;
            $get(args._postBackElement.id).value = "Processing...";
        }
        // Executed when the async postback completes.
        function EndRequest(sender, args) {
            // Get a reference to the element that raised the postback
            //   which is completing, and enable it.
            $get(args._postBackElement.id).disabled = false;
            $get(args._postBackElement.id).value = "Purchase";
        }

</script>

【讨论】：

你假设他正在使用 ajax 提交表单。
大声笑，甚至没有意识到你是 OP。很酷，一切都很好 =)

【解决方案2】：

我刚刚问了一个非常相似的问题（得到了回答）： ASP.NET Custom Button Control - How to Override OnClientClick But Preserve Existing Behaviour?

基本上您需要保留提交按钮的现有行为 (__doPostBack)。您可以使用 Page.GetPostBackEventReference(myButton) 执行此操作。

但是，验证更加困难，因此您需要进行内联页面验证 (Page.Validate()) 或像我一样创建自定义控件并覆盖 OnClientClick 和 PostBackOptions 成员。

自定义控件更好，因为我现在可以将此控件放在我想要此行为的任何页面上。

您也可以这样做并公开一个公共属性：

public string loadingText {get; set;}

可用于自定义每个页面上的加载文本。

你基本上需要设置onclick属性来做以下事情：

onclick = "if (Page_Validate()) this.text = 'Processing';{0} else return false;"

{0} 应该是从 Page.GetPostBackEventReference 检索到的常规回发操作。

结果逻辑将是：点击时验证页面，它成功，更改文本和回发，如果失败，返回 false - 这将在页面上显示验证。

在 HTML 中将按钮设置为默认文本“提交”，然后将上述逻辑包装在 !Page.IsPostBack 中，以便在表单提交时重置文本。

希望对您有所帮助。

【讨论】：