How to use Web ADF partial postback solution to interact with non-Web ADF content and manage the callback results


Summary This topic describes how to use the Web Application Developer Framework (ADF) AJAX framework to interact with non-Web ADF content—in this case, updating text in four textboxes in the same Web page as the Map control.

This topic is the third in a series of three related "How to" topics. The others are How to add a custom toolbar item to a toolbar control and How to implement a custom solution to manage callback content.

This topic illustrates how to manage callback content to update four ASP.Net label controls in the same Web page as the Map control. Each label represents either the north, south, east, or west extent of the map. When the map extent changes, the text in each labels is updated to represent the current extent parameters.
A custom CallbackResult object for each label is created and appended to the callback result for the Map control. The Web ADF JavaScript function processCallbackResult() contains logic to process non-Web ADF content depending on the parameters provided.
Perform the following steps to complete this task:
  1. Create a Web application using How to create a Web application with Web controls as a guide. At minimum at add MapResourceManager, Map Control.
  2. In the aspx page, add four label controls, one on each side of the Map control as shown in the following code:
[HTML]
<asp:Label ID="LabelW" runat="server" Style="left: 50px; position: absolute; top: 292px"
Text="Label" Width="70px"></asp:Label>

<asp:Label ID="LabelN" runat="server" Style="left: 311px; position: absolute; top: 127px"
Text="Label" Width="60px"></asp:Label>
<asp:Label ID="LabelE" runat="server" Style="left: 565px; position: absolute; top: 291px"
Text="Label" Width="73px"></asp:Label>
<asp:Label ID="LabelS" runat="server" Style="left: 316px; position: absolute; top: 459px"
Text="Label" Width="66px"></asp:Label>
        
The Web page appears as follows.
  1. Add a new event handler for an ExtentChanged event on the Map control. In the following code, the name of the method is Map1_ExtentChanged:
[C#]
protected void Map1_ExtentChanged(object sender, ExtentEventArgs extentEventArgs)
{
  1. Get the new map extent via the ExtentEventArgs parameter and set the labels on the server to store the north, east, south, and west values as shown in the following code:
[C#]
ESRI.ArcGIS.ADF.Web.Geometry.Envelope adfEnvelope = extentEventArgs.NewExtent;

// Set label text on the server
LabelN.Text = adfEnvelope.YMax.ToString("N");
LabelE.Text = adfEnvelope.XMax.ToString("N");
LabelS.Text = adfEnvelope.YMin.ToString("N");
LabelW.Text = adfEnvelope.XMin.ToString("N");
  1. Update label text on the client via the map control's callback results. Since the event was fired by the map control, the map's callback results - including any we choose to add - are processed on the client without any further action (such as registering a script block or data item). A custom callback result is created to update each label and is added Map's callbackresults. Refer code below:
[C#]
ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult updateLabelCallbackResult =
    ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult.CreateSetInnerContent(LabelN,
    adfEnvelope.YMax.ToString("N"));
Map1.CallbackResults.Add(updateLabelCallbackResult);
updateLabelCallbackResult =
    ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult.CreateSetInnerContent(LabelE,
    adfEnvelope.XMax.ToString("N"));
Map1.CallbackResults.Add(updateLabelCallbackResult);
updateLabelCallbackResult =
    ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult.CreateSetInnerContent(LabelS,
    adfEnvelope.YMin.ToString("N"));
Map1.CallbackResults.Add(updateLabelCallbackResult);
updateLabelCallbackResult =
    ESRI.ArcGIS.ADF.Web.UI.WebControls.CallbackResult.CreateSetInnerContent(LabelW,
    adfEnvelope.XMin.ToString("N"));
Map1.CallbackResults.Add(updateLabelCallbackResult);
Since layer visibility and rendering did not change, the Map control does not need to be explicitly refreshed.
The callback result string appears as follows:
[C#]

    "[{\"id\":\"LabelN\",\"type\":\"Label\",\"action\":\"innercontent\",\"params\":[\"-70.00\"]},
{
     \
        
            "id\":\"LabelE\",\"type\":\"Label\",\"action\":\"innercontent\",\"params\":[\"312.00\"]},
    {
         \
            
                "id\":\"LabelS\",\"type\":\"Label\",\"action\":\"innercontent\",\"params\":[\"-217.00\"]},
        {
             \
                
                    "id\":\"LabelW\",\"type\":\"Label\",\"action\":\"innercontent\",\"params\":[\"101.50\"]}]"
  1. At runtime, the callback string generated by the custom CallbackResults enables the modification of non-Web ADF controls and elements. Upon the initial map extent change, the labels around the map are updated dynamically in the browser, without a full page postback. The following image shows a runtime example of the Web ADF application built in this topic:



See Also:

ASP.NET script callback solutions
How to add a custom toolbar item to a toolbar control
How to implement a custom solution to manage callback content