How do I create my first Web Part with Visual Studio 2010 and SharePoint Foundation 2010?

in this post of my Visual Web Part post series I’m going to explain how to create your first Visual Web Part with Visual Studio 2010 and SharePoint Foundation 2010.

Walkthrough

We are going to create a new Visual Web Part project for SharePoint 2010. In this project we will add a small Visual Web Part containing only a label and a button. In addition, connect a button click event with this button and change with it the content of the label. Nothing special, but enough to discover the steps needed for simple Visual Web Part development on this new platform.

During this post we are following these steps:

• Step 1: Setup the project
• Step 2: Create and customize the Visual Web Part
• Step 3: Deploy and test the Visual Web Part

you need the SharePoint Development Tools for SharePoint 2010 activated to do this tutorial.

So, let us start…

Step 1: Setup the project

In this step we are going to create a Visual Web Part project and connect it with a SharePoint server.

1. Create a new project in Visual Studio 2010 (SharePoint –> 2010 –> Visual Web Part), call it VisualWebPartExample and press ok

2. The SharePoint Customization Wizard opens. Specify the desired target site (in my case called http://jacklaptop) and select Deploy as a farm solution. Confirm your selection with finish

3. Visual Studio creates for you a project customized for the SharePoint development. It adds automatically packaging and feature settings and an example Visual Web Part. Delete from the project VisualWebPart1.

To sum up, we created a new Visual Web Parts project which will be deployed as a farm solution. This solution is then activated automatically on the site collection that we specified at the beginning. Pretty cool.

Step 2: Create and customize the Visual Web Part

In this step we are going to add a new Visual Web Part to our project and customize it a little bit by adding a label with simple content

1) Press the right mouse button on your project and go to “Add –> new item”. Add a new Web Part called SimpleWebPart and confirm with add.

The solution explorer should look like in the next figure so far:

You can see in the solution explorer that there is a small container called SimpleWebPart. In this container you can find all necessary support files needed for the Visual Web Part development. A Visual Web Part is nothing else than a classic Web Part that automatically loads a web user control in it. The advantage of this approach is that you are able to use the design support with web user controls in Visual Studio. Now, we are going to finalize our Web Part development by customizing the most important file, the SimpleWebPartUserControl.ascx.

2) Open the file SimpleWebPartUserControl.ascx and go in design mode

3) Add a label and a button. This should look similar to next figure

4) By double clicking on the button, a button click event handler is associated to it. Please add in the previously generated method the code like in next code snippet:

namespace VisualWebPartExamples.SimpleWebPart
{
    public partial class SimpleWebPartUserControl : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "Event triggered";
        }
    }
}

That’s all for now. We don’t need to add more functionality to this Web Part. Go to the next step to deploy the solution on your web application.

Step 3: Deploy and test the Visual Web Part

Our next step is to deploy this solution and to activate the feature on our web application. Guess what? Visual Studio 2010 is doing it for you automatically. Afterwards, we are going to test our Web Part on the web application.

1) Right mouse button on our project and press deploy

2) Visual Studio starts the building, solution packaging and feature activating for you. That is really great, because these steps were made manually some years ago.

3) Open the web application that was specified at the beginning and add the newly added Web Part to any zone you like. Please note (I can’t say it often enough… Visual Studio did everything for you…). Do this by editing the page and going to the “insert” tab. Press the “Web Part” button and select from the “Custom” category the previously created Web Part.

  4) Last but not least, test the Web Part by pressing the Click me button

Summary

The example above is naturally nothing exciting. However, the most exciting thing is to see how simple the Web Part development has become with the support of Visual Studio 2010 and the SharePoint Development Tools. Great job to everyone who contributed to this fantastic feature.

Not enough? Ah, I forgot. If you want to debug the Web Part that you created before, you don’t need to attach the process manually anymore. With Visual Studio 2010 it is enough to press the debug button and you are ready for debugging.

That’s all for now. You can follow my post series of Visual Web Part development here, if you are interested in hearing more about this exciting new feature.

Best regards,

Patrick