SharePoint 2010 Visual Web Parts using Visual Studio 2010, Feature Designer and Package Designer

How to create a Visual Web Part in Visual Studio 2010 and how to deploy it to the SharePoint 2010 team site.

What is  a Visual Web Part?

With SharePoint 2007 and Windows SharePoint Services 2007 or previous versions, to develop custom web parts for SharePoint sites the developer has to write the entire code from scratch. Also, the developer has to keep in mind all the design issues, layouts and rendering of the web part. This was so cumbersome that developers had to be careful while writing code. A single mistake while writing the design code could mess up the whole layout.

But now using Visual Studio 2010, we can develop a custom web part for SharePoint 2010 site using the Visual designer. Visual Studio 2010 provides a new project template for Visual Web Part. This project provides us the facility to develop a custom web part by dragging and dropping the different web controls onto the  designer surface.

Now we will see how to develop a custom web part using this new feature provided Visual Studio 2010. Following are the steps for creating a Visual Web Part project using Visual Studio 2010.

1. Open Visual Studio 2010.
2. Click “New Project…” on the Start page.
3. In the New Project dialog box select “SharePoint” under Visual C# language now.
4. Expand that “SharePoint” node and select “2010”.
5. By selecting 2010 will populate all the related project templates.
6. Now from the project templates select Visual Web Part. Note that in the Framework dropdown “.NET Framework 4”.



7. Provide some meaningful name like “VisualWebPart1Project” or whatever you want.
8. Click OK to create the new project.
9. The new created project will look like the below image.



Before diving into development of the web part we will spend some time exploring the features and capabilities provided for SharePoint. These features include importing web part solution (WSP) in Visual Studio, a new SharePoint site explorer and package designer which makes building SharePoint web solution packages easy.

Importing WSPs

Using Visual Studio 2010, you can import a web solution package (WSP), which could be an exported entire web site or the workflow designed and developed using SharePoint Designer 2010. Visual Studio can also import the SharePoint lists, fields, content types and other stuffs and allows you to work directly on them in Visual Studio. Now with release SharePoint 2010, WSPs are recommended for packaging the solutions, whether it is feature, or web part or custom definition definitions.

SharePoint Server Explorer

SharePoint Server Explorer is the new feature of Visual Studio 2010, which provides the exploration of the SharePoint contents like, SharePoint sites, lists, contents and workflows contained in the SharePoint site. While developing custom solutions for SharePoint sites, developer needs to see the site contents frequently for reference. So, now Visual Studio 2010 makes this comfortable for developer to bring the SharePoint sites in Visual Studio Interface for quick reference. One limitation of this is that it is only read only, so you can’t create new instances in the SharePoint site.



SharePoint Solution Explorer Integration

Now, in Visual Studio 2010, Microsoft has integrated SharePoint Solution Explorer for exploring the solution content files. When you create any project related to SharePoint 2010 in Visual Studio 2010, it creates a couple of files according to your project type. Solution Explorer allows you to explore and see the contents of the different solution files and also allows the modification of the same. Also, Visual Studio 2010 arranges the solution files logically according to the SharePoint Hive directory structure.

Feature Designer

With release of SharePoint 2010, it is made recommended that to deploy any application, features and packages must be used. Feature designer allows you to configure all the functionalities of feature as per requirements.



Beyond with this graphical designer, you can also, modify your feature by changing XML files generated by the project template in traditional way.

Package Designer and Packaging Explorer

When developing custom features and custom web parts and other stuffs with previous Visual Studio versions, we need to take help of WSPBuilder or Visual Studio Extensions for SharePoint. These project templates do not provide modification of the package XML files. But with Visual Studio 2010, a new feature part called Package Designer and Packaging Explorer.



Some of the most used features of Package Designer are the ability to add multiple items to the single solution using graphical interface, the ability to reset the web server, ability to add additional assemblies to the package, also, the ability to write package rules that allow you to validate package programmatically before deploying to the targeted server.

Now we will explore how to develop a custom web part using graphical designer for Visual Web Part. Go to the Visual Studio where you created the Visual Web Part project.



As you can see in the above image, when a new Visual Web Part project is created, project template creates many of the related files which you can see them in the Solution Explorer. There are Feature files, package file as well as a Visual Web Part user controls and its code behind .cs file. This also includes the elements.xml file as well.

The below code snippet gives you an overview of the VisualWebPart1.cs file.

using System;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace VisualWebPartProject1.VisualWebPart1
{
    [ToolboxItemAttribute(false)]
    public class VisualWebPart1 : WebPart
    {
         // Visual Studio might automatically update this path when you change the Visual Web Part project item.
        private const string _ascxPath = @"~/_CONTROLTEMPLATES/VisualWebPartProject1/VisualWebPart1/VisualWebPart1UserControl.ascx";

        protected override void CreateChildControls()
        {
            Control control = Page.LoadControl(_ascxPath);
             Controls.Add(control);
        }
    }
}

As you can see in the above code snippet, the user control for the web part is reference here and in the CreateChildControls method this user control is added to the web part’s control collection.

The listing below shows you the structure of the .webpart file for the current project web part file.

<?xml version="1.0" encoding="utf-8"?>
<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <type name="VisualWebPartProject1.VisualWebPart1.VisualWebPart1, $SharePoint.Project.AssemblyFullName$" />
      <importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="Title" type="string">VisualWebPart1</property>
        <property name="Description" type="string">My Visual WebPart</property>
      </properties>
    </data>
  </webPart>
</webParts>

If you look carefully, in this webpart file, the <importErrorMessage> contains its error message from the resource file. In the WSPBuilder projects and Visual Studio Extensions for WSS project, this has direct input value for the error message. You can also write down your own import error message here in this file as well.

When the project is created, the Visual Web Part user controls file is opened initially in the Source mode. To modify it in design mode click the “Design” or “Split” button at the bottom part of the designer. Now we will develop a custom web part that lists out lists provisioned in the site, features activated on the site and the sub sites in the current site. For this first of all, open the Visual Web Part user control in designer view in split mode so you can design control in design mode as well as can write required HTML in HTML view.

Now add couple of Labels and GridViews to the controls. Following listing shows you the added lables and grid views to the controls.

<asp:Label ID="Label1" runat="server" Text="Lists / Document Libraries in the site:"></asp:Label><br />
<asp:GridView ID="gvLists" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="ListName" HeaderText="List Title" />
        <asp:BoundField DataField="ListType" HeaderText="List Type" />
        <asp:BoundField DataField="CreatedOn" HeaderText="Created" />
        <asp:BoundField DataField="Items" HeaderText="Items" />
    </Columns>
</asp:GridView><br />
<asp:Label ID="Label2" runat="server" Text="Activated feature(s) on the site:"></asp:Label><br />
<asp:GridView ID="gvFeatures" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Scope" HeaderText="Scope" />
        <asp:BoundField DataField="Status" HeaderText="Status" />
    </Columns>
</asp:GridView><br />
<asp:Label ID="Label3" runat="server" Text="Sub sites in the current site:"></asp:Label><br />
<asp:GridView ID="gvSubsites" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Url" HeaderText="Url" />
    </Columns>
</asp:GridView>

The following image shows you the web part design.



Now to write the code, right click the design surface and click View Code. In the code behind file define a class level object of SPWeb like below.

SPWeb _web = null;

In the page load initialize the SPWeb object to the current context web object.

protected void Page_Load(object sender, EventArgs e)
        {
            _web = SPContext.Current.Web;
            GetListsInTheSite();
            GetFeatures();
            GetSubSites();
        }

Now, as seen in the above listing, I’ve written three methods to get lists in the site, features activated on site and sub sites of the site. Please download the sample code for full working example.

Now we will configure the web part feature to be scoped for a particular web site.

For this, double click on the “Feature1.Feature” file, in Solution Explorer.

This will open the Feature designer.

Now in the feature designer, select Web from the Scope drop down for the feature. Also, you can change the Title and description for the feature as well. You can also change this scope value in the Feature1.Template.xml file as well. In the feature designer you can also choose to reset the server.

Now double click the Package.package file in Solution Explorer to open it.

When this Package.package file is opened it will show you the items in the current package.



Now click the “Manifest” button at the bottom of the package designer to see the package manifest xml. See the below listing.

<Solution xmlns="http://schemas.microsoft.com/sharepoint/" SolutionId="8c3e9dc1-470c-443a-8494-158162b46715" SharePointProductVersion="14.0">
  <Assemblies>
    <Assembly Location="VisualWebPartProject1.dll" DeploymentTarget="GlobalAssemblyCache">
      <SafeControls>
        <SafeControl Assembly="VisualWebPartProject1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b72c4b5f6fb29c2c" Namespace="VisualWebPartProject1.VisualWebPart1" TypeName="*" />
      </SafeControls>
    </Assembly>
  </Assemblies>
  <TemplateFiles>
    <TemplateFile Location="CONTROLTEMPLATES\VisualWebPartProject1\VisualWebPart1\VisualWebPart1UserControl.ascx" />
  </TemplateFiles>
  <FeatureManifests>
    <FeatureManifest Location="VisualWebPartProject1_Feature1\Feature.xml" />
  </FeatureManifests>
</Solution>

As, you can see the manifest file have reference to the assembly of the web part project, safe control entry elements to be added to the SharePoint site’s web.config file. Reference to the Visual web part user control file to be added to the CONTROLTEMPLATES directory of SharePoint Hive.

Now build the project.

On successful building of the project, again right click the project name in solution explorer and click Package to package the solution. This will package your web part files to a single WSP file as a deployable solution package.

Now again click “Deploy” by right clicking the project in solution explorer to deploy the feature to the selected SharePoint site at the time of project creation.

Next, after deployment of the feature navigate to your site and go to site collection feature page to see that our web part is properly deployed or not. See the below image.



Now to add our web part, navigate to the Home page of the site.

From the Page Tab of top navigation, click Edit to get the page in edit mode.



Now, when the page is opened in edit mode, two new tabs will be added to the top navigation ribbon bar.



Next, from the Insert Tab select Web Part to add our new web part.

This will open the panel below the top ribbon bar for adding a new web part. This panel contains Categories list of the web parts, next to that list of web parts available and next to that, information panel for the selected web part.



Now, from the Categories, select Custom. This will list out all the custom web parts added to the web part gallery. From the Web Parts list, select our VisualWebPart1, and click Add button at the bottom right corner of the panel.

Now your page will look like one shown in the below image.



Now, to save changes and close edit mode of the page, go to Page tab and click “Save & Close” button.

Now, you can see that our web part lists out all the lists provisioned on the site, all the features activated on the web site and the sub sites created in the current site if found any.



So, this way we can develop a custom web part using Visual Web Part design feature provided by Visual Studio 2010 for SharePoint 2010. Here we have just explored a simple web part example, but you can develop a complex web part with complex functionalities.

You can download the fully working sample code from here.

By Jatin Prajapati   Popularity  (11601 Views)
Picture
Biography - Jatin Prajapati
I think, most of the people are interested only in answers so no Biography provided... Want know more just write me at jatin.prajapati.er@gmail.com