How to: Set the Display Mode of a Web Parts Page

The Web Parts technology provides a variety of page display modes that enable users to perform customizations on a Web page; however, it is the responsibility of the page developer to decide which display modes the end user will need and make them available. This topic shows how to create simple "design" and "browse" buttons that set the DisplayMode property of the WebPartManager instance. In design mode, the user can drag Web Parts controls to edit the layout of the page, whereas in browse mode only standard Web browsing functionality is available. For descriptions of the other page display modes, see Web Parts Page Display Modes.

To create the Design and Browse buttons and their Click events

1. Create an ASP.NET page that includes a WebPartManager control, some WebPartZone controls, and some standard Web controls inside the zones. For step-by-step assistance, see Walkthrough: Creating a Web Parts Page.

2. Create two Button controls outside the zones, one with its ID and Text properties both set to "Design" and one with both properties set to "Browse".

3. Place the Click event handlers for the two buttons in a <script> block in the head of the page, or in the code page if you are using a code-behind file. Your code should look like the following example.

   ProtectedSub Design_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Design.Click
     ' Get the current WebPartManager instance.Dim mgr As WebPartManager
     mgr = WebPartManager.GetCurrentWebPartManager(Page)
   
     ' Set the display mode.
     mgr.DisplayMode = mgr.SupportedDisplayModes.Item("Design")
   EndSubProtectedSub Browse_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Browse.Click
     ' Get the current WebPartManager instance.Dim mgr As WebPartManager
     mgr = WebPartManager.GetCurrentWebPartManager(Page)
   
     ' Set the display mode.
     mgr.DisplayMode = mgr.SupportedDisplayModes.Item("Browse")
   EndSub
   

   protectedvoid design_Click(object sender, EventArgs e)
   {
     // Get the current WebPartManager instance.
     WebPartManager mgr = WebPartManager.GetCurrentWebPartManager(Page);
   
     // Change the page display mode.
     mgr.DisplayMode = mgr.SupportedDisplayModes["Design"];
   }
   
   protectedvoid browse_Click(object sender, EventArgs e)
   {
     // Get the current WebPartManager instance.
     WebPartManager mgr = WebPartManager.GetCurrentWebPartManager(Page);
   
     // Change it back.
     mgr.DisplayMode = mgr.SupportedDisplayModes["Browse"];
   }
   

4. Build and run the page. When you click the Design button, you should be able to drag controls between zones; when you click Browse, drag-and-drop functionality is disabled.

See Also

Tasks

Walkthrough: Changing Display Modes on a Web Parts Page

Concepts

Web Parts Page Display Modes

Reference

DisplayMode

WebPartManager