如何将ASPX页面JS事件处理的变量值传递至ASPX.cs后台

问题根源 #

你的ClientPhone服务器控件设置了Visible="false"，ASP.NET会直接跳过该控件的HTML渲染——也就是说这个输入框根本不会出现在客户端页面中。你前端JS代码里看似修改了它的value，实际操作的是intl-tel-input生成的DOM元素，而非服务器控件对应的输入框，因此后台无法获取到修改后的完整号码。

可行解决方案 #

方案1：修改服务器控件的隐藏方式（推荐） #

将ClientPhone的Visible="false"替换为style="display: none;"，这样控件会被渲染到页面（仅视觉隐藏），前端JS可正常修改它的value，后台能通过ClientPhone.Text拿到值：

<asp:TextBox ID="ClientPhone" runat="server" CssClass="form-control" type="tel" style="display: none;"></asp:TextBox>

方案2：使用HTML隐藏字段传递值 #

添加普通HTML隐藏输入框，提交时把完整号码赋值给它，后台通过Request.Form获取：

1. 前端添加隐藏字段：

<input type="hidden" id="HiddenClientPhone" name="HiddenClientPhone" />

2. 修改JS提交逻辑：

$("#<%=Submit.ClientID %>").on('click', function (e) {
    if (input.value.trim()) {
        if (iti.isValidNumber()) {
            var number = iti.getNumber(intlTelInputUtils.numberFormat.E164);
            input.value = number;
            // 同时赋值给隐藏字段
            document.getElementById("HiddenClientPhone").value = number;
        }
    }
});

3. 后台获取值：

string fullPhone = Request.Form["HiddenClientPhone"];

方案3：提交时动态添加表单数据 #

提交时直接向表单中插入隐藏字段传递完整号码，无需依赖原有服务器控件：
修改JS代码：

$("#<%=Submit.ClientID %>").on('click', function (e) {
    if (input.value.trim()) {
        if (iti.isValidNumber()) {
            var number = iti.getNumber(intlTelInputUtils.numberFormat.E164);
            // 创建隐藏输入并添加到表单
            var hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'FullClientPhone';
            hiddenInput.value = number;
            document.forms[0].appendChild(hiddenInput);
        }
    }
});

后台通过Request.Form["FullClientPhone"]获取完整号码。

额外说明 #

保留提交按钮的点击事件绑定是合理的，可确保用户多次修改内容后再统一提交完整号码；无论采用哪种方案，核心都是保证前端修改的目标值被包含在表单提交数据中，ASP.NET后台才能正常获取。

内容的提问来源于stack exchange，提问作者Erhan Yaşar