Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

Visual Studio Add-In for Web Parts Generation

Rate me:
Please Sign up or sign in to vote.
4.94/5 (18 votes)
19 Jan 2009CDDL8 min read 154.3K   657   64   46
A Visual Studio add-in that allows generation of Web Parts based on prepared ASCX controls/templates.

Image 1

Introduction

This article will introduce you to a new Visual Studio 2005/2008 add-in that can be used for Web Parts generation based on a prepared ASCX control/template. The add-in should allow Web Part developers to easily make Web Parts using the Visual Studio HTML designer. It should save you a lot of time and make Web Part development an enjoying experience even for beginners.

This article is written in the form of a step-by-step tutorial. It will give beginners a chance to successfully make, deploy, and try their first Web Parts, and will save some time for advanced users as you can always run into challenges when working with SharePoint.

Background

A year ago, we released the first version of this Web Parts generator. The first version was made as a console application and its source code is hosted on CodePlex. I also posted an article here on CodeProject, explaining how that console application should be used for Web Parts generation (Base class for skinned Web Parts and generator tool).

I promised that we'll make a Visual Studio add-in to make the Web Parts development process even faster, and I kept my promise.

Using the add-in

This section will show how the add-in should be used for Web Parts generation, how a Visual Studio solution should be created before development starts, and how the developed solution can be deployed and tested.

Preparing a new Visual Studio solution

We will start by preparing a new Visual Studio solution. In order to be able to follow the steps from this section, you'll need to have a development environment with these installed:

  • MOSS 2007
  • Visual Studio 2005 with Service Pack 1 (or 2008)
  • Visual Studio Extensions for Windows SharePoint Services (you can download it from here)
  • The Visual Studio add-in that you can download from this page

Please follow these steps in order to prepare a new Visual Studio solution that will host Web Parts and their skins:

  1. Start Visual Studio and select "File" --> "New" --> "Project".
  2. Select the "Web Part" template from the list of available templates, as in this screenshot:
  3. ScreenHunter_02.jpg

  4. Enter the name of your project, the name of your solution, select the "Create directory for solution" option, and click on the OK button. You will get a new solution with a "Web Part" project.
  5. You will notice that the "Web Part" template already created a Web Part with the same name as the name you entered for your Web Part project. We will now remove that Web Part as we want to use this project for multiple Web Parts. To remove the Web Part, you should right click on the sub-folder that holds the Web Part and choose "Delete" from the context menu as in the next screenshot:
  6. ScreenHunter_03.gif

  7. We will now add a new project to Visual Studio to hold the skins/templates for our Web Parts. To do that, select "File" --> "New" --> "Project". Then, select "Class Library" from the list of templates, enter a name for this new project, choose the "Add to Solution" option, and click on the "OK" button as in the next screenshot:
  8. ScreenHunter_04.jpg

  9. Visual Studio will create a class called "Class1" because we selected the "Class Library" template. We will now delete that class and prepare it for skins/templates hosting. You should right click on "Class1.cs" and choose "Delete" from the context menu as shown:
  10. ScreenHunter_05.gif

  11. Now, right click on your "Class Library" project and choose "Add" --> "New Folder". Enter "Themes" for folder name, and then create a sub-folder below that folder and name it "default". You should now have a structure like in this screenshot:
  12. ScreenHunter_06.gif

Creating a skin/template for our Web Part

  1. We will now create our first skin/template for a new Web Part. Right click on the "default" folder and choose the "Add New Item" option. Choose "Text File", enter a name for the skin/template with the extension ASCX, and click on the "Add" button as in the next screenshot:
  2. ScreenHunter_09.jpg

  3. You should now have a structure like in this screenshot:
  4. ScreenHunter_10.gif

  5. Double click your ASCX file and enter some HTML into it. The following screenshot shows a simple skin/template with a Label, a TextBox, a Button, and a few more plain HTML controls:
  6. ScreenHunter_11.jpg

Creating the initial version of the Web Part

We will first create a new Web Part that will be used only as a placeholder for the Web Part that will be generated later.

  1. To create a new Web Part, you should right click on your "Web Part" project and select "Add" --> "New Item":
  2. ScreenHunter_14.gif

  3. Then, choose "Web Part" from the list of templates, enter a name for your Web Part, and click on the "Add" button:
  4. ScreenHunter_15.gif

    Please notice that although this is just a placeholder for the Web Part that will follow, you should enter the name of your Web Part as you want it to be named later.

At this point, you should have a structure like in this screenshot:

ScreenHunter_16.gif

and the source code of the placeholder Web Part should be like this:

ScreenHunter_18.jpg

Web Part generation

We now have all the projects prepared and a placeholder Web Part ready. To generate your first Web Part based on a previously prepared skin/template, you should follow these steps:

  1. Right click on your skin/template and choose "Generate SharePoint WebPart":
  2. ScreenHunter_19.gif

  3. Click on the "..." button to the right of the "Output WebPart file" field:
  4. ScreenHunter_20.gif

  5. Navigate to the Web Part placeholder that you created in one of the previous steps and select that file. You should see a warning message saying that you will overwrite an existing file. You should just confirm that you want to proceed:
  6. ScreenHunter_21.gif

  7. Enter the appropriate value for "Namespace" and click on the "Generate" button:
  8. ScreenHunter_22.gif

  9. Click on the "Web Part" project and then select the "Show All Files" option in Solution Explorer's toolbar:
  10. ScreenHunter_24.gif

  11. You should see a new file named the same way as your Web Part but with ".generated." in the file name. Right click on that file and choose the "Include In Project" option:
  12. ScreenHunter_25.gif

You should now have a structure like this:

ScreenHunter_26.gif

You can optionally modify your project to have the ".generated." file be dependent on the original file. You can do that if you go to the file system, locate and edit the ".csproj" file for your "Web Part" project, and modify the "include" line for the ".generated." file. An example of a section that includes this file in my sample is:

ScreenHunter_27.gif

and an example of a modified section is:

ScreenHunter_28.gif

If you make it dependent, then the project structure should look like this:

ScreenHunter_29.gif

Preparing for deployment and testing

Follow these steps to prepare an environment for deployment and testing:

  1. Download ASPNETLibrary.SharePoint.WebParts.dll from here.
  2. Right click on the solution in Solution Explorer and choose "Add" --> "New Solution Folder" as shown:
  3. ScreenHunter_30.gif

  4. Enter "ExternalLibraries" for the solution folder name:
  5. ScreenHunter_31.gif

  6. Open Windows Explorer, navigate to the solution folder on the file system, and create a folder with the same name in the root of the solution's folder:
  7. ScreenHunter_32.gif

  8. Extract the downloaded DLL into the "ExternalLibraries" folder on the file system.
  9. Go back to Visual Studio, right click on the solution folder, choose "Add" --> "Existing Item", navigate to th location where you downloaded ASPNETLibrary.SharePoint.WebParts.dll, and select the DLL. You should now have a structure in Visual Studio like this:
  10. ScreenHunter_33.gif

  11. Right click on the "References" node under your "Web Part" project and choose the "Add Reference" option:
  12. ScreenHunter_34.gif

  13. Select the "Browse" tab, navigate to the "ExternalLibraries" folder on the file ,system and choose the extracted DLL:
  14. ScreenHunter_35.gif

  15. You should now have ASPNetLibrary.SharePoint.WebParts.dll in the list of references. Check if your references list looks like this:
  16. ScreenHunter_36.gif

  17. Now, double click on the Web Part class file and enter some code. In this example, we will subscribe to the Button.Click event of our single button, and will set some text into the text box when the button is clicked:
  18. ScreenHunter_37.gif

  19. Open Internet Explorer and navigate to the website where you'll deploy the Web Parts and test them.
  20. Click on "View All Site Content":
  21. ScreenHunter_39.gif

  22. Click on the "Create" button:
  23. ScreenHunter_40.gif

  24. Select "Document Library" from the list of definitions:
  25. ScreenHunter_41.gif

  26. Enter "Themes" for the document library name and click on the "Create" button:
  27. ScreenHunter_42.gif

  28. Click on "New" and then "Folder":
  29. ScreenHunter_43.gif

  30. Enter "default" as the folder name and click on "OK".
  31. Select the "default" folder:
  32. ScreenHunter_44.gif

  33. Select "Upload" and then the "Upload Document" option:
  34. ScreenHunter_45.gif

  35. Browse to the folder that holds your skin/template and select the skin/template that you previously created. You should now have the skin/template in the "Thems\default" folder:
  36. ScreenHunter_46.gif

  37. Go to the root folder of your MOSS IIS website and open the web.config file. This folder is usually here: "c:\inetpub\wwwroot\wss\VirtualDirectories\PORT" where PORT is the port number of your IIS website:
  38. ScreenHunter_48.gif

  39. Locate the "SafeControls" section and add this line before the closing the "SafeControls" tag: <SafeControl Assembly="ASPNETLibrary.SharePoint.WebParts, Version=1.0.0.1, Culture=neutral, PublicKeyToken=fbf2c912531db231" Namespace="ASPNETLibrary.SharePoint.WebParts" TypeName="*" Safe="True" />.
  40. You should now have the SafeControls section in the web.config like this:
  41. ScreenHunter_49.gif

  42. Open Windows Explorer and navigate to "c:\Windows\Assembly". Open another Windows Explorer and navigate to your "ExternalLibraries" folder. Drag and drop "ASPNETLibrary.SharePoint.WebParts.dll" from "ExternalLibraries" to "c:\Windows\Assembly":
  43. ScreenHunter_51.jpg

Deploying Web Parts 

We are now ready to deploy our first Web Part. To do that, follow these steps:

  1. Right click on the "Web Part" project and choose the "Deploy" option:
  2. ScreenHunter_52.gif

  3. The deployment process will start and you should see the following messages in the left bottom corner of the Visual Studio window when the deployment is successfully completed:
  4. ScreenHunter_53.gif

  5. Open Internet Explorer and navigate to your MOSS website.
  6. Select "Site Actions" and then "Edit Page":
  7. ScreenHunter_54.gif

  8. Click on "Add a Web Part":
  9. ScreenHunter_55.gif

  10. Locate your Web Part in the list of Web Parts, select the check box next to it, and click on the "Add" button:
  11. ScreenHunter_56.gif

  12. You should now see your Web Part:
  13. ScreenHunter_57.gif

  14. To test its functionality, click on the "Submit" button, and if all the previous steps were performed correctly, then you should see a text box filled-in with the "Hello world!" message:
  15. ScreenHunter_58.gif

Source code and other resources

The complete source code for this add-in and the related DLLs is located on CodePlex.

License

This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)


Written By
CEO Vega IT Sourcing
Yugoslavia Yugoslavia
Sasa Popovic has M.Sc degree in Computer Sciences and Electrical Engineering.

He is a Software Architect and co-owner at Vega IT Sourcing - http://www.vegaitsourcing.rs.

Sasa is owner and contributor of several projects at codeplex (http://www.codeplex.com/aspnetlibrary).

You can read more about Sasa Popovic or add him to your contacts list at: LinkedIn

Comments and Discussions

 
QuestionMy Vote of 5 Pin
RaviRanjanKr19-Nov-11 3:05
professionalRaviRanjanKr19-Nov-11 3:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.