ASP.NET TextBox的Text属性无法通过JavaScript修改，后台仍取默认值

这个问题我之前也踩过坑，核心原因就是你给TextBox设置了服务器端的ReadOnly="true"，这会带来两个关键问题：

1. 浏览器不会提交修改后的值：当服务器端设置ReadOnly="true"时，ASP.NET渲染控件时会告诉浏览器这个输入框是只读的，表单提交时浏览器会自动忽略这个控件的内容，不会把JS修改后的值发送回服务器。
2. ViewState锁定初始值：ASP.NET的ViewState会保留TextBox的初始值"hello"，后台调用.Text属性时优先从ViewState取值，自然拿不到前端修改后的内容。

最直接的解决办法：改用客户端readonly属性 #

把服务器端的ReadOnly="true"删掉，换成客户端的readonly属性，这样既保留了只读的视觉效果，又能让JS修改值，还能正常提交回服务器。

方式1：前端直接添加客户端readonly

修改你的TextBox标签：

<asp:TextBox ID="tboxUsername" CssClass="fancyInput1" Text="hello" runat="server" readonly></asp:TextBox>

方式2：后台代码添加客户端readonly

如果需要动态控制只读状态，可以在Page_Load事件里添加：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        tboxUsername.Attributes.Add("readonly", "readonly");
    }
}

这样修改后，你的JS代码不用改（你已经正确修改了value属性，这是对的，因为TextBox渲染成HTML的input控件，用value操作是正确的），表单提交后后台就能通过tboxUsername.Text拿到更新后的值了。

备选方案：用隐藏域传递值（如果必须保留服务器端ReadOnly） #

如果因为某些业务逻辑必须保留服务器端的ReadOnly="true"，可以额外加一个HiddenField，JS同时修改TextBox和隐藏域的值，后台取隐藏域的内容：

1. 添加隐藏域：

<asp:TextBox ID="tboxUsername" ReadOnly="true" CssClass="fancyInput1" Text="hello" runat="server"></asp:TextBox>
<asp:HiddenField ID="hdnUsername" runat="server" />

2. 修改JS函数：

function showModalBox(username, title, firstname, lastname, email, phone, street, ctrycode, zipcode, city, companyname, usertyp, isactive) {
    // ...其他代码不变
    var tboxUsername = document.getElementById("<%=tboxUsername.ClientID%>");
    var hdnUsername = document.getElementById("<%=hdnUsername.ClientID%>");
    tboxUsername.value = username;
    hdnUsername.value = username; // 同步修改隐藏域
    // ...其他代码不变
}

3. 后台取值：

string updatedUsername = hdnUsername.Value;

额外提醒 #

你的后台代码里有SQL注入风险！直接把username拼进SQL语句是非常危险的，赶紧改成参数化查询：

DataTable dt = Connection.Query("SELECT * FROM portalusers WHERE username = @username", new { username = username });

（具体写法取决于你的Connection.Query方法支持的参数化方式，一定要避免字符串拼接！）

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