Introduction
The goal of this article is to show how to share User controls between the ASP.NET Web Application and Visual Web Part for SharePoint.
Outline of the Steps
The basic steps to make this happen are as follows:
- Write your User Control as you normally would, typically using the Visual Studio designer.
- Deploy a precompiled User Control solution.
- Drop control on the Web Application.
- Prepare SharePoint to use the User Control solution.
- Drop control on the SharePoint Web Part Application.
We will look at those steps in more detail in the rest of the article.
1. Start by creating a new solution and adding a new ASP.NET Web Application, call it 'CustomUIControl'. Make sure you selected the .NET Framework 3.5 when creating a project. Since we are exposing this control to SharePoint and SharePoint project can only be created under 3.5, we have to use a lower framework for the controls project.
Delete Default.aspx page and add Web User Control by right clicking on the project and selecting Add/New Item. Name the Control CustomerControl.ascx.
Code your ascx page as you normally would.
2. When you are done with your control, start by signing the project with the key and building the project using Visual Studio.
To sign the project, go to properties of your project, Signing tab, check sign the assembly and point to existing or issue a new key.
Building the project from Visual Studio will build your CustomUIControl.dll. You will need to compile the project with special settings using the Framework 2.0 compiler to get a separate ascx assembly. In order to get this assembly, open command window and change your directory to the 2.0 Framework. Make sure to run as an Administrator.
Compile your project using the following line:
aspnet_compiler -p
c:\source\article\customuicontrol\customuicontrol -v customuicontrol -fixednames
c:\source\articlebuild -keyfile c:\source\article\customuicontrol\
customuicontrol\contstest.snk
Let me explain what each path means:
- c:\source\article\customuicontrol\customuicontrol is the path to the location of your project.
customuicontrol is the project name you are compiling. - c:\source\articlebuild - is the location of the build. This has to be different from the path of your current project and it has to be empty, otherwise you will get errors during compilation.
- c:\source\article\customuicontrol\customuicontrol\controlstest.snk is the location of your key file you signed your
CustomUIControl project with.
If you look at the compiled directory, you will see several files that were created by the compilation process.
We will need both the files, CustomUIControl.dll and the App_Web_customercontrol.ascx.cdcab7d2.dll. The latter file contains the Web Control portion we are going to be using for the UI.
Put both the assemblies in the GAC.
Run command window from your VS2010 as an Administrator.
Run the following commands to register your assemblies in the GAC:
gacutil /i c:\source\articlebuild\bin\customuicontrol.dll
gacutil /i c:\source\articlebuild\bin\app_web_customercontrol.ascx.cdcab7d2.dll
Verify you added both of the assemblies to the GAC. You can locate registered assemblies in C:\Windows\assembly.
3. Add a new ASP.NET Web Application to test out your control.
Add both assembly references to the new project; make sure to change copy local to True in the Properties window. Your web application does not have to be looking in the GAC, but you can modify your web.config to add those assemblies from GAC if you have a need for it.
In your Web Application, select the aspx page you want to drop the control into and add a tag to register the control.
You can look up what the values should be in your tag by double clicking your App_Web_customercontrol.asxc.cdcab7d2.dll in the References folder.
As you can see, for your register tag:
<%@ Register TagPrefix="CC" Namespace="ASP"
Assembly="App_Web_customercontrol.ascx.cdcab7d2" %>
The assembly name is App_Web_customercontrol.ascx.cdcab7d2, namespace is ASP and the name of the control to use on the page is customercontrol_ascx.
Add the new tag to your aspx page:
<cc:customercontrol_ascx runat="server" ID="test1" />
and run the project to verify control behaves as expected.
4. The next step is to add a new SharePoint Feature project to your solution.
Add new Visual Web Part under SharePoint 2010 project and name it SPCustomerPart.
Rename your web part to CustomerWebPart and your ascx control to CustomerWebPartUserControl.ascx.
Your solution explorer should look similar to the screen shot below:
Add CustomUIControl.dll and App_Web_customercontrol.ascx.cdcab7d2.dll to your SharePoint project, copy local should be set to False in the Properties Window.
We need to make sure our assemblies are referenced in the web.config for the SharePoint project; otherwise it would not know where to find it.
Locate your web.config, under default configuration, ours is located under C:\inetpub\wwwroot\wss\VirtualDirectories\80.
Open web.config file and add assembly registration to the file:
You can look up version and PublicKeyToken in the GAC c:\windows\assembly for the assemblies you have registered earlier.
5. Back in the SharePoint project, open your CustomerWebPartUserControl.ascx and add the register tag and your user control on the page:
This should look exactly like Web Application tags, or if you wish you could add a tag to the web.config of your SharePoint in which case you would not need Register tag on the page.
At this point, you should be able to run your Feature and add it to your SharePoint page.
When you validated your Feature works as expected, you can deploy your feature.
In the command window, change your directory to c:\program files\common files\microsoft shared\web server extensions\14\bin or browse to where your stsadm.exe is located.
Run the following command to deploy:
stsadm -o addsolution -filename [full path your.wsp]
stsadm -o deploysolution -name [no path just name.wsp] -allowgacdeployment
-immediate -url [your url]
You can run your SharePoint site and verify your web part works as expected.
History
- 5th December, 2011: Initial post
