Create a Visual Web Part Project with Visual Studio server controls

In this task, you create a Visual Web Part project in Microsoft Visual Studio 2010.

1. Start Visual Studio 2010, click File, point to New, and then click Project.
2. Navigate to the Visual C# node in the Installed Templates section, click SharePoint, and then click 2010.
3. Select the Visual Web Part project template (see Figure 1), provide a name (such as, SampleWebPart), a location for your project, and then click OK

  Figure 1. Select the Visual Web Part project type

1. In the local site do you want to use for debugging dropdown, select the site to use (such as http://localhost/sites/SampleWebSite). Also select the Deploy as a farm solution option and then click Finish.Note that after the project is created, Solution Explorer contains the default Visual Web Part named VisualWebPart1 (see Figure 2). Also see in Solution Explorer the presence of the Features and Package nodes. A feature organizes your application in a way that SharePoint Foundation understands. Features can be deployed to SharePoint Foundation at the site or Web level. The package contains features and other assets used when you deploy solutions to SharePoint Foundation.

. Figure 2: The SampleWebPart project in the Solution Explorer  

Add a Tree View Control to the Web Part

In this task, you add a Tree View control to the design surface of the Web Part. The Tree View control displays a hierarchical view of lists and Sub Webs.

1. In Solution Explorer, expand the VisualWebPart1 node, right-click the VisualWebPart1UserControl.ascx file, and then click View Designer. This action opens a view to drag-and-drop controls from the toolbox onto the Web Part designer surface.
2. From the Toolbox on the left side of the screen, click the Navigation section, and then drag a TreeView control onto the design surface. If you do not see the Toolbox on the left side of the screen, on the View menu, click Toolbox.
3. Select the TreeView control and in the Properties panel in the lower-right corner of the Visual Studio screen, type the name siteStructure in the ID field.

Add Code to the Project

In this task, you add Microsoft Visual C# code to the project that iterates through all lists and SubWebs in the SharePoint site, and adds them to the TreeView control.

1. In Solution Explorer, expand the VisualWebPart1UserControl.ascx node, right-click the VisualWebPart1UserControl.ascx.cs node, and then click View Code.
2. Next, substitute the following C# code for the code in the code screen.

using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using Microsoft.SharePoint.Utilities; using System.Web; namespace BonnevilleTestBed.Bonneville { public partial class BonnevilleUserControl : UserControl { protected void Page_Load(object sender, EventArgs e) { SPWeb thisWeb = null; TreeNode node; thisWeb = SPContext.Current.Web; //Add the Web's title as the display text for the tree node, and add the URL as the NavigateUri. node = new TreeNode(thisWeb.Title, null, null, thisWeb.Url, "_self"); //The Visual Web Part has a treeview control called siteStructure. siteStructure.Nodes.Add(node); //Get a reference to the current node, so child nodes can be added in the correct position. TreeNode parentNode = node; //Iterate through the Lists collection of the Web. foreach (SPList list in thisWeb.Lists) { if (!list.Hidden) { node = new TreeNode(list.Title, null, null, list.DefaultViewUrl, "_self"); parentNode.ChildNodes.Add(node); } } foreach (SPWeb childWeb in thisWeb.Webs) { //Call our own helper function for adding each child Web to the tree. addWebs(childWeb, parentNode); childWeb.Dispose(); } siteStructure.CollapseAll(); } void addWebs(SPWeb web, TreeNode parentNode) { TreeNode node; node = new TreeNode(web.Title, null, null, web.Url, "_self"); parentNode.ChildNodes.Add(node); parentNode = node; foreach (SPList list in web.Lists) { if (!list.Hidden) { node = new TreeNode(list.Title, null, null, list.DefaultViewUrl, "_self"); parentNode.ChildNodes.Add(node); } } foreach (SPWeb childWeb in web.Webs) { //Call the addWebs() function from itself (i.e. recursively) //to add all child Webs until there are no more to add. addWebs(childWeb, parentNode); childWeb.Dispose(); } } } }

Learn the core features of SharePoint and become master with our expertise tutorials.

SharePoint Web Part life cycle

Life Cycle of SharePoint Webparts:

1. Protected override void OnInit(EventArgs e)

OnInit – Configuration values set using WebBrowsable properties and those in web part task pane are loaded into the web part.

2. Protected override void OnLoad(EventArgs e)

OnLoad User Generated Event – for e.g. button click on the web part.

3. Protected override void CreateChildControls ()

CreateChildControls – All the controls specified are created and added to controls collection. When the page is being rendered for the first time the method generally occurs after the OnLoad() event. In case of postback, it is called before the OnLoad() event. We can make use of EnsureChildControls() - It checks to see if the CreateChildControls method has yet been called, and if it has not, calls it.

4. Protected override void LoadViewState(object savedState) //Only at Postback

LoadViewState – The view state of the web part is populated over here.

5. protected override void OnPreRender(EventArgs e)

OnPreRender – Here we can change any of the web part properties before the control output is drawn.

6. protected override void Render(System.Web.UI.HtmlTextWriter writer)

RenderContents – Html Output is generated.

7. protected override void OnUnload(EventArgs e)8. public override void Dispose()

Create a SharePoint 2010 Web Part that is meaningful and that utilizes the following features:

• User Controls
• Code Behind
• Custom Web Part Properties
• Custom Editor Part(s) Properties
• Accessing SharePoint Data within the Web Part

The Web Part I’ll be demoing here doesn’t do much of anything other than show you how to accomplish all the above features giving you the power to adapt the code so you can make a meaningful Web part for your own specific needs. Let’s begin: This walkthrough provides the steps for creating a basic custom Web Part that can be added to your site pages. It is a simple Web Part that enables the user to define a custom message that is displayed inside the Web Part. This Web Part derives from the Microsoft ASP.NET Web Part class, which is the recommended practice for Microsoft SharePoint Foundation. Prerequisites ASP.NET & SharePoint development tools in Microsoft Visual Studio 2010 Using visual studio we can develop two types of web parts will discuss in this module

Build and Deploy the Web Part

In this task, you build and deploy the Web Part project. Build and deploy the project by using one of the following options:

• When debugging the SharePoint solution, use the F5 key to build and deploy your solution. By doing this, the debug experience includes steps such as help for creating a Web Part Page and resetting Internet Information Services (IIS).
• Alternately, you can build and deploy your solution by clicking the Build menu, selecting Build Solution, verifying that the solution builds without any errors, and then selecting Deploy Solution.
• After successful deployment of Web Parts , you need to follow the below steps to use the web part in SharePoint environment.

  Create a Web Parts Page In this task, you create a Web Parts page to contain the Web Part, unless one has already been created for you.

1. If you clicked F5 to debug your application, by default, the page where you create a Web part page is displayed. Otherwise, open the SharePoint site, click Site Actions, click View All Site Content, click Create, scroll and select the Web Part Page option.
2. In the Web Part Page screen, provide the information requested about that particular Web Parts page. For example, provide a name (SampleWebPartPage) and layout template for the page.
3. In the Document Library dropdown, select Site Pages, and then click Create. SharePoint creates and displays your Web Parts page.

Figure 3: A sample Web Part page  Add the Web Part to the Web Parts Page In this task, you add the Web Part to the Web Parts page and test the solution.

1. in On the Web Parts page, click into the Add a Web Part text in the zone where you want the Web Part displayed.
2. In the Categories list, click Custom. In the Web Parts box, click VisualWebPart1.
3. In the About the Web Part box at the top of the page, click Add. The Web Part is added to the zone that you selected as shown in Figure 4. Note that the lists and SubWebs are displayed a hierarchical view.

Figure 4. The Web Part after being added to the zone in the Web Part page