Update Controls Outside of the Refresh Panel

A unique feature of WebAsyncRefreshPanel is its ability to update controls outside itself during its hidden asynchronous postback. This topic walks you through this feature by taking two WebNumericEdit controls, and adding them together during a button click, and placing the sum in a text box.

1. Create a new Microsoft® Visual Studio® ASP.NET WebSite.
2. From the toolbox, drag the WARP Panel control onto your Web form. Then drag a Button control into the WARP Panel control. Change the button's Text property to "Calculate", and change the ID property to "btnCalculate".
3. From the toolbox, drag two WebNumericEdit controls and a ASP Inbox TextBox control onto your Web form.
4. In the properties window, select in the WARP Panel's RefreshTargetIDs drop-down the controls you want to update that are outside the WARP Panel.
   Note: In order for WARP Panel to update a control using this feature, the control being updated must implement the ICallBackResponseRenderer interface. If the control does not implement this interface, then support is limited or may not be available at all.
5. Set up the Button's click event, and add the code shown below. This example code takes the two WebNumericEdit controls and adds their values together, and then places that value into the text box.

   In Visual Basic:

   Private Sub btnCalculate_Click(ByVal sender As Object, _
     ByVal e As System.EventArgs) Handles btnCalculate.Click
   	Dim myValue As Int32
   	myValue = System.Int32.Parse(Me.WebNumericEdit1.Value.ToString()) _
   	  + System.Int32.Parse(Me.WebNumericEdit2.Value.ToString())
   	Me.TextBox1.Text = myValue.ToString()
   End Sub
   

   In C#:

   private void btnCalculate_Click(object sender, System.EventArgs e)
   {
   	int myValue = System.Int32.Parse(this.WebNumericEdit1.Value.ToString()) 
   	  + System.Int32.Parse(this.WebNumericEdit2.Value.ToString());
   	this.TextBox1.Text = myValue.ToString();
   }
   

   
   
6. Run the Web form. Then type numbers into the WebNumericEdit controls, and click the button. You will see the text box's value change without the page posting back to the server.