On completion of the second part, you will have an extensibility project template that makes creating and publishing a web control a straightforward process.<\/p>\n
In the first part of this walkthrough, you will learn to<\/p>\n
- \n
- Create a custom web control. <\/li>\n
- Test the web control in the Visual Studio experimental instance. <\/li>\n
- Prepare the web control for publication. <\/li>\n
- Publish the web control to the Visual Studio Gallery. <\/li>\n
- Install the web control from the Visual Studio Gallery. <\/li>\n
- Remove the web control from the Visual Studio Gallery. <\/li>\n<\/ul>\n
Prerequisites<\/h4>\n
To follow this walkthrough, you must have a working knowledge of web controls, creating new projects, setting project properties, and using the Visual Studio experimental instance. You must have both Visual Studio 2010 and the Visual Studio 2010 SDK installed on your computer.<\/p>\n
Creating and publishing your web control from scratch<\/h4>\n
To create and publish your custom web control when no project template is available, start with an existing extensibility control project and modify it to create an extensibility web control project. <\/p>\n
1. Open Visual Studio and create a new Visual C#\/Extensibility\/Windows Forms Toolbox Control<\/strong> project named MyWebControls. Check Create directory for solution<\/strong> before clicking OK.<\/p>\n
![\"clip_image002\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/5556.clip_image002_thumb_43C18D88.jpg\" "\\"clip_image002\\"")
<\/a><\/p>\n2. Add a new Visual C#\/ASP.NET Server Control<\/strong> project named Temp to the solution.<\/p>\n
![\"clip_image004\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/4863.clip_image004_thumb_5314EF97.jpg\" "\\"clip_image004\\"")
<\/a><\/p>\n<\/p>\n
Merging the project files.<\/h5>\n
1. Rename the file Temp\/ServerControl1.cs to Temp\/ColorTextControl.cs. <\/p>\n
2. Delete the file MyWebControls\/ToolboxControl.cs.<\/p>\n
3. Copy the file Temp\/ ColorTextControl.cs to the MyWebControls project.<\/p>\n
4. Remove the Temp project from the solution.<\/p>\n
![\"clip_image002[4]\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/8512.clip_image0024_thumb_31B549FB.jpg\" "\\"clip_image002[4]\\"")
<\/a><\/p>\nMerging the project references<\/h5>\n
1. Add the following references to the project:<\/p>\n
- \n
- Microsoft.CSharp <\/li>\n
- System.Data.DataSetExtensions <\/li>\n
- System.Web <\/li>\n
- System.Xml.Linq <\/li>\n<\/ul>\n
2. Remove the following references from the project:<\/p>\n
- \n
- System.Data <\/li>\n
- System.Windows.Forms <\/li>\n
- System.Xml <\/li>\n<\/ul>\n
![\"clip_image004[4]\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/0272.clip_image0044_thumb_77C6070E.jpg\" "\\"clip_image004[4]\\"")
<\/a><\/p>\nCreating the web control<\/h5>\n
1. Open the file ColorTextControl.cs in the code editor.<\/p>\n
2. Change the namespace to MyWebControls.<\/p>\n
3. In the ToolboxData<\/b> attribute, replace both occurrences of ServerControl1 with ColorTextControl.<\/p>\n
These values specify the opening and closing tags generated for the control when it is dragged from the Toolbox into a web page at design time. They must match the name of the control class, which is also the name of the control that will appear in the toolbox. <\/p>\n
4. Add a ProvideToolBoxControl<\/b> attribute to the control class.
The first argument to this attribute is the name of the assembly, which is the same as the namespace when the project is generated. The color text control will appear in a category in the toolbox with this name.<\/p>\nThe start of the control class source code now looks like this:<\/p>\n
namespace <\/span>MyWebControls\r\n{\r\n [DefaultProperty<\/span>(\"Text\"<\/span>)]\r\n [ToolboxData<\/span>(\"<{0}:ColorTextControl runat=server><\/{0}:ColorTextControl>\"<\/span>)]\r\n [ProvideToolboxControl<\/span>(\"MyWebControls\"<\/span>, false<\/span>)]\r\n public class <\/span>ColorTextControl <\/span>: WebControl\r\n <\/span>{<\/pre>\n5. Replace the get<\/b> method of the default Text<\/b> property with this code:<\/p>\n
get\r\n<\/span>{\r\n String <\/span>s = (String<\/span>)ViewState[\"Text\"<\/span>];\r\n return <\/span>\"<span style='color:green'>' <\/span>+ s + \"<\/span>\"<\/span>;\r\n}<\/pre>\nThis surrounds the text with a span tag that colors it green.<\/p>\n
6. Open the file Properties\/AssemblyInfo.cs in the code editor.<\/p>\n
7. Replace the AssemblyVersion<\/b> Revision number with the “*” character.<\/p>\n
[assembly<\/span>: AssemblyVersion<\/span>(\"1.0.0.*\"<\/span>)]<\/pre>\n<\/a><\/p>\n
Custom toolbox controls are cached and refreshed only when the assembly signature changes. By incrementing the assembly revision number with each build, the cache is always refreshed.<\/p>\n
Testing your web control<\/h4>\n
Before publishing your web control, test it out in an experimental instance of Visual Studio.<\/p>\n
1. Press F5 to launch an experimental instance of Visual Studio.<\/p>\n
2. From the Tools<\/b> menu, select the Extension Manager<\/b>. The MyWebControls extension appears and is enabled.<\/p>\n
![\"clip_image006\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/1273.clip_image006_thumb_093667E7.jpg\" "\\"clip_image006\\"")
<\/a><\/p>\n3. Close the Extension Manager<\/b>.<\/p>\n
4. Create a new ASP.NET web application project.<\/p>\n
5. Open default.aspx in Source<\/b> mode.<\/p>\n
6. Open the toolbox. You should see ColorTextControl in the category MyWebControls.<\/p>\n
![\"clip_image008\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/2350.clip_image008_thumb_169C7AED.jpg\" "\\"clip_image008\\"")
<\/a><\/p>\n7. Drag a ColorTextControl to the body of the web page.<\/p>\n
8. Add a Text<\/b> attribute with the value Think Green!<\/i> to the ColorTextControl tag. The resulting tag should look like this:<\/p>\n
<<\/span>cc1<\/span>:<\/span>ColorTextControl <\/span>ID<\/span>=\"ColorTextControl1\" <\/span>Text<\/span>=\"Think Green!\" <\/span>runat<\/span>=\"server\" \/><\/span><\/pre>\n9. Press F5 to launch the ASP.NET Development Server. <\/p>\n
The ColorTextControl should render something like this:<\/p>\n
![\"clip_image010\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/2766.clip_image010_thumb_6E89CBCD.jpg\" "\\"clip_image010\\"")
<\/a><\/p>\n10. Close the ASP.NET Development Server. <\/p>\n
11. Close the experimental instance of Visual Studio.<\/p>\n
Preparing your web control for publication<\/h4>\n
Before you can publish your control to the Visual Studio Gallery, you need an icon and a screen shot. The icon you supply appears next to the extension in the Extension Manager.<\/p>\n
1. If you have an icon image file, add it to your project as an existing item. Otherwise, add a new image file to your project and edit the image to represent the control. In this walkthrough, we use an icon called Color.bmp, which shows the Color letter “A” on a yellow field.<\/p>\n
![\"clip_image012\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/5086.clip_image012_thumb_4E028C1B.jpg\" "\\"clip_image012\\"")
<\/a><\/p>\n2. If you have a screenshot image file, add it to your project as an existing item. Otherwise, create a screenshot image file and add it to your project. In this walkthrough, we use a screen shot called ScreenShot.bmp, which shows the control as it appears in a web page.<\/p>\n
![\"clip_image014\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/1373.clip_image014_thumb_65B9C381.jpg\" "\\"clip_image014\\"")
<\/a><\/p>\n3. Open the file source.extension.vsixmanifest for editing.<\/p>\n
4. Change the Description<\/b> to Color Text Web Control<\/i>.<\/p>\n
![\"clip_image016\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/5315.clip_image016_thumb_453283CF.jpg\" "\\"clip_image016\\"")
<\/a><\/p>\n5. Set the Icon<\/b> to Color.bmp<\/i> and the Preview Image<\/b> to ScreenShot.bmp<\/i>.<\/p>\n
![\"clip_image018\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/2671.clip_image018_thumb_7247709D.jpg\" "\\"clip_image018\\"")
<\/a><\/p>\n6. Change the Author, Version, and so forth, as desired.<\/p>\n
7. Save and close the manifest file, then rebuild the project as a Release<\/b> build. Publishing your web control<\/p>\n
Publishing your web control<\/h5>\n
You are now ready to publish your web control to the Visual Studio gallery.<\/p>\n
1. Launch your web browser and navigate to http:\/\/visualstudiogallery.msdn.microsoft.com<\/a>.<\/p>\n
2. Click the sign in<\/b> link in the upper right-hand corner.<\/p>\n
3. Sign in with your Windows Live ID. If you don’t have one, you can create one here.<\/p>\n
4. Click the Upload<\/b> button in the upper right-hand corner.<\/p>\n
5. In Step 1:<\/b> Extension Type<\/b>, select Control<\/b>, then click Next.<\/p>\n
6. In Step 2: Upload<\/b>, select I would like to upload my control<\/b>. The Select your control<\/b> text box appears.<\/p>\n
7. Click the Browse<\/b> button and select the MyWebControls.vsix file located in the project bin\/Release folder. Click Next.<\/p>\n
8. In Step 3:<\/b> Basic Information<\/b>, you see the information you entered into the manifest editor. The description you entered appears in the Summary<\/b> field.<\/p>\n
9. Set the Category<\/b> to ASP.NET<\/i> and the Tags<\/b> to toolbox, web control<\/i>. You can enter a more detailed description at this time.<\/p>\n
10. Read and agree to the Contribution Agreement<\/b>, then type the text image into the text box. <\/p>\n
11. Click Create Contribution<\/b>. A warning appears that This page has not yet been published<\/b>.<\/p>\n
12. Click Publish<\/b>.<\/p>\n
13. Search the Visual Studio Gallery for MyWebControls. The MyWebControls extension listing appears.<\/p>\n
![\"clip_image020\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/8623.clip_image020_thumb_716F0AB3.jpg\" "\\"clip_image020\\"")
<\/a><\/p>\nInstalling your web control<\/h4>\n
Now that your web control is published, install it in Visual Studio and test it there.<\/p>\n
1. Return to Visual Studio.<\/p>\n
2. From the Tools<\/b> menu, select Extension Manager<\/b>.<\/p>\n
3. Click Online Gallery<\/b>, then search for MyWebControls<\/i>. The MyWebControls extension listing appears.<\/p>\n
4. Click the Download<\/b> button. After the extension downloads, click the Install<\/b> button. Your web control is now installed in Visual Studio.<\/p>\n
6. Create a new ASP.NET web application project.<\/p>\n
7. Open default.aspx in Source<\/b> mode.<\/p>\n
8. Open the toolbox. You should see ColorTextControl in the category MyWebControls.<\/p>\n
Removing your control from the Visual Studio Gallery<\/h4>\n
In the next part of this walkthrough, you will create your web control from a project template. In preparation, delete your web control.<\/p>\n
1. Return to your web browser.<\/p>\n
2. Click the My Contributions<\/b> link in the upper left-hand corner. The MyWebControls listing appears.<\/p>\n
3. Click Delete<\/b> to remove your web control until you upload it again.<\/p>\n
4. Return to Visual Studio.<\/p>\n
5. From the Tools<\/b> menu, select Extension Manager<\/b>.<\/p>\n
6. Select MyWebControls, then click Uninstall<\/b>.<\/p>\n
7. Restart Visual Studio to complete the uninstall process. <\/p>\n
This is the end of part one of this walkthrough. Part two shows you how to create and publish an extensibility web control project template based on the web control project you created above. To continue, please see Walkthrough– Publishing an Extensibility Web Control Project Template (Part 2 of 2)<\/a><\/b>.<\/p>\n