How to create custom webpart in SharePoint 2013 step by step

In this SharePoint tutorial, we will discuss how to create custom webpart in sharepoint 2013 step by step. The same approach also can be followed for “how to create custom webpart in sharepoint 2016 step by step“.

Here basically we will create a custom visual web part sharepoint 2013 using visual studio. Apart from this, we also can add custom web part properties to visual webpart in sharepoint 2013.

You can also follow the same steps to create custom visual web part sharepoint 2019.

How to create custom webpart in SharePoint 2013 step by step

Now, let us see step by step how to create a custom web part in SharePoint 2013 or SharePoint 2016.

Step-1:

Open your visual studio and then go to File -> New Project. This will open the New Project dialog box. There, from the left side installed templates, select “SharePoint Solutions” which is under Templates -> Visual C# -> Office/SharePoint. The from the right side choose the .Net Framework as 4.5 and also choose “SharePoint 2013 – Empty Project” template which looks like fig below:

Step-2:

Then it will open the SharePoint Customization Wizard. Here it will ask for the Site URL to debug. After giving the URL you can validate the URL by clicking on the Validate button. Then choose the “Deploy as farm solution” option. The screen should look like below:

Step-3:

This will create an Empty SharePoint project. Now Right Click on the Project and then click on Add -> New Item as shown in the fig below:

Step-4:

Then from the Add New Item dialog box, from the Office/SharePoint templates, choose (Visual Web Part (Farm Solution Only)) as shown in the fig below:

Step-5:

Once it will add the Visual Web Part Project, you can Open the ascx file and write the code. Here I am simply adding a textbox control, a button control, and label control. My idea is on button click we want to display a message. So the code will look like below:

<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnClickHere" runat="server" Text="Click Here" OnClick="btnClickHere_Click" /><br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>

Now you can right-click and go to the code-behind file. And write the below code in the button click.

protected void btnClickHere_Click(object sender, EventArgs e)
{
lblMessage.Text = "Hello: " + txtName.Text.Trim();
}

The code behind code looks like below:

Step-6:

Now Build the solution and if no errors are there then you can right-click on the Solution Explorer and can click on Deploy the solution.

This will deploy the solution to the SharePoint site.

When you Build the solution it will generate a wsp file that you can take and deploy in different servers (Like testing or Production where the visual studio is not installed usually).

Depending on the mode you have selected the wsp will be available either in Debug folder or in Release folder like below:

Now you can open your SharePoint 2013 site and edit the page where you want to add your custom visual web part. When you click on Add web part, you will be able to see your custom web part under “Custom” web part categories like below:

When you will click on the button, you will be able to see the message in the label like below:

This way, we can create custom web part in SharePoint 2013 using visual studio.

Add custom properties visual web part SharePoint 2013

Now let us see, how to add a custom property to the SharePoint 2013 visual web part as well as how we can set the default value also.

In that web part, I have a label control and I want to set a default value for the label. Also, users should able to change the value from web part properties.

Here we will deal with three files, one the Visual web part .aspx file as well as the visual web part code file. And the web part file (MyTestVisualWP.cs).

Open your Web part file (MyTestVisualWP.cs) and here we need to add properties to the web part like below:

const string const_Name = "EnjoySharePoint";
private string _yourName = const_Name;

[Personalizable(PersonalizationScope.Shared)] [WebBrowsable(true)] [Category("My Category")] [WebDisplayName("Enter Your Name")] [WebDescription("Provide your name.")] [DefaultValue(const_Name)]
public string YourName
{
get
{
return _yourName;
}
set
{
_yourName = value;
}
}

Now your web part file should look like below:

Now Open the web user control file and write like below:

public MyTestVisualWP WebPart { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
this.WebPart = this.Parent as MyTestVisualWP;
lblMessage.Text = "Hello: " + this.WebPart.YourName;
}

Your code should look like below:

Now deploy your visual web part to the site. Then add the web part to the page and it will show the default value like below:

Now edit the page and then edit the web part. You will be able to see the web part properties like below and you change the value like below:

Now the changed value will appear like below:

Error occurred in deployment step Recycle IIS Application Pool in SharePoint

Now, let us see how to fix the error, which usually comes when we try to deploy a SharePoint solution built using Visual Studio.

The full error message is: “Error occurred in deployment step ‘Recycle IIS Application Pool’: The local SharePoint server is not available. Check that the server is running and connected to the SharePoint farm.“

The error comes if your sql server is not running. So to solve the issue you can try following things:

Make sure you are able to connect to the database server. Try to connect the SQL server using SQL Server Management Studio.

To deploy these types of things you need admin privileges. So make sure your Visual Studio is running as an Administrator.

Also, make sure you have db_owner rights to the below databases:

• SharePoint_Config
• SharePoint_AdminContent_GUID
• Your current web application that needs to deploy the Web part.
• Make sure your SQL Server (MSSQLSERVER) service is running. You can check this in the Services (Start -> Run -> services.msc)

You may like the following SharePoint tutorials:

• How to create a custom web part page in SharePoint 2013 using Visual Studio
• How to include jQuery in SharePoint
• Site Feed web part in SharePoint
• SharePoint Hosted Add-in: Send Email to SharePoint group using visual studio workflow
• Enable Chart Web Part in SharePoint
• SharePoint hosted app development tutorial

I hope this tutorial helps you in creating a custom web part in SharePoint 2013 or SharePoint 2016.

• sharepoint visual web part
• sharepoint visual web part custom property
• sharepoint 2013 visual web part custom property
• add custom properties visual web part sharepoint 2013
• add custom web part properties to visual webpart in sharepoint 2013
• how to create custom web part in sharepoint 2013
• how to create custom web part in sharepoint
• how to create custom webpart in sharepoint 2013 step by step
• how to create custom webpart in sharepoint 2016 step by step
• create custom visual web part sharepoint 2013
• create custom properties visual web part sharepoint 2013