Freigeben über


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.

Comments

  • Anonymous
    July 17, 2008
    PingBack from https://blogs.msdn.com:443/pranab/archive/2007/11/30/adding-user-control-to-sharepoint-2007-moss-wss-web-part-and-handling-events-in-there.aspx

  • Anonymous
    August 06, 2008
    consider you want to store these value in list how the code will be?

  • Anonymous
    August 20, 2008
    A picture of the result would be nice.

  • Anonymous
    August 27, 2008
    You're a genius! Writing web parts without user controls is a pain, but nobody except you seems to have covered a good way to get around it! Thanks!

  • Anonymous
    September 24, 2008
    Hi Pranab,           It was such a really nice article which i was looking for. Pranab, It is good when we have one o r two usercontrols but, how can we associate almost 15 usercontrols into it and make easy navigation among all user controls in a single web part. One more that I would like to take in your consideration that if we go this way then it would be hard to handle the events of all user controls on single web part.        Kindly advise me. I have to implement 15 user controls into single web part. Thanks & Regards, Abhishek Verma New Delhi mailto: abhishekv@ibilttechnologies.com

  • Anonymous
    April 29, 2009
    thanx alot pranab,.. you are the good one,.. :D

  • Anonymous
    April 29, 2009
    you are the good one Man,.. thanx for the clue,.

  • Anonymous
    May 08, 2009
    This really made my day! I have got drop downs working and populated with list data. I plan on making a cascading dropdown effect to limit what users can select! AWESOME!

  • Anonymous
    June 25, 2009
    Hi Pranab, Its really useful. Thanks a lot man and the good work. Cheers :-; Dixanta Shrestha

  • Anonymous
    July 01, 2009
    The comment has been removed

  • Anonymous
    August 03, 2009
    I get the exact same error msg as Steve, under the exact same situation. Any ideas?

  • Anonymous
    October 22, 2009
    Hi Pranab. Your article here is simply amazing. great post man. thanks Guru V

  • Anonymous
    April 21, 2010
    Steve & Harish (and anybody else getting the 'The content type text/html; charset=utf-8 of the response message does not match the content type of the binding (text/xml; charset=utf-8)'...error - see:  http://www.signaturesterling.com/post/Cryptic-Error-When-Deploying-Visual-Studio-2008-SharePoint-Web-Part-Template.aspx.

  • Anonymous
    October 31, 2010
    Great webpart! Why dont you put it on sale and earn some bucks. Visit <a href="www.thesharepointmarket.com/.../"> Submit Your WebPart</a> and start earning!

  • Anonymous
    April 13, 2011
    Great Job.. Can any one help for connecting this web part to database... thanks & regards Pankaj Keshari Pankaj@keshari@hotmail.com