Creating Web Parts Page
Creating Web Parts Page
Page 1 of 18
Prerequisites
In order to complete this walkthrough, you will need: A site that can identify individual users. If you have a site already configured with ASP.NET membership, you can use that site for this walkthrough. Otherwise, the walkthrough provides instructions on how to configure your site to identify you by your Windows user account name. A visual design environment for creating Web pages. This walkthrough uses Visual Studio 2005. A configured personalization provider and database. Web Parts personalization is enabled by default, and it uses the SQL personalization provider (SqlPersonalizationProvider3) with Microsoft SQL Server Express Edition to store personalization data. This walkthrough uses SQL Server Express and the default SQL provider. If you have SQL Server Express installed, no configuration is needed. SQL Server Express is available with Microsoft Visual Studio 2005 as an optional part of the installation, or as a free download from Microsoft.com. To use a full version of SQL Server, you must install and configure an ASP.NET application services database, and configure the SQL personalization provider to connect to that database. For details, see Creating and Configuring the Application Services Database for SQL Server4.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 2 of 18
that you use that site. Otherwise, you can create a new site and use your current Windows user name as your user identity. Note: You do not need to do anything to enable Web Parts personalization; it is enabled by default for the Web Parts control set. When you first run a Web Parts page on a site, ASP.NET sets up a default personalization provider to store user personalization settings. For more information 5 about personalization, see Web Parts Personalization Overview .
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 3 of 18
11. Drag a WebPartZone9 control into the left table column. 12. Right-click the WebPartZone9 control, choose Properties, and set the following properties: ID: "SidebarZone" HeaderText: "Sidebar" 13. Drag a second WebPartZone9 control into the middle table column and set the following properties: ID: "MainZone" HeaderText: "Main" 14. Save the file, but do not close it yet. Your page now has two zones that you can control separately. However, neither zone has any content, so the next step is to create content. For this walkthrough, you work with Web Parts controls that display only static content. The layout of a Web Parts zone is specified by a ZoneTemplate element. Inside the zone template, you can add any ASP.NET control, including a custom Web Parts control, a user control, or a server control. In this walkthrough, you use the Label10 control to display static text. When you place a server control in a WebPartZone9 zone, ASP.NET treats the control as a Web Parts control at run time, which enables Web Parts features for the control.
5. Remove the Text attribute from the Label10 control. 6. Inside the Label Page</h2>".
10
The markup will look like the following example: <asp:WebPartZone id="MainZone" runat="server" headertext="Main"> <ZoneTemplate> <asp:Label ID="Label1" runat="server" Title="Content"> <h2>Welcome to My Home Page</h2> </asp:Label> </ZoneTemplate> </asp:WebPartZone> 7. Save the file.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 4 of 18
Next, you will create a user control that can also be added to the page as a Web Parts control.
2. Switch to Design view. 3. From the Standard tab of the Toolbox, drag a TextBox 4. Add a blank line after the text box that you just added. 5. Drag a Button12 control onto the page and drop it below the text box. 6. Set the Text property of the Button 7. Switch to Source view. 8. Make sure that the markup for the user control looks like the following example: C# No code example is currently available or this language may not be suppo rted. C# <%@ Control language="C#" classname="SearchUserControl" %> <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox> <p> </p> <asp:Button runat="server" ID=" Button1" text="Search" /> 9. Save and close the file. Security Note: This control has a text box that accepts user input, which is a potential security threat. User input in a Web page can potentially contain malicious client script. By default, ASP.NET Web pages validate user input to ensure that the input does not contain HTML elements or script. As long as this validation is enabled, you do not need to explicitly check for script or HTML elements in user input. For more information, see Script 13 Exploits Overview .
12 11
control to "Search".
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 5 of 18
Now you can add Web Parts controls to the Sidebar zone. You will add two controls to the Sidebar zone. One contains a list of links, and the other is the user control you created earlier in the 10 walkthrough. You create the links by using a Label server control, similar to the way you created the static text for the Main zone. However, although the individual server controls 10 contained in the user control could be contained directly in the zone (like the Label control), in this case they are not. Instead, they are part of the user control you created in the previous procedure. This demonstrates a common way to package controls and extra functionality in a user control, and then reference that control in a zone as a Web Parts control. At run time, the Web Parts control set wraps both controls inside a GenericWebPart controls. The generic part control becomes the parent control, and you can access the server control 15 through the parent control's ChildControl property. Using generic part controls enables standard Web server controls to have the same basic behavior and attributes as Web Parts controls that 8 derive from the WebPart class.
14
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 6 of 18
In the title bar of each control is a down arrow that provides access to a verbs menu of actions that you can perform on a control. Click the verbs menu in one of the controls, and then click the Minimize verb and note that the control is minimized. From the verbs menu, click Restore, and the control returns to its normal size.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 7 of 18
4. Switch to Source view. 5. Remove all the existing markup in the new file, and then paste in the following code. This user control code uses features of the Web Parts control set that enable a page to change its view or display mode. It also enables you to change the physical appearance and layout of the page while you are in certain display modes. C# No code example is currently available or this language may not be suppo rted. C# <%@ control language="C#" classname="DisplayModeMenuCS"%> <script runat="server"> // Use a field to reference the current WebPartManager control. WebPartManager _manager; void Page_Init(object sender, EventArgs e) { Page.InitComplete += new EventHandler(InitComplete); } void InitComplete(object sender, System.EventArgs e) { _manager = WebPartManager.GetCurrentWebPartManager(Page); String browseModeName = WebPartManager.BrowseDisplayMode.Name; // Fill the drop-down list with the names of supported display modes .foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes) { String modeName = mode.Name; // Make sure a mode is enabled before adding it.if (mode.IsEnabled (_manager)) { ListItem item = new ListItem(modeName, modeName); DisplayModeDropdown.Items.Add(item); } } // If Shared scope is allowed for this user, display the // scope-sw itching UI and select the appropriate radio // button for the current us er scope.if (_manager.Personalization.CanEnterSharedScope) { Panel2.Visible = true; if (_manager.Personalization.Scope == PersonalizationScope.User) RadioButton1.Checked = true; else RadioButton2.Checked = true; } } // Change the page to the selected display mode.void DisplayModeDropdo
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 8 of 18
wn_SelectedIndexChanged(object sender, EventArgs e) { String selectedMode = DisplayModeDropdown.SelectedValue; WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode]; if (mode != null) _manager.DisplayMode = mode; } // Set the selected item equal to the current display mode.void Page_P reRender(object sender, EventArgs e) { ListItemCollection items = DisplayModeDropdown.Items; int selectedIndex = items.IndexOf(items.FindByText(_manager.DisplayMode.Name)); DisplayModeDropdown.SelectedIndex = selectedIndex; } // Reset all of a user's personalization data for the page.protectedvo id LinkButton1_Click(object sender, EventArgs e) { _manager.Personalization.ResetPersonalizationState(); } // If not in User personalization scope, toggle into it.protectedvoid RadioButton1_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.Scope == PersonalizationScope.Shared) _manager.Personalization.ToggleScope(); } // If not in Shared scope, and if user has permission, toggle // the s cope.protectedvoid RadioButton2_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.CanEnterSharedScope && _manager.Personalization.Scope == PersonalizationScope.User) _manager.Personalization.ToggleScope(); } </script> <div> <asp:Panel ID="Panel1" runat="server" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" runat="server" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <asp:DropDownList ID="DisplayModeDropdown" runat="server" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 9 of 18
<asp:LinkButton ID="LinkButton1" runat="server" Text="Reset User State" ToolTip="Reset the current user's personalization data for the page." Font-Size="8" OnClick="LinkButton1_Click" /> <asp:Panel ID="Panel2" runat="server" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" runat="server" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" runat="server" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div> 6. Save the file. Note: Although this user control can enable users of the Web Parts page to toggle between shared and user-personalization mode, the personalization feature requires the user to have appropriate permissions, as specified in the Web.config file. This walkthrough does not illustrate how to grant these rights, so the feature is not enabled. Therefore, the User and Shared radio buttons on the user control are hidden when you run the page. 16 For more information on personalization, see Web Parts Personalization .
control and a
The resulting markup in the table cell will look similar to the following code:
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 10 of 18
<td valign="top"> <asp:EditorZone ID="EditorZone1" runat="server"> <ZoneTemplate> <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" /> <asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" /> </ZoneTemplate> </asp:EditorZone> </td>
Note: Although the AppearanceEditorPart18 and LayoutEditorPart19 controls are used in this walkthrough, the BehaviorEditorPart20 and PropertyGridEditorPart21 controls are not, because they require setup beyond the scope of this walkthrough.
8. Save the WebPartsDemo.aspx file. You have created a user control that lets you change display modes and change page layout, and you have referenced the control on the primary Web page. You can now test the capability to edit pages and change layout.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 11 of 18
4. Click Display Mode, and then click Browse. The page is refreshed, the zone names disappear, and the My Links control remains where you positioned it. 5. To demonstrate that personalization is working, close the browser, and then load the page again. The changes you made are saved for future browser sessions. 6. In the Display Mode menu, click Edit. Each control on the page is now displayed with a down arrow in its title bar, which contains the verbs drop-down menu. 7. Click the arrow to display the verbs menu on the My Links control and then click Edit. The EditorZone17 control appears. It displays the EditorPart22 controls that you added. 8. In the Appearance section of the edit control, change the title to My Favorites. In the Chrome Type list, select Title Only, and then click Apply. The following figure shows the page in edit mode.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 12 of 18
9. In the Display Mode menu, click Browse to return to browse mode. The control now has an updated title and no border, as shown in the following figure.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 13 of 18
Note: In this walkthrough, you create a template containing FileUpload and Calendar controls. This will allow you to test the basic functionality of the catalog, but the resulting Web Parts controls do not have any real functionality. If you have a custom Web or user control, you can substitute it for the static content.
23 24
control to expose
24
8. From the Standard tab of the Toolbox, drag a FileUpload control and a Calendar into the WebPartsTemplate section of the DeclarativeCatalogPart26 control. 9. Switch to Source view and inspect the source code of the CatalogZone control.
control
Notice that the DeclarativeCatalogPart control contains a WebPartsTemplate element with the two enclosed server controls that you will be able to add to your page from the catalog. Note: If you have a custom control, this is the place to substitute it for one of the server controls in the example, although this requires steps beyond the scope of this walkthrough. For further details, see the code example in the documentation for the 8 WebPart class.
26
10. Add a Title property to each of the controls that you added to the catalog, and set the property to the names shown in the following example. Even though the title is not a property you can normally set for these controls at design time, when a user adds these 9 controls to a WebPartZone zone from the catalog at run time, they are each wrapped with 14 a GenericWebPart control. This enables them to act as Web Parts controls. Therefore, they will be able to display titles.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 14 of 18
The markup for the controls contained in the DeclarativeCatalogPart26 control will look like the following example: <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server"> <WebPartsTemplate> <asp:Calendar ID="Calendar1" runat="server" title="My Calendar" /> <asp:FileUpload ID="FileUpload1" runat="server" title="Upload Files" /> </WebPartsTemplate> </asp:DeclarativeCatalogPart> 11. Save the page. You can now test the catalog.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 15 of 18
6. In the Display Mode menu, click Browse. The catalog disappears and the page is refreshed. 7. Close the browser and then load the page again. The changes you made persist.
Next Steps
This walkthrough has illustrated the basic principles of using Web Parts controls on an ASP.NET Web page. Suggestions for further exploration include: Create Web Parts controls that offer more sophisticated functionality than the static Web Parts from this walkthrough. You can create Web Parts controls as user controls or custom controls. For details, see the documentation for the WebPart8 class.
See Also
Concepts ASP.NET Web Parts Overview
1
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 16 of 18
Links Table
1 2 3
http://msdn.microsoft.com/en-us/library/hhy9ewf1(v=VS.90).aspx http://msdn.microsoft.com/en-us/library/k3w2y2tf(v=VS.90).aspx
4 5 6 7
10 11 12 13 14
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.genericwebpart (v=VS.90).aspx
15
http://msdn.microsoft.com/enus/library/system.web.ui.webcontrols.webparts.genericwebpart.childcontrol(v=VS.90).aspx http://msdn.microsoft.com/en-us/library/ms178182(v=VS.90).aspx
16 17
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.editorzone (v=VS.90).aspx
18
19
20
21
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 17 of 18
22
23 24 25
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webparts.catalogzone (v=VS.90).aspx
26
http://msdn.microsoft.com/enus/library/system.web.ui.webcontrols.webparts.declarativecatalogpart(v=VS.90).aspx
Community Content
topic sharepoint need help
hi everybody i installed the share point server and configured with database using sql server, as a developer i need to know my clear points?? as a developer after installing the sharepoint server 1. from the visual studio 2005 how can i use share point server 2. how to create web part 3. after creating a web part now how to use 4. i need procedure how to deploy the application on server, server side what i have installed related to share point 5. what is the prerequisite developing web part 6. i can installed windows share point services 3.0 on xp?? please clear my point which i mentioned above as a developer i need to my role from start to end(develpment to deployment) thanks i am eagerly waiting for your response [email protected] [email protected] [email protected] [Noelle Mallory - MSFT] Please post questions to the MSDN Forums at http://forums.microsoft.com/msdn. You will likely get a quicker response through the forum than through the Community Content.
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011
Page 18 of 18
http://msdn.microsoft.com/en-us/library/sk23dydw(d=printer,v=VS.90).aspx
21-Jun-2011