Create Visual Web Part of SharePoint 2010

Web Part page view: /_catalogs/wp/forms/allitems.aspx

To start off, create an empty project in Visual Studio 2010 as you can see here:

 image_4_7CC900A6

select “Visual Web Part”, After you give it a suitable name and continue, you’ll be prompted for the site.  Enter in the appropriate Url.  Note, here’s where you can see that the sandbox solution is greyed out. (Farm Solution)

Step 1 : Add Tags to “SiteStructWebPartUserCoontrol.ascx”, and add C# code to “SiteStructWebPartUserControl.ascx.cs”.

Step 2 : Add SafeControl to Package.xml

Note : If you missed this part, when you try to add this webpart, the error message “A Web Part or Web Form Control on this Page cannot be displayed or imported. The type is not registered as safe.” will pop up.

The basic steps to add a custom property are;
  1. Add a custom property in “VisualWebPart1.cs” Web Part class
  2. Make above custom property visible to “VisualWebPart1UserControl.ascx” User Control
  3. Access custom property from the User Control
1. Add a custom property in “SiteStructWebPart.cs” Web Part class
These custom properties will be displayed in the property pane as different controls according to the type of the property.
  • bool -> Check box
  • enum  -> Dropdown list
  • int -> Text box
  • string -> Text box
  • DateTime -> Text box
In here this property will be rendered as a Dropdown list since it is enum type. I can specify a default value and a description for this property, which are optional. Then “WebBrowsable” attribute is used to tell that this property should be displayed in the property pane. Then “Personalizable” attribute tells to store the value of this property in the database, so it will retain in the next time.
Take a look at UI: Edit Web Part
2. Make custom property visible to “SiteStructWebPartUserControl.ascx” User Control
Here we need to change “CreateChildControls” method implementation of the “SiteStructWebPart.cs” class to pass the value of our custom property to the User Control. Here if we pass the WebPart class itself as a property, we can simply access several custom properties by less code.
User Control Property

public SiteStructWebPart WebPartControl { get; set; }

Hint: Add this property to “SiteStructWebPartUserControl.ascx.cs”

“CreateChildControls” in “SiteStructWebPart.cs”
protected override void CreateChildControls()
{
    SiteStructWebPartUserControl control = Page.LoadControl(_ascxPath) as SiteStructWebPartUserControl;
    if (control != null)
    {
       control.WebPartControl = this;
    }
    Controls.Add(control);
}

3. Access custom property from the User Control

Note: Setting Chrome Type to enable or disable title and border for Web Part:
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s