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
- The data source, connection and the query for the web part must be configurable through webpart properties and should not be hard coded.
- 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.
- 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.
- 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
- Experience with C# or similar programming language
- 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:inetpubwwwroot then you should choose C:inetpubwwwrootin 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.
sam