如何将JavaScript获取的字符串传递到C# ASP.NET后端使用

首先先纠正你现有代码的两处错误：

1. JavaScript中没有string关键字声明变量，应该用const/let/var
2. document.getElementById("TextBoxID")拿到的是DOM元素对象，不是文本框的输入内容，需要加.value属性才能取到字符串值，正确的JS取值写法：

const str = document.getElementById("TextBoxID").value;

根据你是要整页回发还是无刷新提交，选下面对应方案即可：

方案1：整页回发场景（最简便，适合传统WebForm开发） #

• 如果你用的是ASP.NET服务端TextBox控件（带runat="server"标记），不需要额外传递JS变量，页面触发回发后（比如点击服务端按钮），直接在C#后端通过控件的Text属性就能拿到值：

  // 后端直接取值，不需要额外JS赋值操作
  string str = TextBoxID.Text;
  // 后续直接写数据库插入逻辑即可
  

• 如果你拿到的JS值是自定义计算得到的、不是直接对应服务端输入控件，可以加一个服务端隐藏域中转值：
  1. 在aspx页面加隐藏域控件：

     <asp:HiddenField ID="hdnData" runat="server" />
     

  2. JS拿到str值之后，给隐藏域赋值：

     const str = document.getElementById("TextBoxID").value;
     // 用ClientID获取服务端控件渲染到前端的真实ID，避免母版页/模板嵌套导致ID变化
     document.getElementById("<%= hdnData.ClientID %>").value = str;
     

  3. 页面回发后，后端直接取隐藏域的值：

     string str = hdnData.Value;
     // 执行数据库插入
     

方案2：无刷新异步提交场景（AJAX） #

如果不想整页刷新，可以直接在JS里把拿到的字符串通过异步请求提交给后端接口：

1. 后端写接收参数的接口，以WebForm的WebMethod为例：

   using System.Web.Services;
   
   public partial class DemoPage : System.Web.UI.Page
   {
       [WebMethod]
       public static string SaveToDB(string inputStr)
       {
           // 这里拿到的inputStr就是前端传的str值
           // 写参数校验、SQL参数化插入数据库的逻辑
           return "ok";
       }
   }
   

2. 前端JS发POST请求传值：

   const str = document.getElementById("TextBoxID").value;
   fetch('DemoPage.aspx/SaveToDB', {
       method: 'POST',
       headers: {
           'Content-Type': 'application/json'
       },
       body: JSON.stringify({ inputStr: str })
   })
   .then(resp => resp.json())
   .then(result => {
       // 提交成功后的回调逻辑
   });
   

如果是ASP.NET MVC/Razor Pages项目，直接把AJAX请求的地址换成对应Action/PageHandler的路由即可，后端参数接收逻辑一致。

注意：后端拿到字符串之后，必须做合法性校验，插入数据库时必须用参数化查询，不要直接拼接SQL语句，避免SQL注入风险。

内容的提问来源于stack exchange，提问作者Gelis 07