如何将ContentPlaceHolder2的HTML文本框值复制到ContentPlaceHolder1的ASP.NET文本框

看起来你遇到的核心问题是在ASP.NET WebForms中，要把ContentPlaceHolder2里的HTML文本框值同步到ContentPlaceHolder1的ASP.NET文本框，还要用这个值作为存储过程参数，但后台通过Request.Form获取值失败了。咱们一步步拆解问题并解决：

先排查后台获取失败的直接原因 #

你后台代码里用了Request.Form["Ingredinet name"]，但看前端Content2里的输入框name属性是**Ingredinet name**——这里有个拼写错误：Ingredinet少了一个i，正确应该是Ingredient。另外，这个输入框绑定了AngularJS的ng-model，表单提交时AngularJS可能没有把模型值同步到原生DOM的value上，这也会导致Request.Form拿不到最新值。

补充一句：ContentPlaceHolder的存在不影响Request.Form的获取，只要控件有正确的name属性，表单提交时就会被包含在请求里，所以不是按钮无法访问ContentPlaceHolder2的问题。

解决方案1：前端JS实时同步（推荐，避免回发同步问题） #

你已经给Content2的输入框加了onkeyup="sync()"，咱们可以完善这个函数，直接把值同步到Content1的ASP.NET文本框里，这样后台直接读取控件值就行：

修改前端代码 #

1. 先修正Content2输入框的name属性拼写，同时确保id可用：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
 <strong>Ingredient Name: </strong>
 <input id="txtIngName_new" type="text" onkeyup="sync()" kendo-text-box="txtIngName" class="k-input k-textbox TextCtrlReqBgImage" name="Ingredient name" style="width: 350px;" required="required" ng-click="txtIngNameClick()" ng-readonly="ingNameReadOnly" ng-model="selectedIng.Ingredients_Name">
</asp:Content>

2. 编写/完善sync和Copy函数：

function sync() {
    // 获取Content2输入框的最新值——因为有AngularJS绑定，优先通过scope获取更可靠
    var inputEl = document.getElementById('txtIngName_new');
    var ingName = angular.element(inputEl).scope().selectedIng.Ingredients_Name;
    // 获取Content1里的ASP.NET文本框（注意用ClientID拿到框架生成的真实id）
    var aspTextBox = document.getElementById('<%= txtIngredientName.ClientID %>');
    if (aspTextBox) {
        aspTextBox.value = ingName;
    }
}

function Copy() {
    sync(); // 点击按钮时再强制同步一次，确保值是最新的
    return true; // 允许回发执行后台代码
}

3. 后台代码直接读取ASP.NET文本框的值：

protected void btnCopyIng_OnClick(object sender, EventArgs e)
{
    string name = txtIngredientName.Text;
    // 这里直接把name作为参数传入存储过程即可
}

解决方案2：后台正确获取请求值（如果必须用Request.Form） #

如果一定要通过Request.Form获取，需要注意两点：

1. 修正Content2输入框的name属性拼写为Ingredient name
2. 提交前强制AngularJS把模型值同步到DOM：

function Copy() {
    var inputEl = document.getElementById('txtIngName_new');
    var scope = angular.element(inputEl).scope();
    // 强制同步模型到DOM
    scope.$apply(function() {
        inputEl.value = scope.selectedIng.Ingredients_Name;
    });
    return true;
}

然后后台用正确的name键获取：

protected void btnCopyIng_OnClick(object sender, EventArgs e)
{
    string name = Request.Form["Ingredient name"];
    if (!string.IsNullOrEmpty(name))
    {
        txtIngredientName.Text = name;
        // 后续传入存储过程
    }
}

额外提醒 #

• ASP.NET WebForms会自动修改服务器控件的id（加上ContentPlaceHolder前缀），所以前端JS获取服务器控件时，一定要用<%= 控件ID.ClientID %>拿到真实的DOM id。
• 绑定AngularJS的输入框，直接读取DOM的value可能不是最新的，优先通过AngularJS的scope获取值更可靠。

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