WebForms框架下通过JavaScript设置表单字段值问题求助

问题场景 #

在ASP.NET WebForms页面中，有从WebService读取数据填充的Grid控件和表单。Grid包含按钮列，需求是点击按钮时，将对应行的公司名称（firmName）赋值给表单内的txtFirmaAdi文本框。目前已成功从Grid中获取到firmName，但无法完成赋值，核心问题是WebForms控件运行时会生成带命名容器前缀的ID，导致JS无法准确定位控件。

核心原因 #

WebForms中带有runat="server"的控件，默认会根据其所在的命名容器（如MasterPage、ContentPlaceHolder、Panel等）生成带层级的ID（例如ctl00_ContentPlaceHolder1_txtFirmaAdi），而非声明时的txtFirmaAdi。此外，原JS代码中存在jQuery对象与DOM元素的操作混淆：使用jQuery选择器获取的对象不能直接调用DOM的.value属性，需用jQuery的.val()方法。

解决方案 #

方法1：设置ClientIDMode为Static（推荐，.NET 4.0+支持） #

直接为TextBox控件设置ClientIDMode="Static"，强制控件运行时ID与声明的ID一致，无需处理命名容器前缀。

修改后的ASPX代码：

<div class="form-horizontal">
    <div class="control-group">
        <label class="control-label">İşyeri Adı</label>
        <div class="controls">
            <asp:TextBox runat="server" ID="txtFirmaAdi" CssClass="input-xlarge" MaxLength="220" ClientIDMode="Static"></asp:TextBox>
        </div>
    </div>
</div>

修正后的JS代码（支持jQuery或原生JS）：

function callme(e) {
    // 获取Grid行中的公司名称
    var tds = e.parentNode.parentNode.getElementsByTagName('td');
    var firmName = tds[1].innerHTML.trim();
    
    // 方法A：使用jQuery赋值
    $('#txtFirmaAdi').val(firmName);
    
    // 方法B：使用原生JS赋值（无需jQuery）
    // document.getElementById('txtFirmaAdi').value = firmName;
}

方法2：使用属性选择器匹配ID后缀（兼容旧版本.NET） #

如果无法使用ClientIDMode="Static"，可通过ID后缀匹配的方式定位控件，同时注意正确操作jQuery对象或DOM元素。

修正后的JS代码：

function callme(e) {
    var tds = e.parentNode.parentNode.getElementsByTagName('td');
    var firmName = tds[1].innerHTML.trim();
    
    // jQuery方式：匹配ID以txtFirmaAdi结尾的元素，用.val()赋值
    $('[id$="txtFirmaAdi"]').val(firmName);
    
    // 原生JS方式：用querySelector匹配后缀
    // var textbox = document.querySelector('[id$="txtFirmaAdi"]');
    // if (textbox) textbox.value = firmName;
}

方法3：后台注入控件ClientID到JS #

通过ASP.NET表达式将控件的运行时ID直接注入到JS中，确保定位准确。

JS代码示例：

function callme(e) {
    var tds = e.parentNode.parentNode.getElementsByTagName('td');
    var firmName = tds[1].innerHTML.trim();
    // 直接使用后台输出的ClientID
    document.getElementById('<%= txtFirmaAdi.ClientID %>').value = firmName;
}

注意事项 #

• 原代码中连续两次赋值（先设为td内容再改为"Deneme"）会覆盖目标值，测试后需保留正确的赋值语句。
• 确保页面已引入jQuery（若使用jQuery相关代码），否则$符号会报错。

内容的提问来源于stack exchange，提问作者Haluk Öztürk