Creating a MOSS 2007 WebPart with VS 2008

Ok, so there are a bunch of articles out there that talk about how to create a webpart using VS2005 and some with VS2008. Without being redundant I wanted to show the entire process of creating a webpart from start to finish.

Prerequisites
In order to follow this example the following components are required:

1) A pc (OR VM) running Windows 2003 SP1 with WSS 3.0 or MOSS 2007 installed. From hereon to be known as the dev machine.

2) Vs2008 installed on the dev machine.

3) Visual Studio 2008 Extensions for Sharepoint installed on the dev machine. Download them here: http://www.microsoft.com/downloads/details.aspx?FamilyID=7bf65b28-06e2-4e87-9bad-086e32185e68&displaylang=en

Background

For this example I'll be creating a webpart to display the daily dilbert cartoon from the dilbert website. I'll be cheating a little to grab the image. I'll load the html from the site programatically and scour it for the image tag I need. It may sound complex but I will only have to write 25 lines of code. I'll be using C# to accomplish my goal.

Steps

1) On the Dev machine start VS2008.

2) Create a new Project. (File->New Project)

3) Under "Visual C#" in the project types list you'll see sharepoint. When you select that the
template list at the right will be populated. One of the items there is "Web Part". Select It. Once you've set your project name and location click OK.



TIP: I'm a big believer in naming projects to mimic their namespace. eg. companyabc.Sharepoint.Webparts.dll

4) A new project will be created for you with a default webpart in it's own folder.


 

Let's delete the WebPart1 folder and create a new webpart. Right click on the folder "Webpart1" and delete it.

5) Now we need to add a new webpart. Right click on the project and select "Add -> New Item". From the dialog box select "WebPart". (You may need to select Sharepoint from the categories list on the left. Name the webpart "DailyDilbert" and click "Add"

6) You should now have a project that looks like this:


 

Note that studio created a folder for our webpart as well as 3 files: a .cs, .webpart and .xml file. Let's focus on the DailyDilbert.cs file for now but feel free to have a look at the other 2 to see what they're doing.

7) Open the DailyDilbert.cs file so we can edit it. You'll see that there is one method holder that has been created for us. it's called CreateChildControls and looks like this:

protected override void CreateChildControls()
{
base.CreateChildControls();

// TODO: add custom rendering code here.
// Label label = new Label();
// label.Text = "Hello World";
// this.Controls.Add(label);
}

This is the main method where we will create and populate the webpart content. In our case we will need an image control and that's it. We will also require 2 methods. One to load the html (LoadPage) and one to strip out the image tag and the subsequent image uri (GetImageURI).


LoadPage

The loadpage method will perform an httpwebrequest to retrieve the html into a streamreader and then subsequently into a string. Here's the code:

private string LoadPage(string URI)
{
string retVal = "";
HttpWebRequest pageRequest = (HttpWebRequest)WebRequest.Create(URI);
pageRequest.Method="GET";
WebResponse pageResponse = pageRequest.GetResponse();
StreamReader sr = new StreamReader(pageResponse.GetResponseStream(), System.Text.Encoding.UTF8);
retVal = sr.ReadToEnd();
pageResponse.Close();
return retVal;
}

GetImageURI

The GetImageURI calls LoadPage then scours it for a certain tag. In order to figure out the tag I needed I simply viewed the source on the dilbert page. Anyway, here's the code for it:

private string GetImageURI()
{
ring retVal = "";
int start, end = 0;
string html = "";
html = LoadPage(http://www.dilbert.com);
//Note: Change <- to < in the next line!
start = html.IndexOf("<-img src="http://www.blogger.com/" /> 0)
{
start += 10;
end = html.IndexOf("\"", start);
retVal = "http://www.dilbert.com" + html.Substring(start, end - start);
}
return retVal;
}

NOTE: I'm sure there are more efficient ways to grab the tag. This is just a quick example.

Now that we can ultimately get the ImageURI we need to add an image control to the webpart. We'll do that back in our CreateChildControls method as follows:

protected override void CreateChildControls()
{
base.CreateChildControls();

string imgUri = "";
imgUri = GetImageURI();
Image img = new Image();
img.ImageUrl = imgUri;
this.Controls.Add(img);
}

You can see how simple it is. I just create a new image control. Set the ImageUrl property to the imageUri we grabbed form our GetImageURI property. Finally I just need to add the new image control to the controls collection. It's that simple!


Deployment

Ok, now we've created our webpart but how do we use it? Well since VS is installed on the same machine as Sharepoint it's easy. Just right click on the project and select "Deploy". In a minute or so you'll get confirmation that your webpart was deployed.


Now What?

Now that our webpart is deployed to the Sharepoint server we can add it to a page.

1) Browse to your Sharepoint site and select "Site Actions->Edit Page".

2) Click "Add a Web Part" on the section you want to add it to.

3) Select it from the list and select "Add"


 

And presto:


 
Cheers!



NOTE: If you need to deploy your webpart to a different server just have a look in the bin\debug folder of the solution. You'll see the everything you need to deploy including a setup.bat file to do the heavy lifting for you! Just copy all the files and folders to the new server and run setup.bat!