ASP.NET文本框前后端值设置问题：客户端修改后服务端未同步

在Razor表单中初始化了一个TextBox控件：

<asp:TextBox ID="CheckSum"  runat="server" Text='<%# Eval("CheckSum")%>' ClientIDMode="Predictable" />

客户端渲染后得到：

<input name="ctl00$ContentPlaceHolder1$ImageGridView$ImagesGridView$ctl21$CheckSum" type="text" value="calculated Number A" id="CheckSum_19" >

尝试在客户端修改其值：

var checkSum = workingRow.querySelector("input[id^='CheckSum']");
// checkSum.value 似乎未修改值，而是新增了一个value属性
checkSum.innerHTML = "calculated Number B";

修改后结果为：

<input name="ctl00$ContentPlaceHolder1$ImageGridView$ImagesGridView$ctl21$CheckSum" type="text" value="calculated Number A" id="CheckSum_19" >calculated Number B</input>

回到服务端执行代码：

((TextBox)viewRow.FindControl("CheckSum")).Text 

得到的值仍为calculated Number A，而非更新后的calculated Number B。请问正确的文本框客户端与服务端值设置方式是什么？

客户端修改值 #

• 文本框（<input type="text">）是自闭合标签，不能用innerHTML设置内容，这会把内容加到标签外部，完全不会影响输入框的实际值。
• 正确做法是直接设置DOM元素的value属性：

var checkSum = workingRow.querySelector("input[id^='CheckSum']");
checkSum.value = "calculated Number B";

修改后，输入框的显示值和提交给服务端的实际值都会更新。浏览器渲染的HTML中虽然保留初始的value属性标记，但实际提交的是DOM的value属性值，服务端能正确获取。

服务端获取/设置值 #

获取客户端更新后的值 #

• 确保页面表单提交方式为POST（ASP.NET WebForms默认提交方式），GET方式不会携带表单控件的更新值。
• 在回发事件（如按钮点击事件）中通过TextBox的Text属性获取，不要在Page_Load的!IsPostBack分支中获取，此时控件还未加载客户端提交的值：

protected void SubmitButton_Click(object sender, EventArgs e)
{
    TextBox checkSumBox = (TextBox)viewRow.FindControl("CheckSum");
    string updatedValue = checkSumBox.Text; // 这里会得到客户端修改后的calculated Number B
}

服务端初始化/设置值 #

• 绑定数据时，Eval是单向绑定（仅显示初始值），若需要双向绑定（客户端修改后服务端能获取），改用Bind：

<asp:TextBox ID="CheckSum" runat="server" Text='<%# Bind("CheckSum")%>' ClientIDMode="Predictable" />

• 代码后台手动设置值时，直接赋值Text属性，且要放在!IsPostBack分支里，避免覆盖客户端提交的更新值：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        TextBox checkSumBox = (TextBox)viewRow.FindControl("CheckSum");
        checkSumBox.Text = "Initial Value";
    }
}

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