Assuming I have a SharePoint site ready to go, I will be using My Site for Office SharePoint Portal Server 2003 for my example. (NOTE: I will be creating links in this document to screen shots to help clarify what I’m writing about).

1. Install the Web Part Templates for Visual Studio .NET
2. Start Visual Studio and create a new C# Web Part Project named HelloWebPartLib as illustrated.
3. Visual Studio will automatically create several files for you. Delete the files: WebPart1.cs and WebPart1.dwp.
4. Add a Web Part class to the project named HelloWorld.cs as illustrated.
5. Add a new Web Part DWP item to the project named HelloWorld.dwp as illustrated.
6. In the Properties window for the DWP file, set the Build Action property to “Content”. This will be needed later when you build a CAB file for deployment.
7. Create a new key pair using sn.exe so you can give the HelloWebPartLib a strong name as illustrated.For example:  sn -k c:\keypair.snk
8. Edit the AssemblyInfo.cs file to change the AssemblyKeyFile attribute to point to the key pair file you just created.[assembly: AssemblyKeyFile("c:\\keypair.snk")]
9. In the HelloWord.cs file, edit the RenderWebPart method to write out “Hello World!”

   protected override void RenderWebPart(HtmlTextWriter output)

   {

   //output.Write(SPEncode.HtmlEncode(Text));

   output.Write(“Hello World!”);

   }

10. Build the HelloWebPartLib project.
11. Now that you have built the project, we need to extract the PublicKeyToken value of the assembly to specify in the HelloWorld.dwp file. I use Lutz Roeder’s Reflector utility to pull this information, however you can use sn -T from the Visual Studio command prompt as well.
12. Edit the HelloWorld.dwp file so that the XML entity named <Assembly> contains the PublicKeyToken value that you extracted using Reflector or sn.exe. Also, add the TypeName value as shown below.NOTE: Make sure you replace the highlighted public key token value in the example below with your own!

    <?xml version=”1.0″ encoding=”utf-8″?>

    <WebPart xmlns=”http://schemas.microsoft.com/WebPart/v2″ >

    <Title>Hello World</Title>

    <Description>Hello World WebPart</Description>

    <Assembly>HelloWebPartLib, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4a5727bcff5dd0bb</Assembly>

    <TypeName>HelloWebPartLib.HelloWorld</TypeName>

    <!– Specify initial values for any additional base class or custom properties here. –>

    </WebPart>

13. Edit the Manifest.xml file to specify the HelloWorld.dwp file in your project. Note that you can simply alter the existing text that reads “<DwpFile FileName=”WebPart1.dwp”/>” and change it to the following:

    <DwpFile FileName=”HelloWorld.dwp”/>

14. Now we are ready to deploy our Web Part. The easiest way to do so is to create a CAB project.
15. Right-click on your solution and then click Add New Project.
16. As illustrated, create a Setup and Deployment CAB project named HelloWPCab.
17. Right-click on the CAB project, point to Add, and then click Project Output.
18. When the Add Project Output Group dialog box appears, specify “primary output” and “content files” and then click OK.
19. Rebuild the entire solution. At this point a CAB file will have been created in the project directory you specified when creating the CAB project.
20. To install our CAB file on the SharePoint server, copy the generated CAB file to the server. For this example, I am copying to the C:\ drive of the server.
21. Once our CAB file has been copied over to the server, we can run the SharePoint command-line administration tool named stsadm.exe. This will deploy our CAB file containing the HelloWorld WebPart.NOTE: The stsadm.exe file on the server is in C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\BIN\ by defult.
22. As illustrated, run the stsadm.exe utility using the following parameters to install the HelloWorld WebPart. Note that you may need to change the highlighted path below depending on where you copied the CAB file on the server.stsadm -o addwppack -globalinstall -force -filename C:\HelloWPCab.cab
23. As illustrated, now you can add your WebPart to a SharePoint portal page! In this case, I am adding it to the default page in “My Site”. Do this by clicking on the Modify My Page link, point to Add Web Parts, and then click Browse.
24. When you click on the Virtual Server Gallery link on the right window pane, you will see the Hello World Web part available for use.
25. Drag and Drop your Hello World WebPart into one of the available zones as illustarted. That’s it!

Requirement: I have a Web User Control where I added one textbox and a button. Now I wanted to add this user control into a SharePoint Web Part. After adding this Web Part to any page, if I click the button, there should be a text “Hello World” in the Text Box.

Steps:

1. Create a blank web application and add a web user control (name WebUserControl.ascx) into it. While adding the user control, uncheck the “Place code in a separate file” option.
2. Add one TextField and a Button to the user control. The ids of these controls are TextBox1 and Button1 respectively.
3. Now copy this user control to a folder (wuc) under your virtual host (Web Application) path. In my case it is: “C:\Inetpub\wwwroot\wss\VirtualDirectories\80\wuc\”.
4. Now create a web part application using Visual Studio SharePoint Web Part template. Here is the code for the web part:

using System;

using System.Runtime.InteropServices;

using System.Web.UI;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Serialization;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

using Microsoft.SharePoint.WebPartPages;

namespace wucwp

{

    [Guid("ee818646-e872-455c-a857-6e64e513539b")]

    public class wucwp : System.Web.UI.WebControls.WebParts.WebPart

    {

        UserControl userControl;

        System.Web.UI.WebControls.TextBox txtField;

        System.Web.UI.WebControls.Button showButton;

        public wucwp()

        {

            this.ExportMode = WebPartExportMode.All;

        }

        protected override void Render(HtmlTextWriter writer)

        {

            // TODO: add custom rendering code here.

            // writer.Write(“Output HTML”);

            userControl.RenderControl(writer);

        }

        protected override void CreateChildControls()

        {

            base.CreateChildControls();

            userControl = (UserControl) Page.LoadControl(@”/wuc/WebUserControl.ascx”);

            txtField = (System.Web.UI.WebControls.TextBox) this.userControl.FindControl(“TextBox1″);

            showButton = (System.Web.UI.WebControls.Button) this.userControl.FindControl(“Button1″);

            showButton.Click += new EventHandler(showButton_Click);

            Controls.Add(userControl);

        }

        void showButton_Click(object sender, EventArgs e)

        {

            //throw new Exception(“The method or operation is not implemented.”);

            txtField.Text = “Hello World”;

        }

    }

}

Now deploy this web part and add it to any page of your site and this should work as expected.

Update Note: One minor modification. It is better to put the .WebUserControl.ascx file under 12-Hive\TEMPLATE\CONTROLTEMPLATES folder,  and access it as userControl = (UserControl) Page.LoadControl(@”/_controltemplates/WebUserControl.ascx”);

Thanks Inge for your inputs.

Web User Controls

User controls are those controls which we create and add to Web pages. Creating a user control for Web Application is very similar to creating a user control in Windows Application. User controls in ASP.NET are based on the System.Web.UI.UserControl class and the class hierarchy is as follows:

Object
Control
TemplateControl
UserControl

Creating User Controls

To create a user control select Project->Add Web User Control from the main menu to add it to an existing project. It looks like the image below.

You can also select File->New->Project->Visual Basic Projects->Web Control Library to create a new user control. The dialog box looks like the image below.

By default, user control files have an “ascx” extension. The following user control sample which we will create is a simple control that contains hyperlinks. While browsing the Internet you might notice some Web sites that have lots of links towards the bottom of the page and those links are found on each and every Web page of that site. For example, if you hit amazon.com you will notice 17-20 links towards the bottom of the page and on each and every page of amazon.com you will find those links. Creating such kind of links manually on each and every page of the site can be a pain as you need to make sure that each and every link works and none is broken. With a ASP.NET user control you can create just one control of that kind and add that to each and every page without creating the links manually on each and every page.

To start, add a user control file to the project selecting from Project->Add Web User Control and drag five hyperlink server controls from the toolbox on to the user control file (WebUserControl1.ascx). We are designing the user interface for the user control at this time. Select each hyperlink control and set it’s NavigateUrl to a site of your choice and Target property to “_parent”. The HTML view of this file looks like this:

Notice the code above, the code doesn’t have any HTML elements like, <HEAD>, <BODY>, etc. By default Web user controls cannot contain the HTML tags that inlcude the <HTML>, <HEAD>, <BODY> and <FORM> tags.

Once you are finished designing the user interface it’s now time to use the control. To use the newly created user control, in the Web Forms Designer, open the Web Forms page you want to add the control to, and make sure that the page is in Design View. Select the user control’s file in Solution Explorer, and drag it onto the page. That add’s the user control to the form. Note that because the Web User Control has not been compiled, VB doesn’t know what it will look like at run time, so it gives it a generic apperance at design time. The image below displays that.

Adding a User Control Manually

We also can add a user control to a Web Forms page in HTML view. The procedure above demonstrated creation of a user control and adding it to a Web form by drag and drop feature. The following two steps will show you how to add it in code.

Register the user control

The first step in the process is to register the user control which we created. To do so, open the Web forms page to which you want to add the user control. Go to design view and switch to HTML view and at the top of the page, before the <HTML> tag, you need to add a directive that registers this control so that it will be recognized when the page is processed. You should use the directive to associate a name and a namespace with the Web user control by specifying TagPrefix, TagName, and Src location values. The line of code for that looks like this:

<%@ Register TagPrefix=”uc1″ TagName=”links” src=”WebUserControl1.ascx” mce_src=”WebUserControl1.ascx” %>

The values for each attribute mentioned on the above line of code are as follows:

TagPrefix: The TagPrefix determines a unique namespace for the user control. If multiple user controls on the page happen to have the same name, they can be differentiated from each other using this
TagName: The TagName is the name for the user control. This name is used along with the tag prefix to uniquely identify the namespace for the control
Src: Src attribute is the virtual path to the user control

Adding the User Control

The next step is to add the user control to the page. To add the user control to a page use the following line of code:

<uc1:links id=”links1″ runat=”server”/>

The above line of code should be placed in the <BODY> region of the page and within the <FORM> element. You can place the line code where you want the control to appear on the page. When you run the application the Web User control will be displayed on the page.