Create web part page using visual studio 2013 in SharePoint 2013

web part page sharepoint 2013 visual studio 2013
InfoPath alternatives for form designing SharePoint

In this post we will discuss how we can 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 is like a container which allows users to add controls into it.

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

Also read:
– How to publish an infopath form to an email in SharePoint 2013?

– Add different layouts into Nintex forms in Office 365 SharePoint Online

– Auto complete feature in SharePoint 2013 list column using SPServices in SharePoint 2013

Open Visual Studio 2013 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:

create web part page using visual studio 2013
create web part page using visual studio 2013

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

sharepoint 2013 create web part page
sharepoint 2013 create web part page

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:

Create web part page using visual studio sharepoint
Create web part page using visual studio sharepoint

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

Create web part page using visual studio sharepoint
Create web part page using visual studio sharepoint

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 looks like below:

Create web part page using visual studio sharepoint 2013
Create web part page using visual studio sharepoint 2013

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>

Create web part page using visual studio sharepoint 2013
Create web part page using visual studio sharepoint 2013

Now it is time to deploy the solution. Right click on the Solution click on Deploy Solution which will deploy the solution to the local SharePoint site which you have provided at the begining.
But if you want to deploy to any other server other than development server like stage or production server then you can follow this url to know how we can deploy 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 in activate state as shown in the fig below:

how to create web part page in sharepoint 2013
how to create web part page in sharepoint 2013

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:

how to create web part page in sharepoint 2013 using visual studio 2013
how to create web part page in sharepoint 2013 using visual studio 2013

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

web part page in sharepoint 2013 using visual studio

web part page in sharepoint 2013 using visual studioWe have added two web part zone to the page which you can see after editing the page.

web part page sharepoint 2013 visual studio 2013

web part page sharepoint 2013 visual studio 2013Hope this will be helpful to you.

Similar SharePoint 2013 Tutorials

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →

Leave a Reply