How To Create Custom Webpart In Sharepoint 2010

Microsoft Teams

This SharePoint tutorial, we will discuss what is a web part in SharePoint? Different types of web parts in SharePoint? What is a visual web part in SharePoint 2013/2016? What is a difference between a visual web part and a normal web part in SharePoint? Then we will discuss step by step tutorial on how to create a visual web part in SharePoint 2013 using visual studio 2015/2017.

The steps you can follow to create a visual web part in SharePoint 2016/2013 using visual studio 2015/2017.

I have also created a PDF file of Visual web part in SharePoint 2013 and you can download the FREE PDF below:

Download Visual Web Part PDF

What is a web part in SharePoint?

We can use SharePoint web parts to display information or also we can user web parts to ask for information from users.

Microsoft provides various out-of-box web parts to use or SharePoint developers can develop a custom web part using Visual Studio and can deploy to SharePoint.

Lots of time we got various business functionality which we may not achieve by using out-of-box web parts. That time we can develop web parts using visual studio and cab deploy to SharePoint 2016/2013 sites. You can a SharePoint 2013 articles on SharePoint 2013 web parts.

Different types of web parts in SharePoint

In SharePoint, there are two types of web parts you can develop using Visual Studio.

Normal Web Part
Visual Web Part

What is a visual web part in SharePoint?

SharePoint Visual web parts are similar to user controls where SharePoint developers can simply drag and drop items from the Toolbox onto your custom controls to create a Web Part UI. Also Visual web part provides the code behind file where developers can implement the UI logic.

The visual web part is like normal web part, additionally visual web part adds an ascx user control in it. A Visual Web Part is simply a classic Web Part that automatically loads the web user control with it.

Difference between a visual web part and a normal web part in SharePoint

In the case of the normal web part, when we use to design a complex user interface (UI), it is difficult to design the complex UI form. You can not use drag-and-drop in a normal web part. SharePoint developer has to write code from scratch in the CreateChildControls method, to create the layout design of the Web Part.

But in case of Visual web part, you will have the user control where you can easily drag and drop control to design complex forms. And also the visual web part provides a .cs file to write the business logic. Visual studio provides files like below:

SimpleVisualWebPart.cs
SimpleVisualWebPartUserControl.ascx
SimpleVisualWebPartUserControl.ascx.cs

Create SharePoint visual web part using Visual Studio

Here we will see how to create a visual web part using visual studio 2015/2017/2019 for our SharePoint 2016 site. In the case of the visual web part, SharePoint provides a user control file, where we can add our controls to it easily. But in case of the normal web part, you have to define your controls inside the web part.

In this Visual web part, we will see how we can add an item to a SharePoint list using the SharePoint server object model code.

Follow the below steps to create a visual web part using visual studio:

Open visual studio 2015/2017 and then click on File -> New -> Project.

Then from the Installed templates expand to Office/SharePoint and then choose SharePoint Solutions. And then choose "SharePoint 2016 – Empty Project". Give a name and click on OK.

Visual webpart in sharepoint 2013 or SharePoint 2016 — Visual web part in SharePoint 2013 or SharePoint 2016

Then in the next screen, it will ask you to provide a local SharePoint site URL for debugging. And then choose a farm solution.

create visual webparts in sharepoint 2013 step by step — create visual web parts in SharePoint 2013 step by step

Click on the Finish button which will create ready our solution.

Then right-click on the project -> Add -> New Item… This will open the Add New Item dialog box. Here chooseVisual Web Part (Farm Solution only) as shown in the fig below:

create visual webparts in sharepoint 2016 step by step — create visual web parts in SharePoint 2016 step by step

Once you will add the visual web part, you can see there will be a user control file like below:

Create and Deploy Visual web part using Visual Studio 2015 SharePoint 2016/2013

Also, you can read some SharePoint 2013 tutorials:

RSS feed SharePoint 2013 or RSS feed for SharePoint online
Working with link or link to a document content type in SharePoint online document library
Hide quick launch bar in SharePoint Online using CSS

In that .ascx file you can add the controls.

Here we will write code to add an item to a sharepoint list. I have a SharePoint 2016 list as "Employee" and by using code we will add an item to SharePoint list through visual web part.

.ascx code:

          Enter Employee Name: <asp:TextBox ID="txtName" runat="server"></asp:TextBox><br /> <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

.ascx.cs code:

          protected void btnSubmit_Click(object sender, EventArgs e) { using (SPSite site =new SPSite("http://mypc:29024/sites/SPTraining/")) { using (SPWeb web=site.OpenWeb()) { SPList list = web.Lists["Employee"]; SPListItem item = list.Items.Add(); item["Title"] = txtName.Text; item.Update(); } } }

Once you will write the code. Now it is time to deploy the visual web part to SharePoint 2016.

Deploy Visual Web Part in SharePoint 2016

Now we will deploy the visual web part to SharePoint 2016. To deploy the web part, right-click on the project and then click on Deploy or press F5. This will deploy the web part and you can also check the status in the Output window.

But if you want to deploy the visual web part to other servers like the testing server or production server, then you have to use PowerShell commands for that.

You can read an article PowerShell Script to deploy WSP Solution in SharePoint 2013.

Add Visual Web Part to SharePoint 2016 Page

Once the deployment over. Open any SharePoint web part page and try to add the visual web part. Then from the web part properties choose a custom section and you can see the web part like below and select the web part and click on Add.

SharePoint 2016 visual web part: Add visual web part to web part page — SharePoint 2016 visual web part: Add the visual web part to web part page

Once you add the web part you can see the web part like below:

create visual webpart in sharepoint 2013 — create a visual web part in SharePoint 2013

Then you can put a name and click on Submit. The item will be added to the particular SharePoint list.

Deploy Visual Web part using PowerShell in SharePoint

If you want to deploy a visual web part to SharePoint 2016 production site or UAT site, we can not deploy it through Visual studio, we can deploy the visual web part through PowerShell. Check an article on: Deploy farm wsp solution in sharepoint using PowerShell.

When you want to redeploy an already deployed solution we have to follow the below step:

Retract solution
Deactivating feature
Deleting the solution
Add Solution
Deploying solution
Activate Features

$Resources:core,Import ErrorMessage error while adding visual web part in SharePoint

Recently I developed a visual web part using visual studio 2017 for SharePoint 2016 site. I deployed the web part to SharePoint 2016 site and when I try to add to it is giving me an error saying: $Resources:core,Import ErrorMessage. And it did not allow me to add the web part to the page.

$Resources:core,Import ErrorMessage SharePoint error

Here I first developed a sandboxed solution instead of a farm solution and then that sandboxed solution, I added a visual web part into the solution.

Since SharePoint visual web parts are not allowed in solution, I changed it to farm solution by following the below steps:

Select the Project name and press F4. This will open the Properties dialog box. Then change "Sandboxed Solution" property to False. And then we deployed the web part. But it gave the above error.

To resolve this we need to change another property "Include Assembly In Package" to True.

To do this:

Select the Project, press F4.
Then change "Include Assembly In Package" to True.

$Resources:core,Import ErrorMessage error while adding visual web part in SharePoint 2016

Then deploy the visual web part and it should work fine. This is how we can fix the error $Resources:core,Import ErrorMessage SharePoint error which comes while developing a visual web part in SharePoint 2016.

Error occurred in deployment step Recycle IIS Application Pool SharePoint

This SharePoint tutorial, we will discuss how to fix error, Error occurred in deployment step Recycle IIS Application Pool. Cannot connect to the SharePoint Site Make sure that this is a valid URL and the SharePoint site is running on the local computer.

Recently while working with visual web part development using visual studio 2017 for SharePoint 2016 site. But while trying to deploy visual webpart (Right-click on the project -> Deploy), it gave an error as Error occurred in deployment step Recycle IIS Application Pool. Cannot connect to the SharePoint site: http://SiteURL. Make sure that this is a valid URL and the SharePoint site is running on the local computer.

If you moved this project to a new computer or if the URL of the SharePoint site has changed since you created the project. Update the Site URL property of the project.

The full error looks like below:

Error occurred in deployment step Recycle IIS Application Pool

We were developing a visual web part in SharePoint 2016 using visual studio 2015/2017. When we first create the web part we gave the site URL. and the URL was changed. So we have to change the site URL which we have given while creating the solution.

Right click on the Project -> Press F4.

Then change the Site URL property like below:

After this, you can deploy the solution to SharePoint 2016.

I hope, helps to fix the error, Error occurred in deployment step Recycle IIS Application Pool. Cannot connect to the SharePoint Site Make sure that this is a valid URL and the SharePoint site is running on the local computer.

You may like following SharePoint web part and server object model tutorials:

SharePoint 2013: Add, Delete and Display User Custom Actions using SharePoint Server Object Model
Add SharePoint 2016/2013 List/Library Columns to view programmatically using the server object model in Visual Studio 2017
Create Site Columns programmatically in SharePoint 2016/2013 using Server Object Model in Visual Studio 2017
Upload file to SharePoint 2016 document library with metadata programmatically using file upload control (Visual Web Part + Server Object Model)
Content Search web part in SharePoint Online
Content query web part SharePoint Online or SharePoint 2013/2016

Hope this article will be helpful to know how to create a visual web part in SharePoint 2013/2016 using Visual Studio 2013/2017.

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 EnjoySharePoint.com