ASP.NET Web Forms中如何正确将JavaScript变量值插入字符串？

你的问题出在字符串拼接的引号语法错误，导致变量i没有被解析，反而被当成了字符串的一部分。下面是两种可行的修复方案：

方案1：修正字符串拼接的引号 #

把placeholder='+i+'改成placeholder="'+i+'"，让JavaScript正确识别变量i并替换其值。修正后的代码如下：

<script type="text/javascript">
    var i = "Placeholder";
    $("#partAdder").click(function () {
        newPart =
            '<div class="row" id="row">' +
            '<div class="col-xl-2">' +
            '<div class="form-group">' +
            '<input type="text" runat="server" class="form-control form-control-sm" placeholder="'+i+'" />' +
            '</div>' +
            '</div>' +
            '</div>';
        $('#newistrpart').append(newPart);
     });
</script>

方案2：使用ES6模板字符串（更简洁） #

用反引号（）包裹整个HTML片段，变量直接用${i}`插入，这种写法直观且不易出现引号冲突：

<script type="text/javascript">
    var i = "Placeholder";
    $("#partAdder").click(function () {
        const newPart = `
            <div class="row" id="row">
                <div class="col-xl-2">
                    <div class="form-group">
                        <input type="text" runat="server" class="form-control form-control-sm" placeholder="${i}" />
                    </div>
                </div>
            </div>
        `;
        $('#newistrpart').append(newPart);
     });
</script>

额外注意 #

你添加的runat="server"属性在客户端动态生成的元素上是无效的——ASP.NET服务器端无法识别通过JavaScript在客户端创建的服务器控件，如果你需要在后台获取这些文本框的值，得改用其他方式（比如提交时通过JS收集值，或者用服务器端控件动态添加）。

内容的提问来源于stack exchange，提问作者Abd El-Rahman Sayed