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 web part is you don't need to write the coding for building your controls, which saves lots of time while developing the custom SharePoint webparts using this option.
Between, I have documented all the steps on how to build a Visual webpart in the guide below, click on the image below to download the copy.
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 project.
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
Once you have added the code, its time for
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
Once the webpart have been successfully deployed then you can
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.
I have documented all the steps on how to build a Visual Webpart in the guide below, click on the image below to download the copy.
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.
Once the above steps got completed, It will perform below steps
You can download the solution files here.
Don't forget download the guide by clicking the image below to develop Visual Webpart in SharePoint 2013.
In this article you have seen how to develop a basic visual webpart in SharePoint 2013 using visual studio 2012.
Do you want to learn more about SharePoint Online Development? Click the image below and enroll in the FREE course.
Devendra Velegandla is a five-time recipient of Microsoft's Most Valuable Professional (MVP) award (2014-2019) for Office Apps and Services, Office Servers and Services MVP and SharePoint Server. He received the MCC award for his contributions in Microsoft MSDN/TechNet forums. He loves sharing articles, videos, and tutorial on SharePoint and Office 365.