Get Value Of Control In Code-Behind

Question

When I call <%= this.HiddenField.Value %> the value of HiddenField control in this case remains the same state (5) ? But when I call it with console.log(document.getElementById('<%= this.HiddenField.ClientID %>').value); this return the changed state in this case "active", why? How I can get the changed value in code behind (I want <%= this.HiddenField.Value %> to return "active"(the changed value)) ?

code:

<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

You are confusing server side and client side code and when they run.

Server side code runs first. This is what's in the <%=%> blocks. In it, when using this.HiddenField.Value , it will output the server side value of the control, before it has been changed client side. this.HiddenField.ClientID will output the control ID as output by the server so you can get it from client side code.

When the page first loads, the <%=%> sections will be replaced with the server side values.

This would look like (in the browser once the page loads do - view source to see what was actually rendered to the browser):

<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" />

Then, and only then, will client side code run, with the results you have seen.

Answer 2

In the following line

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

<%= this.HiddenField.Value %> is evaluated at server so in the browser its

console.log('5')

because that's the value of the expression.

Answer 3

<%= whatever %> evaluates whatever when the page is rendered on the server.

If you look at the HTML sent to your client, you will find something like

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

The 5 is rendered by the server - there's nothing on the client's end linking that 5 to the value in the hidden field, so it doesn't get updated when the hidden field's value changes.

Answer 4

发生这种情况是因为asp.net控件显示“服务器”值，即5。使用javascript在客户端修改dom时，直到您发布页面后，asp.net控件值才会更改。

Answer 5

Or you can use ClientIDMode

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

Set and Get;

in jquery

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

in javascript

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