ASP.NET中C#与JavaScript交互的4种核心方法

一、JavaScript 调用 C# 函数

这是最常见的交互需求，通常用于触发后台处理逻辑并返回结果。主要有三种实现路径：同步注入、页面级异步调用（PageMethods）和 WebService 异步调用。

第1步：使用同步注入（简单场景）

目的：在页面加载时或特定时刻，将C#函数返回值直接嵌入到JavaScript变量中。

1. 入口：C# Page 类文件。
2. 动作：将需要调用的方法声明为 public（或 protected）。
3. 关键参数：HTML 中使用 <%=MethodName()%> 语法。

// C# 后台代码 (Code-behind)
public string GetServerData()
{
    return "Hello from Server";
}

<!-- JavaScript 前端代码 -->
<script type="text/javascript">
    var data = "<%=GetServerData()%>"; // 服务器渲染时替换为实际值
    alert(data);
</script>

注意：此方法在页面生命周期早期执行，无法处理复杂的异步回调，适合传递静态数据。

第2步：使用 PageMethods 进行异步调用（推荐）

目的：在不刷新页面的前提下，通过 AJAX 方式调用当前页面的 C# 方法。

1. 入口：.aspx 文件头部添加 <asp:ScriptManager> 控件。
2. 动作：设置 EnablePageMethods="true"。

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

同时，C# 后台方法必须满足以下条件：
1. 声明为 public static。
2. 添加 [WebMethod] 特性。
3. 引用 System.Web.Services 命名空间。

// C# 后台代码
using System.Web.Services;

[WebMethod]
public static string SayHello(string name)
{
    return $"Hello, {name}";
}

在前端 JavaScript 中通过 PageMethods 对象调用：

<script type="text/javascript">
function callServer(){
    // PageMethods.方法名(参数, 成功回调函数, 失败回调函数)
    PageMethods.SayHello('User', onSucceeded, onFailed);
}

function onSucceeded(result){
    alert(result); // 显示后台返回的值
}

function onFailed(error){
    alert(error.get_message());
}
</script>

第3步：调用独立 WebService (.asmx)

目的：当逻辑复杂或需复用时，将方法移至独立的 WebService 文件中。

1. 准备：创建 .asmx 文件，类添加 [System.Web.Script.Services.ScriptService] 特性。
2. 引用：在 ScriptManager 中通过 <asp:ServiceReference> 引用该服务。

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/MyService.asmx" />
    </Services>
</asp:ScriptManager>

调用语法为 WebServiceName.MethodName()。

二、JavaScript 访问 C# 变量

当需要将数据库查询结果或服务器计算的值传给前端 JS 时，可采用以下两种方案。

第1步：通过隐藏域传递

目的：利用服务器控件在 ViewState 中保存值，并在前端读取。

1. 动作：在 ASPX 中添加 <input type="hidden" runat="server" id="myHidden" />。
2. 后台赋值：myHidden.Value = serverVariable;
3. 前端读取：通过 DOM 获取值。

<input type="hidden" id="hdnValue" runat="server" />

<script type="text/javascript">
    var val = document.getElementById("<%=hdnValue.ClientID%>").value;
</script>

第2步：注册启动脚本

目的：在服务端处理完毕后，直接向页面输出包含变量值的 JS 语句。

// C# 后台
string jsVar = "var myData = '" + serverData + "';";
ClientScript.RegisterStartupScript(this.GetType(), "initVar", jsVar, true);

三、C# 访问 JavaScript 变量

由于 HTTP 是无状态协议，C# 无法直接“看到”当前页面的 JS 内存变量，必须借助载体将数据回传至服务器。

第1步：使用 HiddenField 或表单提交

目的：由 JS 修改隐藏域的值，表单提交或异步请求时自动发送至后端。

1. JS动作：找到隐藏的输入框，更新其 value。
2. C#接收：通过 Request.Form["id"] 或 HiddenFieldID.Value 获取。

// JS
document.getElementById("txtJsInput").value = someValue;
document.forms[0].submit();

// C#
string receivedValue = txtJsInput.Value;

第2步：使用 Session 存储

目的：跨页面或在不同请求间共享用户状态。

1. JS写：将值存入隐藏域，随请求发回。
2. C#读：存入 Session。

// C# 后端存入
Session["UserName"] = retrievedValue;

四、C# 执行或调用 JavaScript 函数

有时需要在服务端判断后，强制浏览器执行特定的前端脚本（如弹窗、跳转）。

第1步：使用 RegisterStartupScript

目的：向页面末尾注入并执行一段 JS 代码。

1. 入口：C# Page 类的任何事件处理器。
2. 动作：构造包含函数调用的字符串脚本。

// C# 后台代码
string script = @"window.alert('操作成功'); CSharpCallJs('param1', 'param2');";
ScriptManager.RegisterStartupScript(this, this.GetType(), "alertKey", script, true);

完成判断：页面刷新或异步更新面板后，前端会弹出对话框并执行 CSharpCallJs 函数。

第2步：通过 Literal 或 CodeBlock 注入

对于非脚本执行，仅是将JS变量传入后台的场景，也可结合 <%= %> 或 Literal 控件实现动态绑定。

以上就是 ASP.NET 中 C# 与 JavaScript 交互的详细内容，更多关于 ASP.NET 前后端通信的技术资料请关注本站其它相关文章！