Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
NET
This article discuss about the Web Parts, new feature introduced in ASP.NET 2.0. You can see many websites that are modular in nature today. Many websites often organize their content into modules that allows for personalization. Information is broken down into manageable parts which end users can rearrange or move around the parts to suit their preferences. User has also the flexibility to save his preferences for future browser sessions. This way, end user can be empowered to personalize site dynamically. Before ASP.NET 2.0, developer had to build his own custom personalization framework to implement personalization feature in the application. In ASP.NET 2.0 you can build web portal that offer personalization and modularization of information using new Portal framework. This new framework provides effective way to build a modular web site that dynamically reapplies settings on a peruser basis. Web Parts are objects in the Portal Framework which the end user can open, close or move from one zone of the page to another. Web Parts are included in ASP.NET server control framework and are used like any other ASP.NET server controls. You can also build your own custom Web Parts. Don't confuse ASP.NET 2.0 Web Parts with Microsoft SharePoint services even though they use same Portal Framework. These two technologies are not the same.
o o o o
a) Normal mode: End user cannot edit or move sections of page. b) Edit Mode: End user can edit Web Parts on the page including Web Parts title, color or even setting custom properties. c) Design Mode: End user can rearrange the order of the pages Web Parts in a WebPartZone. d) Catalog Mode: End user enjoys the choice to add new Web Parts or add deleted Web Parts in any WebPartZone on the page.
o o o
Personalization
Personalization is the core behavior of WebParts. You can modify or personalize the layout, appearance and behavior of WebParts controls. Personalized settings are persisted for future browser sessions.
UI Structural components
UI structural components create infrastructure for the WebParts to work on a page. They provide core services needed by any Web Part including coordinating and tracking all individual WebParts controls. They also control the different modes in which a page can be (Normal, Edit, Design, and Catalog). It also manages WebParts zones. For example: WebPartManager control is one such UI Structural component which should be required on each page that holds WebParts.
WebParts UI controls
Web Parts control set is extensive and flexible which can be used to build Web Parts or you can create your own custom Web Parts by inheriting from the System.Web.UI.WebControls.WebParts.Webpart class. You can also reuse existing ASP.NET server controls as Web Parts controls by encapsulating it in a genericwebpart class. Portal Framework defines everything in terms of zones. Zones are container of Web Parts controls. They act as layout managers on Web Parts page. Zones are managed by Portal Framework manager.
WebPartManager
WebPartManager control is server control that completely manages the state of the zones and content placed in the zones on a per-user basis. This control doesn't have any visual interface, can add and delete items within zones of the page. You can have only one WebPartManager for each page that works with Portal Framework. You can run WebPartManager in one of several display modes. It facilities communication between different elements contained in the zones. For example: you can pass a specific name/value pairs from one item to another item within the same zone, or between items in different zones. You can drag and drop the WebPartManager control from the toolbox to the design surface. Since it doesn't have a UI interface, it appears as a gray box. You can find all Web Parts server controls in WebParts section of toolbox as shown below.
WebParts in Toolbox After you place the WebPartManager control on the page, the next step is to create zones from which you can utilize the Portal Framework. Web zones define specific rows or columns as individual content areas managed by WebPartManager. There is a sample Web Parts project, used in this tutorial. To start the sample, you need to unzip files and create some virtual directory. Set ASP.NET version to 2.0 for directory if needed. Disable anonymous access and activate Integrated Windows Authentication, like in image bellow.
Set authentication methods You can open web site through an Visual Studio 2005, like showed bellow:
Design view in Visual Studio 2005 You can observe that above page includes <asp:WebPartManager> control that manages the items contained in the three zones on this page. You can declare each web zone in one of two ways. You can use the <asp:WebPartZone> element directly in the code, or you can create the zones within the table by dragging and dropping WebPartZone controls onto the design surface. You can look at WebPartZone clearly in above design. WebPartZone control defines an area of items that can be moved, minimized or maximized based on user preferences. You can place anything in zones including HTML elements, web server controls, user controls and custom controls. You can see declaration of WebPartZone controls in above HTML code. Any thing placed into WebPartZone can be treated as Web Part. Useful attributes of WebPartZone include LayoutOrientation attribute which controls the display of items either horizontally or vertically. You can observe in our above example, first WebPartZone has horizontal layout.
ZoneTemplate Element
In order to include items within the WebPartZone control, we must include a <zoneTemplate> element. This will bind all the items present within a particular zone. When using visual studio 2005, by default, IDE creates a Microsoft SQL Server Express Edition file called ASPNETDB.MDF and stores it in the App_Data folder. Portal Framework uses this database to store all the customization points. So, we are using Microsoft SQL Server Express Edition for this example Start the web application and you should see output like this:
Output listing In the output listed above, you can observe that when we click down arrow present next to name of Web Part, we will have options to minimize or close Web Part.
Add PageCatalogPart control inside <ZoneTemplate> section within the Catalog Zone. When the mode is changed to Catalog Mode, you can see the catalog control in output. Here in our example, just click the Catalog button to change mode to Catalog and you can see the catalog control. Now click the display button. You can see the below output listing. Now click small down ward arrow besides Chicago or ASP.NET Tutorials Item.
Now select close option from the dropdown list. You can see it in below output.
Selecting Close option from dropdown You can observe from below listing that Chicago Web Part is removed from the screen.
Webpartzone2 is disappeared which include chicago picture Now click Catalog button. At this point, you can see the deleted Web Parts in the catalog zone. The PageCatalogPart control contains a title and checkbox list of items that can be selected. The pageCatalogPart control also includes a dropdown list of all available Web Part Zones on the page. From here, you can place the selected Web Parts into one of the Web Part Zones available from the list. After you chose the Web Parts and the appropriate zone in which you want to place item, click the add button and Web Part appear in the specified location. In below listing I chose to add Deleted Chicago Web Part into WebPartzone1. Now you can see the Chicago Web Part in WebPartZone1.
Output after clicking Catalog button and adding Chicago webpartzone2 back to scree
symbol. Click the left mouse button and hold the Web Part and drag it to WebPartZone2. While dragging, the calendar control becomes transparent and drops the calendar control in WebPartZone2 where the blue line appears. Below listing gives you an idea. I am dragging calendar control from WebPartzone1 to WebPartZone2.
Editing the Calendar control properties When the user clicks the Edit link from dropdown list you can see Appearance Editor/Layout Editor appear in the EditorZone. You can see it from below listing
Output after clicking Edit button From the listing, we might see that Appearance section allows users to change title and how the title of Web Part appears. Layout section enables user to change the order in which Web Parts appears in a zone or move Web Parts from one zone to another. Behavior section enables site editors to change dynamics of how end user can modify Web Parts. To display Behavior section, you have to make modifications to Web.Config <system.web> <webParts> <personalization>
<authorization> <allow users ="*" verbs ="enterSharedScope"/> </authorization> </personalization> </webParts> At the same time, you will have to add this code to Page_Load event. protected void Page_Load(object sender, EventArgs e) { if (WebPartManager1.Personalization.Scope == PersonalizationScope.User) { if (WebPartManager1.Personalization.CanEnterSharedScope) { WebPartManager1.Personalization.ToggleScope(); } } }