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