Add Custom aspx Pages to SharePoint using SharePoint Empty Project and WebApplication

Here we create a project using Empty template which is one of the Visual Studio extensions for Windows SharePoint Services templates. Using this, the VSeWSS features are used in automating the packaging deployment and debugging easily. Again an ASP.NET Web Application project template is added to the solution which allows the designers to play with the UI and drag drop controls easily. Then the pages from the ASP.Net Web Application project are linked to Visual Studio extensions for Windows SharePoint services project. Finally some configurations are done on the project which allows it to work with SharePoint.

Here we go with the step by step implementation.....

Step1: Create New Project With Empty Template:
In visual Studio 2008, create a new project with Empty project template. Name it as ‘Trial1’ as shown in Fig1 and give ok.
This is one of the visual studio extensions for windows SharePoint Services template.

Fig1. Create new Project

Thus the solution explorer resembles as shown in Fig2

Fig2. Solution Explorer

Step 2: In Solution Create a New ASP.Net Web Application:
Now right click the solution ->New Project - > ASP.Net Web Application. Name this Web application as ‘Trial1WebApplication’ the following Figs gives a detailed explanation.

Fig3. Add New Project

Fig4. Add New ASP.Net Web Application

This adds a new ASP.Net web application to the solution. Now the solution explorer looks like Fig5.

Fig5. Solution Explorer

Now delete the Default.aspx, Web.config, and 'App_Data' from ‘Trial1WebApplication’. When the project is connected to TFS, the 'App_Data' will not be able to delete. Then leave it as such.
The solution explorer looks as shown in Fig6.

Fig6. Solution Explorer

Step3: Add 'default.Master' to Web application:
Now create a folder ‘masterurl’ in ‘Trial1WebApplication’ and add ‘default.Master’ to it.
In the designer rename the Content place holder id with ‘PlaceHolderMain’. And delete the Content place holder with id ‘head’.

Step4: Add a New .aspx Page to the Web application:
Now right click the Trial1WebApplication and give add new Item, and select WebForm. Name this page as ‘Trial1TestPage1.aspx’.
In the designer, remove the ‘AutoEventWireup’ attribute. And replace the designer code as in Fig7.

Fig7.Designer view of TestPage.aspx

Design the page as required inside the content place holder. For sample I have just included a Dev Express button and Dev Express textbox. Where in when the button is clicked the system date is been displayed.
When Dev express controls are used add the respective reference to the Web Application.

Step5: Add the newly created .aspx page to share point project as a link to the existing item:

Right click the Sample (share point project) and give add existing item. Now locate to the location where the newly created TestPage.aspx exist and in Add option give ‘Add as link’ as shown in Fig8. This adds the Trial1TestPage1.aspx to the share point project.

Fig8. Link TestPage.spx to SharePoint Project

Step6: Add a new Module template to share point project and place the linked Trial1TestPage1 to it:
Right click the Trial1 project and give add new item and select on Module template. Name the Module item as ‘Trial1Page’ as shown in Fig8. This includes a new ‘Module.xml’ and ‘Sample.txt’. Now delete the ‘Sample.txt’ and drag and drop the ‘Trial1TestPage1.aspx’ into ‘Trial1Page’ Module under ‘Trial1’ project as shown in Fig9 and Fig10.
This creates a folder in “c:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATES\FEATURES\” by the name of the Module created and uploads the aspx pages and Module.xml into it.

Fig9.Add Module Template to SharePoint Project

Fig10. Solution Explorer.

Now edit the Module.xml and change the file name and the URL as shown in Fig11.

Fig11. Module.xml

Step7: Change the name space of the Linked Trial1TestPage1.aspx.cs:
In the ‘Trial1TestPage.aspx’ linked to Trial1 share point project, change the name space of '.cs' and '.designer.cs' to Trial1 as shown in Fig12.

Fig12. TestPage.aspx.cs

Step8: Add required References for Trial1 Project:
Now add all the required reference required for aspx files into Trial1 project.

Step9: Clear the Build option for Trial1WebApplication:
Right click the Solution and give properties. Under Configuration Properties uncheck the build option for the Trial1WebApplication as shown in Fig13, and click on Apply and ok.

Fig13. Configuration Properties Dialog

Step10: Build the Project:
Now right click the Trial1 project and build the project and check for no errors.

Step11: Change the Trial1TestPage1.aspx in the Trial1 Project and Deploy the Solution:
Now in the Trial1TestPage1.aspx under Trial1 project, change the 'inherits' attribute and 'MasterPageFile' as shown in Fig14.

Fig14. TestPage.aspx

Here the 'PublicKeyToken' is unique for every project. And it is got from Assembly after building the project.
Now deploy the solution and check for no errors.

Step12: Include the 'SafeControl' tag in the SharePoint Web.config
Add the 'SafeControl' tag for the new project in the share point’s web.config file. Locate the 'web.config' file in C:\Inetpub\wwwroot\wss\VirtualDirectories\80 and include the new tag under 'SafeControls' tag


Step13: View in SharePoint site:
Browse the page.
http://ServerName:PortNumber/Trial1TestPage1.aspx

Sample Output:

Fig15. Sample Output

Add Custom aspx Pages to SharePoint using _layouts approach

This method is the simplest of all. Here web application pages are deployed under the '_layouts' folder of SharePoint and the pages can be accessed from any SharePoint site. 'Layouts' is a special directory that gets ‘virtualized’ in each SharePoint site. I.e. In each SharePoint will have a /_layouts path from the root of the web.

Here we go with the step by step process in implementing....

Step1: Create a New Project with SharePoint’s Empty template:
In visual Studio 2008, create a new project with Empty project template. Name it as ‘Applciation1’ as shown in Fig1 and give ok.
This is one of the visual studio extensions for windows SharePoint Services template.

Fig1. Create New Project

Step2: Create a New Template Item to the Project:
Now right click the ‘Application1’project and give add new item as shown in Fig2

Fig2. Add New Item

Now from in add new Item dialog box, select on Template under share point as shown in Fig3. And name it as ‘TestPage.aspx’. This adds a new template folder containing TestPage.aspx to the application.

Fig3. Add New Template

Step3: Format the Path of New aspx Page:
Add a new folder “LAYOUTS” under Template, and add any folders into it as required. Finally place the aspx pages into this folder. Now the solution explorer resembles as shown in Fig4.

Fig4. Solution Explorer

Step4: Build and Deploy the Solution:
Now right click the solution and give build and deploy. This creates a new folder Malathy in SharePoint’s Template/LAYOUTS folder. In my case the path is “c:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\MALATHY”. And the aspx pages are stored in Malathy folder.

Step5: View in SharePoint:
Browse the Page
http://ServerName:PortNumber/_layouts/Malathy/TestPage.aspx

Sample output:

Fig5. Sample Output

Pros:

Very Simple way to make the functionality available in every site.

Easy to develop.

Cons:

Cant use the ASP.Net master page of the site context as the _layouts applications is a separate ASP.Net application.

Conclusion:

It is best to use this approach based application when you want to extend every site with some functionality such as additional administration pages.

Add Custom .aspx Pages in SharePoint - (Works with asp controls only)

Step 1: Create a new Web Application Project from Visual Studio 2008.
Open Visual Studio 2008 and select Web Application Project as shown below,

Fig1. Create New Web Application

Name the project as “FirstWebProject”.



Step 2: Create new Web Page.
Delete the Default.aspx and add a new Web Page and name it as “FirstCustomePage”.




Step 3: Design the page as required and run the application
Here I have added an asp button and a textbox where in while clicking on the button the current date time is been displayed in the text box.



Step 4: Add FirstWebProject.dll to SharePoint Bin Folder
Now go to the file path where the Web Application is created. Here in my case it is “C:\Malathy\Trials\CustomeAspxPagesInSP\FirstWebProject” and copy the DLL file from web application’s BIN folder to Share point site’s BIN folder. In my case Share point site’s BIN location is “C:\Inetpub\wwwroot\wss\VirtualDirectories\80”



Step 5: Add .aspx file to Share Point Storage
Create a new folder “CustomePage” at the same level where SharePoint site’s BIN directory resides and add the “FirstCustomePage.aspx” page into this folder.



Step 6: Include SafeControl tag in web.config of Share point site.
Open Web.Config file of Share Point and include safe control tag as shown below to it.
<SafeControl Assembly="FirstWebProject" Namespace="FirstWebProject" TypeName="*" Safe="True" AllowRemoteDesigner="True" />
Change the assembly and name space as used in Web Application.



Step 7: include tag in web.config of Share point site. Set trust level to WSS_Medium
Now set the path of wss_mediumtrust.config in trustLevel as follows:
<securityPolicy><br /> <trustLevel name="WSS_Medium" policyFile="C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12 \config\wss_mediumtrust.config" /><br /> </securityPolicy>
Now change the <trust level="WSS_Minimal" originUrl="" /> to <trust level="WSS_Medium" originUrl="" />



Step 8: View in Share Point site
Brose to the page as
http://ServerName:PortNumber/CustomePage/FirstCustomePage.aspx




References:
http://blogs.msdn.com/cjohnson/archive/2006/09/05/application-development-on-moss-2007-amp-wss-v3.aspx
http://sharenotes.wordpress.com/2008/02/21/add-custom-aspx-pages-or-asp-net-pages-in-sharepoint/