Wednesday, 9 October 2013

How to create Sample SharePoint 2010 Visual web part using Visual Studio 2010

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.

Steps Involved:


Creating Empty SharePoint Project:

Open Visual Studio 2010.
  • Go to File => New => Project. 
  • Select 2010 from the installed templates SharePoint and choose Empty SharePoint Project. 
  • Name it as HelloWorld.
  • Click Add. 
  • Enter the SharePoint server farm URL. 
  • Select 'Deploy it as a Farm Solution". 
  • Click Finish.
Creating Visual web part:

  • Right click the Solution Explorer and select Add a new item. 
  • Select Visual Web Part from the installed templates SharePoint and name it as HelloWorld.

1.gif
  • Once you create Visual Web Part automatically all the files will be generated as shown in the below figure that is required to deploy your web part directly into the SharePoint 2010.
  • In the solution explorer you could see VisualWebPart1UserControl.ascx.
  • Open the .ascx file and add one asp label control.
  • In this web part I am just going to display a label with the text as "Hello World!!!!".
  • See the below code.
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %><%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register Tagprefix="asp" Namespace="System.Web.UI"Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %><%@ Import Namespace="Microsoft.SharePoint" %><%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Control Language="C#" AutoEventWireup="true"CodeBehind="VisualWebPart1UserControl.ascx.cs"Inherits="HelloWorld.VisualWebPart1.VisualWebPart1UserControl" %>
<asp:Label ID="lblHelloWorld" runat="server" Font-Bold="True"
    ForeColor="#0066FF" Text="Hello World!!!!"></asp:Label>

  • Build the solution. 
  • Deploy the solution.
Testing:

  • Go to the SharePoint site  http://servername:2010.
  • Go to Site Actions=>Edit Page.
  • In the top ribbon Editing Tools => Insert => Web Part, click on the Web Part. 
2.gif
  • Go to Categories => Custom, you could see VisualWebPart1 which we have developed using Visual Studio 2010.

    3.gif

  • Select VisualWebPart1 and click on Add.
  • Now you will able to see the label with the text "Hello World !!!!" as shown below.



Summary:

    In this article my intension is to give some information about how to create a simple Visual Web part (a new template that is available in visual studio) and deploy directly into the SharePoint 2010.
References:

No comments:

Post a Comment