SharePoint Journey: Visual webpart in SharePoint 2013 using Visual studio 2012

This webpart has been introduced in SharePoint 2010. The major help with this web part is you don't need to write the coding for building your controls, which saves lots of time while developing the custom SharePoint webparts using this option.

Building Visual webpart:

Open visual studio 2012, click on new project select SharePoint solutions under the office/SharePoint from which select project type as SharePoint 2013- Visual web Part.

Enter your project name, here it is First-VisualWebPart.

Click OK. It will open the wizard to create the project.

Select the site where you want to deploy the webpart. "http://dvlabapp01".

Click on Validate Option to validate the site details. It will show the pop-up saying that connection successful.

Close the Pop-up, and select Deploy as a sandbox solution and click on Finish to create the project for this webpart.

You can see the below screenshot which represents the project structure for the webpart.

In this article we will take a simple example of getting the data from the list and bind it to the dropdown control using the SharePoint object model.

I am adding one dropdown "ddltickets" and button "btngettickets" controls to the page. Whenever a user clicks on the button, it will load all the ticket details in the system. To design the page write the below lines of code in your

Visual webpart.ascx file:

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

<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 

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

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

<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Import Namespace="Microsoft.SharePoint" %> 

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

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1.ascx.cs" Inherits="First_VisualWebPart.VisualWebPart1.VisualWebPart1" %>

<table >

    <tr>

        <td>

            <asp:DropDownList ID="ddltickets" runat="server"></asp:DropDownList>

        </td>

        <td>

        </td>

        <td>

            <asp:Button ID="btngettickets" runat="server" Text="Get Ticket Information" OnClick="btngettickets_Click" />

        </td>

    </tr>

</table>

view rawwebpart.ascx hosted with ❤ by GitHub

Add Microsoft.SharePoint.dll to the project to write the code in the SharePoint object Model which requires Microsoft.SharePoint namespace.

After adding the dll reference write the below code in

Visual webpart.cs file:

using System;

using System.ComponentModel;

using System.Web.UI.WebControls.WebParts;

using System.Data;

using Microsoft.SharePoint;

namespace First_VisualWebPart.VisualWebPart1

{

    [ToolboxItemAttribute(false)]

    public partial class VisualWebPart1 : WebPart

    {

        // Uncomment the following SecurityPermission attribute only when doing Performance Profiling using

        // the Instrumentation method, and then remove the SecurityPermission attribute when the code is ready

        // for production. Because the SecurityPermission attribute bypasses the security check for callers of

        // your constructor, it's not recommended for production purposes.

        // [System.Security.Permissions.SecurityPermission(System.Security.Permissions.SecurityAction.Assert, UnmanagedCode = true)]

        public VisualWebPart1()

        {

        }

        protected override void OnInit(EventArgs e)

        {

            base.OnInit(e);

            InitializeControl();

        }

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        protected void btngettickets_Click(object sender, EventArgs e)

        {

            DataTable dt = GetItemDetails(); 

            ddltickets.DataSource = dt;

            ddltickets.DataTextField = "Title";

            ddltickets.DataValueField = "Title";

            ddltickets.DataBind();

        }

        private DataTable GetItemDetails()

        {

            SPWeb spweb = SPContext.Current.Web;

            SPList ticketsList = spweb.GetList("http://dvlabapp01.cloudapp.net/Lists/Ticket%20Details/AllItems.aspx");

            return ticketsList.Items.GetDataTable();

        }

    }

}

view rawwebpart.cs hosted with ❤ by GitHub

Once you have added the code, its time for

Deploying webpart:

To deploy the webpart, right click on the project and click on deploy. During deployment, in the output window you can observe all the steps that are happening for the first time, see the below screenshot.

Some of the important steps are

Configuring the Sandbox code service
Adding solution
Deploying solution
Activate Features

Once the webpart have been successfully deployed then you can

Add the webpart to the page:

To add the webpart which we have deployed, Open the page and click on the edit page option. From the INSERT tab, select webpart icon. Choose the webpart deployed from custom category, select the web part that needs to be added to the page and click on Add button.

After adding the webpart, whenever a user clicks on the "Get ticket Information" button the dropdown list control populates the required information.

Redeploying webpart:

If you make any changes to webpart and wanted to deploy again. Follow the same step, right click on the project and click deploy option. But this time if you observe the Output window some of the new steps in redeployment you can observe in below screenshot.