从 JavaScript 调用代码隐藏函数

引言

我一直在 CodeProject 中搜索关于这个主题的文章，但没有找到完全相关的，所以我希望这对某人有所帮助。

正如本文的标题所说，今天我想分享如何从 JavaScript 调用代码后置中的函数或方法，或者换句话说，运行一些从客户端调用的服务器端代码，然后更新我们的网页。

背景

我需要向一些 ASPX 页面添加一些功能，使它们看起来更灵敏，更像桌面应用程序。问题是我不想用 JavaScript 编写该功能。我想实现一些有点复杂的东西，但由于我已经将其编码在代码后置中，我想尝试用 JavaScript 重写它，如果可以从 JavaScript 调用函数或方法（在这种情况下）。

简单场景

让我们想象以下简单的场景，只是为了展示我们今天如何实现我们的目标。假设我们有两个文本框：txtName 和 txtLastName。我们希望用户写下他的全名，然后在最后一个文本框失去焦点时向他问候。

我们可以很容易地用 JavaScript 完成这一切，但请记住，这只是为了演示如何从客户端调用服务器端方法并更新我们的网页。

使用代码

好的。让我们向我们的 ASPX 页面添加三个文本框

<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<asp:TextBox ID="txtMsg" runat="server"></asp:TextBox>

现在，在我们的 body 标签内，让我们添加一些 JavaScript

<script type="text/javascript">
    function greet(txtN, txtLastN, txtMsg){
        var ctrlN = document.getElementById(txtN);
        var ctrlLastN = document.getElementById(txtLastN);
        var fullName = ctrlN.value + '  ' + ctrlLastN.value;
        PageMethods.greetUser(fullName, greetSuccess, greetFailed, txtMsg);
    }
    function greetSuccess(res, txtMsg) {
        var ctrlTxtMsg = document.getElementById(txtMsg);
        ctrlTxtMsg.value = res;
    }
    function greetFailed(res, dst) {
        alert(res.get_message());
    }
</script>

我们刚刚创建了三个函数

• Greet：接收 txtName、txtLastName 和 txtMsg 文本框的 ClientId。然后它获取 txtName 和 txtLastName 的对象，连接它们的值，并调用代码后置函数“greetUser”。我们将四个值传递给该函数：我们通过连接 txtName 和 txtLastName 值获得的全名、如果一切顺利将被调用的函数、如果发生错误将被调用的函数，以及我们可以在最后一个参数中传递任何我们想要的东西，在本例中是 txtMsg 文本框的 ClientId。请注意，“greetUser”是我们的代码后置函数，并且我们正在使用 PageMethods 来访问它。
• GreetSuccess 是如果一切顺利将被调用的函数。接收代码后置函数的结果和一个参数：txtMsg 文本框的 ClientID，因此我们可以获取对象本身并将代码后置函数的结果作为其值分配给它。
• GreetFailed：接收与 GreetSuccess 相同的两个参数。在这种情况下，我们只是显示一个包含发生错误的警报。

现在，让我们看看我们的代码后置。首先，在我们的 Page_Load 方法中，我们将添加

If Page.IsPostBack = False Then
    txtLastName.Attributes.Add("onblur", "javascript:greet('" & _
       txtName.ClientID & "','" & txtLastName.ClientID & "','" & _
       txtMsg.ClientID & "')")
End If

为什么我要在代码中将属性“onblur”分配给我们的 txtLastName 文本框，而不是直接在 ASPX 页面中执行？ 只是为了演示。您可以从 ASPX 页面添加此属性，但如果您有更复杂的场景，比如带有 DataTemplates 的 GridView 或 DataList，或者如果您正在动态创建控件...那么您可以例如从 GridView_DataBound 方法或您创建动态布局的函数中的代码中获取您需要的控件，并以上述方式调用 JavaScript 函数。

好的，这是本文的重要部分。我们从 JavaScript 调用的代码后置函数

<System.Web.Services.WebMethod()> _
Public Shared Function greetUser(ByVal fullName As String) As String
    Return "Welcome " & fullName & "!"
End Function

请注意，我们正在为该函数提供 System.Web.Services.WebMethod 属性；这就是我们为什么可以使用 PageMethods 从 JavaScript 访问该函数的原因。在此函数中，我们正在接收通过连接 Greet JavaScript 函数中的 txtName 和 txtLastName 中的值获得的全名。

结束语

我想就是这样了。这是一个非常简单的场景，但您可以想到 GridView 中非常复杂的操作。与往常一样，请随时留下您的评论、问题、建议或您想说的任何内容。您也可以从我的博客阅读原始帖子。

感谢阅读！