Creating a Web Part For SharePoint – Standard vs Visual Web Parts

A common SharePoint developer task is to create a custom Web part. SharePoint 2010 include two different Web Parts –  Standard and Visual. A standard Web part provides the core infrastructure which allows you to create and deploy Web parts to SharePoint. In contrast a Visual Web Part fully utilizes the designer surface in Visual Studio to allow for features such as drag and drop as well as double clicking controls to wire up events.
Firstly looking at Standard Web Parts, since SharePoint is built on top of ASP.NET, you can apply common ASP.NET coding techniques.  The below code snippet shows  a Label , Textbox, and Button control that are being instantiated and properties set, as well as a Click event that corresponds to the Button control:

namespace MyFirstDevTask.FistTaskWebPart
{
[ToolboxItemAttribute(false)]
public class FistTaskWebPart: WebPart
{
Label label1= new Label();
TextBox textbox1 = new TextBox();
Label responseLbl= new Label();
Button button1= new Button();
protected override void CreateChildControls()
{
Label1.Text = “Enter Text:”;
responseLbl.Text = ““;
textbox1 .Enabled = true;
textbox1 .Text = ““;
myButton.Text = “Click Me”;
this.Controls.Add(Label1);
this.Controls.Add(textbox1 );
this.Controls.Add(new LiteralControl(“
”));
this.Controls.Add(responseLbl);
this.Controls.Add(new LiteralControl(“
”));
this.Controls.Add(button1);
button1.Click += new EventHandler(button1_Click);
}
void button1_Click(object sender, EventArgs e)
{
string userResponse = Label1.Text;
responseLbl.Text = userResponse;
}
}
}

In the above snippet,  the four controls are declared at the class level. Then, in the CreateChildControls method, the properties for those objects are set. The Add method is called to add the controls to the Controls collection (to display them in the Web part), and the myButton_Click event is called to render the user’s entry as text in one of the labels.

If you have not coded Web parts before, this is pretty standard — that is, creating the controls, setting the properties for those controls, adding the controls to the Controls collection, and then adding any event handlers for those controls.

Standard Web parts are item-level templates in Visual Studio, therefore you can only add this to a parent project like  an Empty SharePoint project. It is, however, one of the standard templates which are available in Visual Studio, so creating and then deploying  Web parts is very straightforward.

A Visual Web part is different to a standard Web part in that you are given a designer experience which you can use to create the UI for the Web part (in contrast to the previous example where the UI controls were programmatically created). In addition, a Visual Web part has both project-level and item-level templates in Visual Studio, so you can create both a parent and a child project which are Visual Web parts.

The Designer experience in Visual Studio 2010 allows you to drag and drop  library controls from the Visual Studio Toolbox to the Designer surface (by way of contrast,  with the standard Web part you would need to  manually code and use IntelliSense to create controls and events). To create events using the the Visual Web part, simply double-click the control in the Designer, and are then taken to the code behind to code the events for that control.

For example, if you wanted to use a Visual Web part  to implement the same code as shown above  in the discussion of the standard Web part, then you would use an ASP.NET user control (ascx file) which represents the UI with a code-behind file. The ascx user control code would be similar to the below snippet:

<asp:Label ID=”Label1” runat=”server” Text=”Enter Text:”></asp:Label>
&nbsp;<asp:TextBox ID=”textbox1” runat=”server”></asp:TextBox>
<p>
<asp:Label ID=”responseLbl” runat=”server” Text=”Label”></asp:Label>
</p>
<asp:Button ID=”button1” runat=”server” onclick=”myButton_Click”
Text=”Click Me” />

The code behind for the ascx user control would be as below:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
namespace MyFirstDevTask.SecondTaskWebPart
{
public partial class SecondTaskWebPartUserControl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void button1_Click(object sender, EventArgs e)
{
string userResponse = textbox1.Text;
responseLbl.Text = userResponse;
}
}
}

Note from the above snippets that the control declarations do not appear the ascx code behind. There is, however, a reference to the ascx control in the core Web part class which loads the user control you built with the Designer experience at runtime. The below code  represents this reference inside of the core Web part class. Note that the _ascxPath object just represents a file-system path to the location of the ascx file which was created with the Designer.

public class SecondTaskWebPart : WebPart
{
private const string _ascxPath =
@”~/_CONTROLTEMPLATES/MyFirstDevTask/SecondTaskWebPart/
SecondTaskWebPartUserControl.ascx”;
protected override void CreateChildControls()
{
Control control = Page.LoadControl(_ascxPath);
Controls.Add(control);
}
}

Now you have created both a standard and a visual web part, both of which provide the same  functionality.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.