Part 2 - Adding user control to SharePoint 2007 (MOSS/WSS) Web Part and handling events in there - Step by Step with task pane properties

Since my post “Adding user control to SharePoint 2007 (MOSS/WSS) Web Part and handling events in there” I got great response and several feedbacks. I am adding a new step by step process using VS 2008 (VSeWSS 1.2). I have also used properties for the Web Part which can be set from the Web Part task pane.

Step 1:

Start VS 2008 and select new Project and select Visual C#>SharePoint>Web Part. Change the name as ContosoUserControlWP. In the Solution explorer select the folder Webpart1 and delete it. Right click on the project and select Add>New Item. In the new item window select SharePoint and Web Part. Change the name of the Web Part as ContosoUserControlWP.

Step 2:

Right click on the project and select Add>New Folder. Name it Templates. Similarly create another folder under Templates and name it controltemplates. Right click on controltemplates and select Add>New Item. In the new item window select General and Text File. Change the name of the Text File as ContosoUserControl.ascx. Now from Toolbox add three TextBoxes and a button to the ContosoUserControl.ascx. You can also use table etc. for formatting. You may find that the design mode is not working for these User Controls. If required you can create a separate Visual Studio Web Application and can add web user control there and can add and see all these controls in design mode and can copy the HTML from there to our project. Otherwise you can drag the User Control from controltemplates folder to the root of Project (just outside Templates folder). Now you can see the design mode will work. Once your changes are done drag it back to the controltemplates folder.

Step 3:

After the opening curly braces of class ContosoUserControlWP add these lines:

UserControl userControl;

TextBox txtFirstName;

TextBox txtLastName;

TextBox txtFullName;

Button btnSubmit;

public enum displayFont

        {

            verdana = 0,

            arial,

            geogia

        };

        protected displayFont displayFontName;

        [WebBrowsable(true), Personalizable(true), WebDisplayName("Disply Font"), WebDescription("Disply Font")]

        public displayFont DisplayFontName

        {

            get{ return displayFontName; }

            set{displayFontName = value;}

        }

Remove all lines from CreateChildControls method and add following lines:

userControl = (UserControl)Page.LoadControl(@"/_controltemplates/ContosoUserControl.ascx");

            txtFirstName = (TextBox)this.userControl.FindControl("TextBox1"); // IDs our textboxes in user control (TextBox1, TextBox2, TextBox3) 

            txtLastName = (TextBox)this.userControl.FindControl("TextBox2");

            txtFullName = (TextBox)this.userControl.FindControl("TextBox3");

            btnSubmit = (Button)this.userControl.FindControl("Button1");

            btnSubmit.Click += new EventHandler(btnSubmit_Click);

            this.Controls.Add(userControl);

Step 4:

After CreateChildControls method add these lines:

void btnSubmit_Click(object sender, EventArgs e)

        {

            txtFullName.Text = txtFirstName.Text + " " + txtLastName.Text;

txtFullName.Font.Name = displayFontName.ToString();

        }

        protected override void Render(HtmlTextWriter writer)

        {

            userControl.RenderControl(writer);

        }

       

Step 5:

Right click on the project once again and go to properties and in the Debug tab and Start Browser with URL add the destination site’s URL. Now deploy the application from Build> Deploy menu and open the destination site’s URL .

Step 6:

In the site click on Site Actions>Edit Page and click on Add a Web Part in any Web Part Zone. This will open up the Web Part gallery and under Misceleneous section you will find ContosoUserControlWP Web Part. Select the Web Part and it will be added to the Web Part Zone. Now if you exit the edit mode you can see the Web Part with 3 textboxes and a button. Add your first and last name into the first and second textbox and hit the button. This will show up the full name in the 3rd textbox. Moreover if you click on Modify This Web Part in Edit Mode, it will show up the Web Part Properties Task Pane. In the Miscellaneous section you will find the font setting drop down and there you can change the font as per your choice and now if you hit the button in the Web Part once again you can see the full name in the specific font.