This introductory tutorial presents an overview of building SharePoint web parts. Web parts are perhaps the most common type of development projects any new SharePoint 2010 developer will undertake. More detailed instructions on coding, deployment and adding of web parts to SharePoint 2010, will be presented in later tutorials.

When you build a web part, you effectively build a re-usable component that can be used on many different pages and sites. One of the coolest things about web parts is that they can very easily be added to web part pages by non-technical users such as perhaps project managers or business unit managers.

Now, as a developer, you will use Visual Studio 2010 to create your web parts. For example, you can create a visual web part and design your user interface with a graphic design service by simply dragging and dropping checkboxes, textboxes, labels, dropdown lists and so forth to your control. Of course you can also add your own custom business logic in the form of code files to perform some sort of action that interacts with the user. You can then deploy your web part directly from Visual Studio because of its tight integration with SharePoint.

Visual Studio 2010 has a packaging designer that will allow you to press Ctrl+F5 to package your web part and deploy to SharePoint.
 

Types of Web Parts in SharePoint 2010

There are two types of web parts supported by SharePoint 2010:

• Visual Web Parts: Allows you to drag and drop controls from the toolbox into a user control.
• Standard (ASP.NET) Web Parts: You need to build pure web part interface and logic in a class file.

Now, let us look at one example of both.
 

Visual Web Part Example

Visual Studio provides different views of our web parts and you can chose the one that suits you best. The screenshot below shows the split view where we have the graphical designer at the bottom of the screen and the source or mark-up at the top of the screen.

We can use the toolbox to drag and drop controls to either of these panes and from there we can use the properties window to set properties or we can type property values directly into the mark-up.

The above example shows a simple ASP.NET label called Label1 and we have set it up to have the default text property of “Welcome to Efyko.com”.

Now lets go set a custom property for this label. Switch to the code view. Let us change the text property to “Custom Text: Welcome to Efyko.com”. Since this code runs on page load, the label will always display “Custom Text: Welcome to Efyko.com” and we will never see the original default text property because it has been overridden by the page load event.

See the full code below:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

namespace VisualWebPartExample.VisualWebPart1
{
    public partial class VisualWebPart1UserControl : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = "Custom Text: Welcome to Efyko.com";
        }
    }
}

Now we can deploy our web part very straight-forwardly by pressing Ctrl+F5 from within Visual Studio. This will package and deploy the web part. We can then add it to a web part page with a few simple clicks.

Here is how our web part looks like in SharePoint 2010. We have our message that says “Custom Text: Welcome to Efyko.com”.

Let’s now take a look at the standard web part example.
 

Standard (ASP.NET) Web Part Example

The standard web part does not have a design service. So we will build our user interface in code. The important thing to note is that the standard web part inherits from the ASP.NET WebPart base class.

Note: When creating a standard web part, we proceed in the same manner as for the visual web part. We use the template called “Visual Web Part” provided by Visual Studio 2010. After Visual Studio 2010 creates the project, it automatically adds packaging and feature settings and a sample Visual Web Part (usually named VisualWebPart1). Delete this VisualWebPart1 file from Solution Explorer. In Solution Explorer, right-click your project name, click Add, click New Item, and then select Web Part. Name the Web Part what you want, and then click Add. The code structure of the standard web part is created for you. Now modify the code the way you want.

What we typically do is override the CreateChildControls method in our code. We then start interacting with the SharePoint object model. We retrieve the current user’s name from the SharePoint object model using SPContext.Current.Web.CurrentUser.Name. And then we may start adding ASP.NET controls. See the full code below. We have added a LiteralControl and assigned it a custom message based on the username earlier retrieved.

using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace StandardWebPartExample
{
    [ToolboxItemAttribute(false)]
    class StandardWebPartExample : WebPart
    {
        protected override void CreateChildControls()
        {
            string name = SPContext.Current.Web.CurrentUser.Name;
            LiteralControl message = new LiteralControl("Welcome " + name + " to Efyko.com");
            this.Controls.Add(message);
        }
    }
}

What is really important to note about standard ASP.NET web parts is that we always need to add them to the control tree especially if they have server side events. In the above example, we do this in the last statement.

As before, I can press Ctrl+F5 and with a few clicks, add my standard web part to a web part page in SharePoint.

The result is shown in the screenshot above. We have retrieved the name of the currently logged in user “AXVM\administrator” and have used that in our welcome message.

This has been a very brief introduction to web parts but hopefully you can see how easy it is to get started. We will delve further into web parts in the object model in later tutorials.