Using Display Modes in Web Parts

1. Create a new Website. Name it UsingWebParts.



2.In the default page,add a webPartManager by dragging an instance from the Toolbox onto the page.

3.Drag a couple of webpartzones onto the page. In one webpartzone add a calender control in the second webpartzone add a login control.Drag a Dropdownlist onto the page.ASP.NET WebParts support five display modes.The Dropdownlist is used to display all the five supported displaymodes.



4.Name it ropDownListDisplayModes and set it AutoPostBack Property true. This will be used to switch the display mode back and forth.we'll add code to support all the display modes.



5.When u run the application the following browser window appears:



6. When we select design mode from the dropdownlistbox, we can move the controls around the page. For example, you can interchange the placements of calender and login controls in the page.
7.Next we will insert catalog zone on to the page. Catalog zone holds catalog part controls, from which the user can select the desired catalog part. Catalogs generally manage the visibility of the parts on the page. The catalog zone control shows and hides its contents based on the catalog display mode.
8.In this program, we will create a catalog control for adding two numbers. Go to Solution Explorer-->Add New Item-->Web User Control--> and name it as "Addition". Now add two text boxes and button to the Addition.ascx page. Type the following code in the source file.



9.Go to the design page of your program,add a catalog zone, in that add a declarative catalog part, and then drag and drop Addition control onto it. The code to display catalog zone is added in the source as:
WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;

10. Run the application again, select catalog from the dropdownlist, catalog zone is displayed on the page, check the control, add select WebPartZone3 as the zone, where the Addition control will be displayed as shown in figure below:



11. Now we add Editor zone on to the page. The Editor zone control represents the means through which end users may modify and personalize web pages according to their preferences. Personalizing a website includes such things as setting up personal information such as birthdays, gender, specific addressing, no of visits to the site etc.

12. To add the Edit zone, drag and drop Edit zone control on the page, and add the following code in the source code:

WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;

13.In the Editor Zone drag and drop the Apperance Edotor zone,Behavior Editor Zone,Property Editor Zone. Now run the application. Select Edit in the dropdownlist, then go to log in control, calender control or catalog control, right click on the small arrow at the top right corner, select edit from the list. Now the Editor zone for that control will be displayed on the page, the required changes can be entered, and the same changes will be reflected on the control.