Part I:   Create a basic web part in Visual Studio 2005 and deploying it to sharepoint

A few weeks back I came across a blog post that talked about a Data Viewer Web Part that can be purchased from Lightning Tools. I decided that it would be good exercise to actually develop a web part similar to the one that is offered by Lightning tools.  I have not developed sharepoint web parts in the past so it would give me some experience with sharepoint web part development and deployment. I would like to share the source code and the steps required to build a re-usable data web part that will work with SQL Server. I am posting the entire steps, code snippets and screen shots in 3 separate parts.

Before I started coding the Web Part, I had few clearly defined goals in mind

The Web Part should work on sharepoint

1. The data source, connection and the query for the web part must be configurable through webpart properties and should not be hard coded.
2. The user account and password for the database should be configurable from webpart properties. Once the password is entered, it must be hidden with password character.
3. User must have the ability to enter a T-SQL command in one of the web part property and the query result should be displayed in a grid view.
4. The grid view must have paging and user should be able to control how many records to show in each page by setting a webpart property.

Things you need before starting this project

Visual Studio 2005

1. Experience with C# or similar programming language
2. Sharepoint (WSS or MOSS). This project should be developed on a visual studio 2005 which is installed on the server hosting the sharepoint environment.

Building a Web Part Project in Visual Studio 2005

Start your visual studio 2005 and click:   File>> New >> Project

Click on visual C# >> Windows and select "Web Control Library"

In the Name field   enter: DataViewer and then click "OK" See Screenshot below

In the solution explorer on the right, rename the file webCustomControl1.cs ( Right Click + Rename)  to DataViewer.cs

On the Dataviewer.cs delete the following lines just below the DataViewer namespace

[DefaultProperty("Text")]

[ToolboxData("<{0}:WebCustomControl1 runat=server></{0}:WebCustomControl1>")]

Examine the line below

public class DataViewer : WebControl

The above line says that the DataViewer class is inheriting ( : ) from WebControl class

Since this is going to be a WebPart, we need to instead inherit from the webpart class.

Change the code to following

public class DataViewer : System.Web.UI.WebControls.WebParts.WebPart

In the above code, we inherited the WebPart class but typed the namespace and the entire parent class name, we can change this to  a shortened version by simply putting a reference to the parent class in the using section, type the following in the using section

using System.Web.UI.WebControls.WebParts;

Change the inheritance code to

public class DataViewer : WebPart

Delete the text property code. In the output.write, change it to output.Write("Data Viewer Test");

The final code listing should look like this

Build the project. Build>>DataViewer. This should compile without any errors.

On the solution Explorer, expand properties, click on assemblyinfo.cs and open the file

Locate the line : [assembly: AssemblyVersion("1.0.*")]

Change this to

[assembly: AssemblyVersion("1.0.0.0")]

The purpose of this change is to make sure that the assembly version will be the same even if we compile multiple times. For now, we just want to make sure it stays the same version, so that we will have easier time to deploy and debug the webpart.

Click on Project>> Dataviewer Properties

Click on the "Build" on the left side

Under "output" section locate "output path" and then click on "browse" button

In the "select output path" dialog box, select the path of a sharepoint web application and then choose the bin folder.

Example: If you have as sharepoint application under C:\inetpub\wwwroot\   then you should choose C:\inetpub\wwwroot\bin as the output path.

If you deploy the Webpart assembly to the bin folder, you can easily debug your code and do not need to provide a strong name to the assembly with a public key token.

For now, we will just deploy to the bin folder and not worry about signing the assembly with a public key token. (Note: if a bin folder does not exist, you can simply create a folder called "bin")

Build the project again, this time the dll will be output to the bin folder. There will be two new files in the bin folder called dataviewer.dll and dataviewer.pdb

The next step is to register this assembly as safe in the web.config of the sharepoint application.

Go to one folder above the bin folder and open the web.config file in notepad or visual studio 2005

Under the safecontrols section enter the following line

<SafeControl Assembly="DataViewer" Namespace="DataViewer" TypeName="*" Safe="true" />

The assembly name is DataViewer, the Namespace is also called DataViewer, in the typename we have a "*" which means all the classes in this assembly. Safe= true is telling the sharepoint that this webpart is safe.

Save the web.config file and close it.

Go to the sharepoint web application where you want to now add the web part

Click on Site Acttions>> Site Settings

Under "Gallery" section, click on "Web Parts"

In the webpart gallery page, click on "New" you should now see a webpart called dataviewer.dataviewer with a filename dataviewer.webpart

Select this webpart and click the button "Populate Gallery". This webpart is now added to the webpart gallery.

Click on edit icon to edit the propererties of this webpart.

For the group type: Data

For the Quick Add Groups type: Data

Click "OK"

If you got this far, the web part has been successfully deployed and added to the web part gallery. You are now ready to use this webpart in any site within the site collection.

Go to a site within the sharepoint site collection

Click on Site Actions>> Edit Page

On any of the web part zone, click on "Add a web part"

Scroll down to the section called "data" and select the dataviewer webpart and click "Add"

The Dataviewer Webpart should now be on the page with the title "DataViewer" and the text "DataViewer Test" as shown below

This concludes part 1 of the reusable SQL data viewer Web Part. In part 2, we will start coding a data access class. This library will have a method to execute a SQL statement and return a data table. In Part 2, we will also look at adding gridview control to our webpart.