How to create a Web application with Web controls

Summary
The Web Application Developer Framework (ADF) includes predefined controls that you can add to existing Web applications or use to create Web applications quickly and efficiently. The Web ADF controls are integrated with the visual design-time environment provided by Visual Studio. This topic shows how to create a Web application from the beginning using the Web ADF controls.

Creating a Web application with Web controls

Do the following steps:
  1. Start Visual Studio and create a project.
  2. Click the File menu, click New, and select Web Site. The New Web Site dialog box appears. See the following screen shot:
  1. Click the Location drop-down arrow and select Hypertext Transfer Protocol (HTTP).
  2. Click the Language drop-down arrow and select an applicable language.
  3. Click ASP.NET Web site under the Visual Studio installed templates area.
  4. Type a name and location for the Web application, then click OK. A blank Default.aspx page in design view appears. 
  5. Open the Visual Studio Toolbox, expand the ArcGIS Web Controls tab, drag a MapResourceManager control, then a Map control onto the Default.aspx page.
  6. Set the ResourceItems property on the MapResourceManager control by clicking the Edit Resources verb on the control in design view. Alternatively, you can also click the ellipsis next to the ResourceItems property on the MapResourceManager property page to show the MapResourceItem Collection Editor dialog box. See the following screen shot:

 
  1. Click Add to add a new MapResourceItem. Set its Definition property by clicking the ellipsis on the property page to display the Map Resource Definition Editor. Select a resource type and define the appropriate properties. For more information, see the Add Resources section in MapResourceManager control. In general, you can use any resource type that generates a map image.
  2. Close the MapResourceItem Collection Editor.
  3. Set the MapResourceManager property on the Map control by selecting the Map control in design view, or in the Properties window clicking the drop-down list for the MapResourceManager property, and selecting the name of the MapResourceManager control added in Step 6 (the default is MapResourceManager1).
  4. Change the size of the Map control to at least 300 by 300 pixels. This is not required; however, it will make the Map easier to visualize on the page.
  5. Add a Toc control to the Default.aspx page.
  6. Change the positioning of the control to be absolute, which enables the control to be placed anywhere on the page. By default, Visual Studio adds controls in flow layout. To change the position do the following:
    1. In design view, click the Toc control.
    2. Click the Format menu and click Position. The following Position dialog box appears:


    3. On the Position dialog box, click Absolute under the Positioning style section, then click OK.
  7. Select the Toc control in design view and drag it to another location on the page. It immediately displays in the upper left corner of the page. This is default behavior associated with Web control positioning in Visual Studio. Select the Toc control again and drag it to the right of the Map control.
  8. Set the BuddyControl property on the Toc control by selecting the Toc control in design view or in the Properties window and clicking the drop-down list for the BuddyControl property. The list includes the names of Map controls available on the page. Select the name of the Map control added in Step 6 (the default is Map1). This buddies the Toc with the Map control.
  9. Add a Toolbar control to the Default.aspx page.
  10. Set the BuddyControls property on the Toolbar control by selecting the Toolbar control in design view, or in the Properties window and clicking the ellipsis for the BuddyControls property. The BuddyControl Collection Editor dialog box opens.
  11. Add a new item and set its Name property to the name of the Map control added in Step 6 (the default is Map1).
  12. Set the ToolbarItems property on the Toolbar control by selecting the Toolbar control in design view, or in the Properties window and clicking the ellipsis for the ToolbarItems property.  The ToolbarItems Collection Editor dialog box opens.
  13. Add all tools under the Navigation Tools node. For more information, see the Add Toolbar Items section in Toolbar control. 
  14. Click OK to exit the ToolbarItems Collection Editor dialog box and save all changes to the Web site. In design view, the site resembles the following:

  1. Click Start to run the application. Explore the interface of the Web application. For example, click the Zoom In tool on the toolbar and drag a rectangle over the map.
  2. Click Stop to stop the application and close the browser window.