Question

当我调用<%= this.HiddenField.Value %>时，HiddenField控件的值在这种情况下保持相同的状态（5）？但是当我用console.log(document.getElementById('<%= this.HiddenField.ClientID %>').value);调用它时，返回已更改的状态，在这种情况下为“active”，为什么？如何在代码中获取更改后的值（我希望<%= this.HiddenField.Value %>返回“active”（更改后的值））？

代码：

<script>
    $(function () {
        document.getElementById('<%= this.HiddenField.ClientID %>').value = "active";
        console.log(document.getElementById('<%= this.HiddenField.ClientID %>').value); // this return te changed value "active"
        console.log('<%= this.HiddenField.Value %>') //this again is 5 not "active"
    });
</script>
<asp:HiddenField ID="HiddenField" runat="server" Value="5" />

Answer 1

您正在混淆服务器端和客户端代码以及它们何时运行。

首先运行服务器端代码。这就是<%=%>块中的内容。在其中，当使用this.HiddenField.Value时，它将在客户端更改之前输出控件的服务器端值。 this.HiddenField.ClientID将输出控件ID作为服务器的输出，以便您可以从客户端代码中获取它。

首次加载页面时，<%=%>部分将替换为服务器端值。

这看起来像（在页面加载时在浏览器中查看源代码以查看实际呈现给浏览器的内容）：

<script>
    $(function () {
        document.getElementById('someId').value = "active";
        console.log(document.getElementById('someId').value); // this return te changed value "active"
        console.log('5') //this again is 5 not "active"
    });
</script>
<input type="HiddenField" ID="someId" Value="5" />

然后，只有这样，客户端代码才会运行，并显示您看到的结果。

Answer 2

在以下一行

 console.log('<%= this.HiddenField.Value %>')

<%= this.HiddenField.Value %>在服务器上进行评估，因此在浏览器中进行评估

console.log('5')

因为这是表达式的值。

Answer 3

<%= whatever %>在服务器上呈现页面时评估whatever。

如果您查看发送给客户的HTML，您会发现类似

的内容

$(function () {
    document.getElementById('blahblah_HiddenField').value = "active";
    console.log(document.getElementById('blahblah_HiddenField').value);
    console.log('5')
});

服务器呈现5 - 客户端没有任何内容将5链接到隐藏字段中的值，因此当隐藏字段的值发生更改时，它不会更新。

Answer 4

这是因为asp.net控件显示“服务器”值，即5.使用javascript你在客户端修改dom，asp.net控件值在你发布页面之前不会改变。

Answer 5

或者您可以使用 ClientIDMode

<asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />

设置并获取;

in jquery

$('#HiddenField1').val('active');
console.log($('#HiddenField1').val());

在javascript中

document.getElementById('HiddenField1').value = 'active';
console.log(document.getElementById('HiddenField1').value);

在代码背后获得控制价值

5 个答案: