Click here to Skip to main content
13,869,102 members
Click here to Skip to main content
Add your own
alternative version

Stats

73.6K views
17 bookmarked
Posted 20 Aug 2015
Licenced CPOL

3 Simple Steps to Create a Visual Web Part in SharePoint

, 20 Aug 2015
Rate this:
Please Sign up or sign in to vote.
What is a Web Part? SharePoint Web Part is basically a reusable component designed for a particular task and can be easily added to a SharePoint page for customization/personalization. But for me as a developer, its a user control that is deployed at Site Collection level so that all sites under the

What is a Web Part?

SharePoint Web Part is basically a reusable component designed for a particular task and can be easily added to a SharePoint page for customization/personalization. But for me as a developer, its a user control that is deployed at Site Collection level so that all sites under the site collection can reuse it.

Types of a SharePoint Web Part?

There are two types of Web Parts in SharePoint:

  • Standard/Traditional Web Part
  • Visual Web Part

The primary difference is that visual web part has the flexibility to drag and drop items on our canvas giving us a designer experience. While standard web part doesn’t have that flexibility and we have to manually do the coding stuff. There are other important differences between the two types of web parts but we are not going into that much details here. For detailed difference, you can visit Microsoft Online MSDN here.

Purpose:

In this article, we will learn how to create Custom Visual Web Part using Visual Studio? and further how to add data from Visual Web Part to a SharePoint list?

Pre-Requisites?

  • SharePoint 2013
  • Visual Studio 2012

Step 1: Creating a Custom List in SharePoint Site

  1. Create custom list “Employee” in your SharePoint site.
  2. Add following columns in newly created list.
    • Name
    • Phone No
    • Address

We already have discussed and implemented two simple ways to Create a Custom List in SharePoint 2013 in previous article on Code Project here.

Step 2: Creating a Visual Web Part

  1. Create a new Empty SharePoint 2013 Project.SharePoint Customization Wizard
  2. Provide SharePoint site URL, where you want to deploy your solution and select “Deploy as a farm solution” option.
  3. Now, Right Click the Project, then Select “Add” and click the “New Item” link in the context menu.Add New Item to SharePoint 2013
  4. This invoke the “Add New Item” window. In the “Visual C# Section” Templates, select “Visual Web Part”.
  5. Provide a name for the Visual Web Part and click “Add” button to add it to the SharePoint Project.Employee Custom Web Part
  6. This will add a new Site Collection scoped Feature to the SharePoint project along with the newly added Visual Web Part. This WebPart will be automatically added to the feature. This you can find out by double clicking the feature file.Web Part Solution
    Web Part Solution
  7. Double Click the .ascx file created in Step 5. Add controls that are required for Visual Web Part by expanding the Toolbox pane available in the left hand side of Visual Studio.Visual Web Part
  8. Double click the Save button, it will open .cs file. Add following code in button click event.Save Visual Web Part
  9. Now, right click the solution and click on Deploy option.Deploy Custom Web Part
  10. This process will deploy solution on the SharePoint site and add your custom web part in web part gallery.

We have successfully created and deployed a simple Visual Web Part using SharePoint 2013.  But more useful Web Parts can be developed to simplify specific organizational needs. There are many built-in Web Parts available in SharePoint like Chart Web Part, Content Query Web Part etc.

Also, we can have a Custom Web Part that can read data from several data sources and present in more helpful way with multiple views. SharePoint Calendar Web Part is an excellent example that shows all events from different data sources including Exchange, SharePoint List, Google, SalesForce, SQL Table or XML and further present in multiple views. Let’s follow the step 3 to add our Web Part to a Page.

Step 3: Add Web Part to the Page

  1. To add the newly created webpart which we have developed, Open the page and click on the edit page option. From the insert tab, select webpart icon. Choose the custom webpart which we have deployed from custom category and click on Add button.Add Web Part
  2. It will add custom web part on the SharePoint site.Employee Info as Web Part
  3. Now fill-up all information and click on save button. This information will be save in SharePoint ‘Employee’ list.

Hopefully, we understand now that how simple is to create a Visual Web Part in SharePoint 2013 and use it in our pages.

The post 3 Simple Steps to Create a Visual Web Part in SharePoint appeared first on SharePoint For Dummies.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Imran Abdul Ghani
Software Developer (Senior) Emaratech
United Arab Emirates United Arab Emirates
Imran Abdul Ghani has more than 10 years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET(MCSD.NET) since 2005. You can reach his blogging at WCF Tutorials, Web Development, SharePoint for Dummies.

You may also be interested in...

Pro

Comments and Discussions

 
QuestionImages are broken Pin
Karthik_Mahalingam4-Oct-17 21:47
mveKarthik_Mahalingam4-Oct-17 21:47 
QuestionWhere is the code ? Pin
zorkzero26-Apr-16 14:44
memberzorkzero26-Apr-16 14:44 
GeneralRe: Where is the code ? Pin
PIEBALDconsult26-Apr-16 15:09
protectorPIEBALDconsult26-Apr-16 15:09 
GeneralRe: Where is the code ? Pin
zorkzero26-Apr-16 18:00
memberzorkzero26-Apr-16 18:00 
GeneralRe: Where is the code ? Pin
PIEBALDconsult26-Apr-16 18:17
protectorPIEBALDconsult26-Apr-16 18:17 
GeneralRe: Where is the code ? Pin
zorkzero27-Apr-16 10:28
memberzorkzero27-Apr-16 10:28 
GeneralExcellent! directly to the essential :) Pin
Zilou_30-Oct-15 10:00
memberZilou_30-Oct-15 10:00 
QuestionPerfect. My vote of 5 Pin
Member 1192882623-Aug-15 1:01
memberMember 1192882623-Aug-15 1:01 
GeneralNice guide! Pin
CodeProject_fan21-Aug-15 0:52
memberCodeProject_fan21-Aug-15 0:52 
GeneralExcellent article, 5 points! Pin
Konstantin Liberman21-Aug-15 0:48
memberKonstantin Liberman21-Aug-15 0:48 
GeneralGreat article! Pin
Dleytner21-Aug-15 0:23
memberDleytner21-Aug-15 0:23 
GeneralRe: Great article! Pin
Imran Abdul Ghani22-Aug-15 20:21
memberImran Abdul Ghani22-Aug-15 20:21 
Question5\5 Pin
Rina Nee21-Aug-15 0:22
memberRina Nee21-Aug-15 0:22 
AnswerRe: 5\5 Pin
aarif moh shaikh21-Aug-15 19:14
professionalaarif moh shaikh21-Aug-15 19:14 
GeneralMy vote of 5 Pin
BioGeneZ20-Aug-15 21:51
memberBioGeneZ20-Aug-15 21:51 
QuestionVery helpful article... Pin
ujin41520-Aug-15 21:40
memberujin41520-Aug-15 21:40 
GeneralMy vote of 5 Pin
Dleytner20-Aug-15 21:29
memberDleytner20-Aug-15 21:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 21 Aug 2015
Article Copyright 2015 by Imran Abdul Ghani
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid