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 (15)

  1. Pankaj Keshari says:

    Great Job..

    Can any one help for connecting this web part to database…

    thanks & regards

    Pankaj Keshari

    Pankaj@keshari@hotmail.com

  2. thesharepointmarket says:

    Great webpart!

    Why dont you put it on sale and earn some bucks. Visit <a href="http://www.thesharepointmarket.com/…/"&gt;

    Submit Your WebPart</a>

    and start earning!

  3. 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.

  4. Guru Prasad Venkataraman says:

    Hi Pranab.

    Your article here is simply amazing.

    great post man.

    thanks

    Guru V

  5. Harish Mathanan says:

    I get the exact same error msg as Steve, under the exact same situation. Any ideas?

  6. Steve says:

    Hello!

    So I couldnt get either of the posts working like you said. I have followed you instructions to a T and yet i still recieve and error:

    Error 1 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). If using a custom encoder, be sure that the IsContentTypeSupported method is implemented properly. The first 1024 bytes of the response were: ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>

    <title>IIS 7.0 Detailed Error – 500.0 – Internal Server Error</title>

    <style type="text/css">

    <!–

    body{margin:0;font-size:.7em;font-family:Verdana,Arial,Helvetica,sans-serif;background:#CBE1EF;}

    code{margin:0;color:#006600;font-size:1.1em;font-weight:bold;}

    .config_source code{font-size:.8em;color:#000000;}

    pre{margin:0;font-size:1.4em;word-wrap:break-word;}

    ul,ol{margin:10px 0 10px 40px;}

    ul.first,ol.first{margin-top:5px;}

    fieldset{padding:0 15px 10px 15px;}

    .summary-container fieldset{padding-bottom:5px;margin-top:4px;}

    legend.no-expand-all{padding:2px 15px 4px 10px;margin:0 0 0 -12px;}

    legend{color:#333333;padding:4px 15px 4px 10px;margin:4px 0 8px -12px;_margin-top:0px;

    border-top:1px solid #EDEDED;border-left:1px solid #EDEDED;border-right:1px solid #969696;

    border-bottom:1px solid #969696;background:#E7ECF0;font-weight:bold;f’. 0 0

    Any suggestions?

    I get this error when I click the Deploy button, however this doesnt come up when I Build… weird.

  7. Dixanta Shrestha says:

    Hi Pranab,

    Its really useful. Thanks a lot man and the good work.

    Cheers :-;

    Dixanta Shrestha

  8. Dan says:

    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!

  9. you are the good one Man,.. thanx for the clue,.

  10. thanx alot pranab,.. you are the good one,.. 😀

  11. Abhishek Verma says:

    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

  12. GeorgeBR says:

    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!

  13. BobChauvin says:

    A picture of the result would be nice.

  14. Aziz says:

    consider you want to store these value in list how the code will be?

Skip to main content