Pawel Ciucias: Visual Web Part with Custom Properties

How to create a Visual Web Part with Custom Properties in the properties window.

Create a new project or open an existing one.
Add a new item, select Visual Web Part, give it a name and click OK.

Once you've added your visual web part module (elements, cs, webpart, usercontrol.ascx), in your solution explorer open the User Control file(VisualWebPart1UserControl.ascx), and add an asp link button to our User Interface.

With our Link button added you should have something along these lines:

<%@ 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="Custom_Properties_WebPart.VisualWebPart1.VisualWebPart1UserControl" %>
 
<asp:LinkButton ID = "Email_LB" runat ="server" />

With our UI complete lets move on to the code behind, open up VisualWebPart1UserControl.ascx.cs

with our Code behind open create two internal or public properties one to store the email address and the other to store the email text. Then set the link buttons url to a concatenated string with "mailto:" + "Email address" and the text property to the email text, I came up with something along these lines:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
 
namespace Custom_Properties_WebPart.VisualWebPart1
{
    public partial class VisualWebPart1UserControl : UserControl
    {
        internal string EmailAddress { get; set; }
        internal string EmailText { get; set; }
 
        protected void Page_Load(object sender, EventArgs e)
        {
            Email_LB.Text = EmailText;
            Email_LB.PostBackUrl = string.Format(@"MailTo:{0}", EmailAddress); 
        }
    }
}

Now that our UI and code-behind are complete let's move on to the juicy parts.

Open up the .cs page

You should see something along these lines

First thing we are going to do is create our custom Properties, we are going to place them inside our class as siblings of our CreateChildControls() function.

[WebBrowsable(true),
 WebDisplayName("eMail Address"),
 WebDescription("eMail Address to send to."),
 Personalizable(PersonalizationScope.Shared),
 Category("Custom"),
 DefaultValue("")]
public string eMailAddress { get; set; }
 
[WebBrowsable(true),
 WebDisplayName("eMail Text"),
 WebDescription("eMail Text to Display."),
 Personalizable(PersonalizationScope.Shared),
 Category("Custom"),
 DefaultValue("")]
public string eMailText { get; set; }

With our public properties complete we now have to cast our control more explicitly in our 
CreateChildControls() function. rather then type Control we are going to use VisualWebPart1UserControl.

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

now that we've cast our control as a VisualWebPart1UserControl (VisualWebPart1UserControl) 
we can set the internal email address and text in our code-behind.

protected override void CreateChildControls()
{
    VisualWebPart1UserControl control = (VisualWebPart1UserControl)Page.LoadControl(_ascxPath);
    control.EmailAddress = eMailAddress;
    control.EmailText = eMailText;
    Controls.Add(control);
}

up to this point your .cs class should resemble something along the lines of:

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 Custom_Properties_WebPart.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/Custom_Properties_WebPart/VisualWebPart1/VisualWebPart1UserControl.ascx";
 
        [WebBrowsable(true),
         WebDisplayName("eMail Address"),
         WebDescription("eMail Address to send to."),
         Personalizable(PersonalizationScope.Shared),
         Category("Custom"),
         DefaultValue("")]
        public string eMailAddress { get; set; }
 
        [WebBrowsable(true),
         WebDisplayName("eMail Text"),
         WebDescription("eMail Text to Display."),
         Personalizable(PersonalizationScope.Shared),
         Category("Custom"),
         DefaultValue("")]
        public string eMailText { get; set; }
 
        protected override void CreateChildControls()
        {
            VisualWebPart1UserControl control = (VisualWebPart1UserControl)Page.LoadControl(_ascxPath);
            control.EmailAddress = eMailAddress;
            control.EmailText = eMailText;
            Controls.Add(control);
        }
    }
}

you should be able to deploy your solution and fill in the blanks

 once you hit ok, and save your page your webpart should render like so:

Thursday, 24 May 2012

Visual Web Part with Custom Properties