Visual webpart in SharePoint 2013 using Visual studio 2012

In this article you will learn how to build a Visual webpart in SharePoint 2013 using Visual studio 2012.

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

Lets starts..

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="WebPartDemo.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>

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 Microsoft.SharePoint;
using System;
using System.ComponentModel;
using System.Data;
using System.Web.UI.WebControls.WebParts;
namespace WebPartDemo.VisualWebPart1
{
    [ToolboxItemAttribute(false)]
    public partial class VisualWebPart1 : WebPart
    {
        // 仅当使用检测方法进行性能分析时才取消注释以下 SecurityPermission
        // 特性，然后在代码准备进行生产时移除 SecurityPermission
        // 特性。因为 SecurityPermission 特性会绕过针对您的构造函数的调用方的
        // 安全检查，不建议将它用于生产。
        // [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 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();
        }
    }
}

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

1. Configuring the Sandbox code service

2. Adding solution

3. Deploying solution

4. 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.

1. Retract solution

2. Deactivating feature

3. Deleting the solution

Once the above steps got completed, It will perform below steps

1. Add Solution

2. Deploying solution

3. Activate Features