SharePoint TechBytes: SharePoint 2010 - Creating a Visual Webpart

Overview
Visual webparts wraps asp.net user control inside a classic webpart, so that programmer could work on ascx file as for any other web project instead to have to resort to programmatically create the controls via the CreateChildControl method.Visual webparts evolved in SharePoint 2010 and can be used for easily creating webparts with rich UI. But the performance is somewhat less compared to classic webparts, since there is an overhead of loading the user controls.

Creating a Visual Webpart
Following are the steps for creating a Visual Webpart.

1) Open Visual Studio and select "New Project->SharePoint->2010". The following window will open displaying all SharePoint project templates. Select "Empty SharePoint Project", give a suitable name and click "Finish".

2) The following window pops-up just like in classic web parts. Enter the suitable Site collection name for debugging purpose and click the "Finish" button..

Note: Sandboxed Solution option will be disabled since visual web parts can be created only in Farm Solution.

3) Just like Classic web parts,when a web part is added 2 main components are added.
i) First one is the Web Part "MyVisualWP" which contains all the files supporting the web part. The difference is that that a "User Control" will be wrapped inside the Web part and rendered in the "CreateChildControl()" event.
ii) Second one is "Features" contains the features for deploying the web part to the site.
(Note: We will take a closer look into "Features" in the upcoming posts.)

4) In the "MyVisualWpUserControl.ascx" user control add an asp.net "Label" control as follows:

5) Build the solution and go to bin->Debug folder in the project. You will see a ".wsp" file which is the solution package for the Visual Web Part.

6) Select "Build-> Deploy MyVisualWebPart" to deploy the webpart to the site collection that we entered in the "SharePoint Customization Wizard" in the 2nd step.

(Note: For deploying the wepart solution to another site collection or subsite we must use the STSADM command line tool or SharePoint Management Shell. We will discuss deployment in detail in the upcoming sessions.)

7) Now open the Web part page in "Edit mode" and click "Add a Web Part". The web part "My Visual Webpart" is now available in the web part gallery under "Custom" group. Select the web part and click "Add".

8) Our web part has been created and displays the label that we added in the User Control.

9) Go to 14 Hive->TEMPLATE->CONTROLTEMPLATES-MyVisualWebpart->MyVisualWP. You will see the user control that we created has been deployed in this location.

10) Now, lets try to display the following list items from a list named "Products" using a asp.net GridView in the user control.

11) Add a GridView control name "gvwProducts".

12) Write the following code in the Page_Load event for fetching list items and binding to the GridView.
SPSite oSite = SPContext.Current.Site;
using (SPWeb oWeb = oSite.OpenWeb())
{
SPList oList = oWeb.Lists["Products"];
SPListItemCollection oColl = oList.GetItems();
gvwProducts.DataSource = oColl.GetDataTable();
gvwProducts.DataBind();
}

13) Deploy the solution as in Step 6 and refresh the existing web part page. You can see the list items have been fetched and display through GridView.

Note: You might see some additional columns generated which are default SharePoint columns in the List.

To display just the required columns, you can use an "SPQuery" as follows

14) Modify code in the Page_Load event for fetching only the column that we want.
SPSite oSite = SPContext.Current.Site;
using (SPWeb oWeb = oSite.OpenWeb())
{
SPQuery oQuery = new SPQuery();
oQuery.ViewFields = "<FieldRef Name='Title' /><FieldRef Name='Description' /><FieldRef Name='Price' />";
oQuery.ViewFieldsOnly = true;
SPList oList = oWeb.Lists["Products"];
SPListItemCollection oColl = oList.GetItems(oQuery);
gvwProducts.DataSource = oColl.GetDataTable();
gvwProducts.DataBind();
}