How to Create a Web Part in SharePoint using Visual Studio?

Do you need to develop a visual web part for SharePoint? In this tutorial, I have explained how to create a web part in SharePoint using Visual Studio.

I have also explained:

  • What is a web part in SharePoint?
  • Difference between a web part and a visual web part in SharePoint
  • How do you create and deploy a SharePoint visual web part?
  • Download a PDF on creating and deploying visual web parts into SharePoint

What is a web part in SharePoint?

We can use SharePoint web parts to display information, or we can also use 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 deploy it to SharePoint.

Lots of time, we have 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 deploy them to SharePoint sites.

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

  • Normal Web Part
  • Visual Web Part

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 the file where developers can implement the UI logic.

The visual web part is like a 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.

Visual web part Vs. 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 the case of the 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 for SharePoint. 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 the normal web part, you have to define your controls inside the web part.

In this Visual web part, we will see how to 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 and then click on File -> New -> Project.

Then from the Installed templates, expand to Office/SharePoint and choose SharePoint Solutions. And then choose “SharePoint 2016 – Empty Project“. Give a name and click on OK. Here, you will see various types of project templates depending on the versions you are using in SharePoint.

Visual webpart 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

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, choose Visual Web Part (Farm Solution only) as shown in the fig below:

create visual webparts in sharepoint 2016 step by step

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

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

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 list as “Employee,” and by using code, we will add an item to the SharePoint list through the 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 write the code, it is time to deploy the visual web part to the SharePoint Server.

Deploy Visual Web Part in SharePoint Server

Now, we will deploy the visual web part to the SharePoint server. 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.

Add Visual Web Part to SharePoint Page

Once the deployment is 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, select the web part, and click on Add.

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

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

create visual webpart 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 the SharePoint production site or UAT site, we can not deploy it through Visual Studio, we can deploy the visual web part through PowerShell.

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

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

An error occurred in deployment step Recycle IIS Application Pool SharePoint

Let us see how to fix errors, “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 for SharePoint. But while trying to deploy the 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 cannot connect to the sharepoint site

We developed a visual web part in SharePoint using Visual Studio. When we first created the web part, we gave the site URL, and the URL was changed. So, we have to change the site URL that we have given while creating the solution.

Right-click on the Project -> Press F4.

Then change the Site URL property like below:

Error occurred in deployment step Recycle IIS Application Pool

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

I hope, this 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”.

Download

Download a FREE PDF on SharePoint visual web part.

Conclusion

I hope you got an idea on the Visual Web Part in SharePoint, how to create a SharePoint visual web part using Visual Studio. Finally, I have explained how to deploy a visual web part to the SharePoint server.

You may also work:

>