CREATE VISUAL WEBPART IN SHAREPOINT 2013

CREATE VISUAL WEBPART IN SHAREPOINT 2013

Visual Web Parts provide a designer experience for your Web Part customization. To create a Visual Web Part, follow the following steps:

1. Open Visual Studio 2012.
2. Click File ➪ New Project, navigate to Office/SharePoint ➪ SharePoint Solutions, and then select SharePoint 2013 – Empty SharePoint Solution.
3. Give a name for the project (MyFirstSPProject), as shown in Figure.
4. After the new project has been created, right-click the SharePoint project and select Add ➪New Item.
5. In the Add New Item dialog, select the Visual Web Part item template.
6. A prompt appears, asking you to designate the application as a sandboxed solution or a farm-level application. Select Deploy as a farm solution, and click Finish, as shown in below Figure 
7. Provide a name for the Visual Web Part (MyNewVisualWebPart), and click Add. See Figure .
8. After the Visual Web Part is added to the project, right-click the SharePoint project and select Add ➪ Class, and provide a name for the new class (Sales).
9. Click Add.
10. Add the bolded code as per the following code snippet:
    using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MyFirstSPProj
{
class Sales
{
public int ID { get; set; }
public string Quarter { get; set; }
public string TotalSales { get; set; }
}
}
11. Right-click the Default.aspx page and select View Designer. Click the Source tab and add the bolded code as per the following code snippet:
    <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
…
<p style="font-family: calibri">
My First Visual Web Part</p>
<asp:GridView ID="salesGridView" runat="server" CellPadding="4"
Font-Names="Calibri" Font-Size="Small" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<sortedascendingcellstyle backcolor="#E9E7E2" />
<sortedascendingheaderstyle backcolor="#506C8C" />
<sorteddescendingcellstyle backcolor="#FFFDF8" />
<sorteddescendingheaderstyle backcolor="#6F8DAE" />
</asp:GridView>
<br />
<asp:LinkButton ID="lnkGetSalesData" runat="server" Font-Names="Calibri"
Font-Size="Small">Get Sales</asp:LinkButton>
12. Double-click the Default.aspx.cs file and add the bolded code as per the following code snippet:
    using System;
using System.ComponentModel;
using System.Web.UI.WebControls.WebParts;
using System.Collections.Generic;
namespace MyFirstSPProj.MyNewVisualWebPart
{
[ToolboxItemAttribute(false)]
public partial class MyNewVisualWebPart : WebPart
{
List<Sales> mySalesData = new List<Sales>();
Sales FY11 = new Sales();
Sales FY12 = new Sales();
Sales FY13 = new Sales();
public MyNewVisualWebPart()
{
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
InitializeControl();
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void lnkGetSalesData_Click(object sender, EventArgs e)
{
FY11.ID = 1;
FY11.Quarter = "FY11";
FY11.TotalSales = "$2,002,102.00";
mySalesData.Add(FY11);
FY12.ID = 2;
FY12.Quarter = "FY12";
FY12.TotalSales = "$2,500,201.00";
mySalesData.Add(FY12);
FY13.ID = 3;
FY13.Quarter = "FY13";
FY13.TotalSales = "$2,902,211.00";
mySalesData.Add(FY13);
salesGridView.DataSource = mySalesData;
salesGridView.DataBind();
}
}
}.
13. Right-click the SharePoint project and select Deploy. This builds and deploys the Visual Web Part to your SharePoint site.
14. After the Visual Web Part successfully deploys to the SharePoint site, navigate to the top-level SharePoint site
15. Click Page and then Edit.
16. Click the Insert tab, and then select WebPart ➪ Custom, and then add the newly deployed Visual Web Part. The result will look similar to figure