How to create custom web part page in SharePoint 2013 using Visual Studio

This SharePoint 2013 tutorial explains, how to create custom web part page in SharePoint 2013. We will see step by step how to create and deploy a web part page using visual studio 2013 in SharePoint 2013.

In web part pages, users can directly add contents to the page by adding web parts to the page from the browser itself. So here we need to add web part zones to the page. Web part zones are like a container which allows users to add controls into it.

In this tutorial, we will create a visual studio solution which will create the web part page & deploy it to the SharePoint Site Pages library.

How to create custom web part page in SharePoint 2013

Open Visual Studio then click on File -> New -> Project. This will open the New Project dialog box, From the left side from the installed templates, go to Templates -> Visual C# -> Office/SharePoint -> SharePoint Solutions. Then choose SharePoint 2013 – Empty Project.

Make sure to choose .NET Framework 4.5 version. Give a name and location as shown in the fig below:

Then give a local site for debugging. And then choose the option as a farm solution. You can choose here Sandboxed solutions also. But in this example, I have chosen a farm solution.

Then Right-click on the Project then Add -> Add new project. In the Add New Item dialog box, from the installed templates select Visual C# Item, Office/SharePoint and then choose Module. Give a name for the Module as shown in the fig below:

By default, it will add one Elements.xml file and Sample.txt file. By default the solution explorer will look like below:

After this rename Sample.txt file to <your name of the page> .aspx . Also, rename the feature to a meaningful name and the solution explorer will look like below:

Then add the below code to the .aspx page.

<%@ Page Language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<h1>Our Custom web part page designed from visual studio 2013</h1>
<div>
<WebPartPages:WebPartZone ID="top" Title="Top" runat="server">
</WebPartPages:WebPartZone>
<br>
<WebPartPages:WebPartZone ID="buttom" Title="Bottom " runat="server">
</WebPartPages:WebPartZone>
</div>
</asp:Content>

Now we will change the Elements.xml like below. Here Type=”GhostableInLibrary” which tells SharePoint that we would like to make the file that is added to the library an uncustomized file. Here carefully give the Module URL and File Path & URL carefully.

<?xml version="1.0″ encoding="utf-8″?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="SitePages" Url="SitePages">
<File Path="SitePages\MyCustomWebPartPage.aspx" Url="MyCustomWebPartPage.aspx" Type="GhostableInLibrary" />
</Module>
</Elements>

Now it is time to deploy the solution. Right-click on the Solution clicks on Deploy Solution which will deploy the solution to the local SharePoint site which you have provided at the beginning.

But if you want to deploy to any other server other than development servers like stage or production server then you can follow this URL to know how we can deploy the solution using PowerShell.

Once you deploy the solution successfully, go to the gear icon then Site Settings. Under Site, Actions click on Manage site features. This will open the Site Features page, you can see the “MyCustomWebPartPage Feature1″ will be inactivated state as shown in the fig below:

Now if you will go to the Site Pages directory. You can see the page which we have deployed in the gallery. You can see the fig below:

Click on the page, you can see the page which has created like below:

I have added two web part zone to the page which you can see after editing the page.

You may like following SharePoint visual studio tutorials:

• Create a timer job in SharePoint 2016/2013 Programmatically (Step by Step tutorial)
• Create a Web API for SharePoint Online and Deploy to Microsoft Azure using Visual Studio (Step by Step tutorial)
• Create remote event receiver SharePoint Online Step by Step Tutorial
• Create a Custom Action Group using Visual Studio 2015 for SharePoint 2016
• SharePoint Online Develop SharePoint Hosted Add-in using Visual Studio 2015 Demo
• SharePoint 2016 Develop and deploy custom feature using Visual Studio 2015
• SharePoint 2016 How to create list instance and list definition using Visual Studio 2015
• Create an application page in SharePoint 2013 using visual studio 2013
• Create and Deploy SharePoint 2013 site pages or content pages using Visual Studio 2013
• How to create site definition using Visual Studio 2013 in SharePoint 2013
• Create List Definition and List Instance in SharePoint 2013/2016 using Visual Studio 2013/2015/2016
• SharePoint 2013 Create a custom master page using Visual Studio 2013

Hope this SharePoint 2013 tutorial explains, how to create a web part page in SharePoint 2013 or SharePoint 2016 using visual studio.