如何将用户输入从 ASP.NET TextBox 传递到 JavaScript 函数？答案

【问题标题】：How to pass user input from ASP.NET TextBox to JavaScript function?如何将用户输入从 ASP.NET TextBox 传递到 JavaScript 函数？
【发布时间】：2017-05-01 11:44:13
【问题描述】：

我正在尝试提取用户在文本框中输入的信息并将值传递给 JavaScript 函数，以便在“window.alert()”方法中显示结果。

我目前正在使用 ASP.NET。到目前为止，这就是我对 ASP.NET 前端和 JavaScript 的了解；

 <asp:Button ID="btnCalculateSalary" runat="server" Text="Calculate Salary" OnClick="calcFunction()" />

    <script>
        function calcFunction(c1, c2) {
            c1 = document.getElementById('txtAnnualHours').value;
            c2 = document.getElementById('txtPayRate').value;

            return window.alert("Your Annual Salary is: " + c1 * c2);
        }

【问题讨论】：

您是否只是在寻找OnClientClick，而不是OnClick？
哪一个有效。我正在学习，所以我不知道哪个适用于 JavaScript。
好吧，OnClick 用于服务器端控件是处理服务器端事件。使用OnClientClick 作为客户端点击处理程序。但是请注意，它仍然是一个服务器端控件，并且可能仍会导致回发刷新整个页面。
@CristianUPolanco：那是因为OnClick 寻找要执行的服务器端 代码，而您的服务器端 中没有calcFunction() 方法i> 代码。当您改为尝试 OnClientClick 时会发生什么？
@CristianUPolanco：太好了。很抱歉那里有任何混乱。您会发现服务器端代码和客户端代码之间的区别通常在 Web 开发中非常重要。 ASP.NET WebForms 不遗余力地尝试统一这两个独立的东西，这通常会导致混乱和问题。但在这一点上我只是暴露个人观点:)

标签： javascript asp.net

【解决方案1】：

这不是你想的那样：

OnClick="calcFunction()"

由于这是一个服务器端 ASP.NET “控件”而不是 HTML 元素，OnClick 指的是 ASP.NET 的服务器端事件处理程序。但是您有一个要执行的客户端功能。在这种情况下，请尝试：

OnClientClick="calcFunction()"

然而，需要注意的重要一点是，这仍然是一个服务器端 ASP.NET 控件。这意味着在处理客户端点击事件后，它可能（取决于许多不相关的因素）仍会调用将刷新页面的服务器的回发。初学者常见的困惑来源是快速页面刷新会“重置”他们的客户端状态并导致他们怀疑“它不工作”。

通常当您只想执行客户端操作时，您可能希望完全跳过服务器端控件而只使用普通的 HTML 元素。

另一个不相关的附注...您的 JavaScript 函数不需要函数声明中的那些 c1, c2 参数。值没有传递给函数，传递的值也没有在函数中使用。

【讨论】：

非常感谢额外的 cmets。