updatepanel working in terms of request and response - asp.net

Question

I have 2 sets of asp:TextBox and asp:Button controls with one set inside an update Panel and another outside..
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button Text="text" runat="server" ID="btn1"/>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button Text="text" runat="server" ID="btn2"/>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
codebehind
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = TextBox2.Text;
}
Now My question is, how exactly the Updatepanel is working?
Actually I thought, on btn1 click only the contents of UpdatePanel are sent to server as request and response comes from server to only that updatepanel.
So, I entered some text in TextBox2 and clicked btn1.. but surprisingly TextBox1 text got changed to as that of TextBox2..
Then I thought, the entire page is sent to server as request and response comes only to that updatePanel and is updated accordingly..
Now I checked both the requests(ie., Request from btn1 and btn2) in Google Chrome Developer tool.. again to my surprise, there is difference in Content-Length of the request..
If there are more controls outside the update panel then the Content-Length would be more with the request from btn2
Could someone put some light on this..

Answer 1

Ok.. the thing here is that even though you have a UpdatePanel in the page , when a postback occurs all the contents are posted back to the server. This behaves like a normal page without an UpdatePanel. That's the reason you have an option UpdateMode for the UpdatePanel...
It is UpdateMode="Always" and UpdateMode="Conditional".
Because you did not set anything here it is Always by default, because of which the whole page was posting back...
To see the changes you were looking for after adding the UpdatePanel you need to set it to conditional and add the elements as AsynPostbackTriggers ...
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" />
</Triggers>
<ContentTemplate>
<asp:Button Text="text" runat="server" ID="btn1"/>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button Text="text" runat="server" ID="btn2"/>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
Now when you click btn1 only contents inside the UpdatePanel are posted back and can be seen in the response.
If btn2 is clicked only the contents outside the UpdatePanel are seen in the response..