Deploy and Create Site Pages through Visual Studio for SharePoint 2013

Here i am going to explain about creating a site page using visual studio.

1. Create an empty SharePoint project

2. Create an application page

3. Create a Module from add new items. Once you add these items then your solution will look like the below image:

4. Now drag and drop the application page into module folder and remove the code behind file. We         don't need that. Refer the below image:

5. Go to aspx page and in our case its “ApplicationPage1.aspx” and remove the below line:

    <%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="ApplicationPage1.aspx.cs"
   Inherits="SitePages.Layouts.SitePages.ApplicationPage1"
    DynamicMasterPageFile="~masterurl/default.master" %>

   Here the master page also will get removed. So we have to add the reference to the master page.          Add the below code in your application page.

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

6. Remove project assemble.
    Remove the below line which refer the the project. If not this is will throw an error when we try to     deploy in SharePoint online.

   <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

7. Add webpart zone
    Now add webpart zone into PlaceHolderMain.

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <WebPartPages:WebPartZone ID="WebPartZoneSearch" runat="server" Title="Webpart zone">
        <ZoneTemplate>
        </ZoneTemplate>
    </WebPartPages:WebPartZone>
</asp:Content>

8. Deploy the solution.

   After the deployment check your site pages. A new site page will be there in the name of
   ApplicationPage1.aspx

9. If we want to include our existing web part with our web part zone, then open the SharePoint designer and browse the site page which we need to include. Copy the below line and paste it in top of our application page

<%@ Register TagPrefix="WpNs0" Namespace="WP_TestWebPart" Assembly="TestWebpart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=a5bf86caedf86e4c" %>

10. Copy the web part zone from designer and paste it in our webpart zone. The code will look like below:

<WebPartPages:WebPartZone runat="server" Title="loc:Header" ID="Header" FrameType="TitleBarOnly">
        <ZoneTemplate>
            <WpNs0:WP_TestWebPart runat="server" ChromeType="None" Description="Display Web Part" Title="WP_TestWebPart" ID="g_df62caba_d542_4728_b7dd_88c097775691" __markuptype="vsattributemarkup" __webpartid="{DF62CABA-D542-4728-B7DD-88C097775691}" webpart="true" __designer:isclosed="false"></WpNs0:WP_TestWebPart>
        </ZoneTemplate>
    </WebPartPages:WebPartZone>

11. Now deploy your solution and refresh the created site page. We can find our web part in this page.


Hope this will help you guys,