This article is intended to give you a practical recipe for creating a simple Web Control and extending Visual Studio with support for the control. The control itself is a basic Country Code drop down list such as you would find on many profile entry pages.Instead of the cut and paste model of ASP, you are presented, by Visual Studio, with the much more elegant Web Control. The Web Control will allow you to write the Country Code dropdown list once, add it to the Toolbox and include it in any of your pages or applications by simply dragging its icon from the Toolbox to the Design View.
Before we start, download the source code of this article here.
1.1. Preliminaries
Topics: Custom Web Controls, Visual Studio Design View, Visual Studio Toolbox
Level: Basic-Intermediate
Language: ASP.NET, C# (C-Sharp)
Required Software: Visual Studio 2003, IIS with .NET Framework 1.1
1.2. Goals
When you have finished this article, you should have an iconic representation of a Country Code DropDownList Web Control in the Toolbox for use in your projects. The Web Control will encapsulate the mundane function of capturing an ISO 3166-1 Country Code and will expose its SelectedItem Text and Value as well as some design time properties for controlling the Design View rendering of the control.
2. Web Control Library
In order to maximize the reusability of the custom Web Control, you need a convenient location for it. There are a couple of reasons for using a Web Control Library for this purpose:
* It makes it easy to add a reference to the control in new projects.I am sure that there are a number of other good reasons, but these will suffice for your discussion.
* It gives you a place to find related controls and maintain their code.
2.1. New Project
Click the IDE menu item: File=>New=>Project or just click the New Project button from the Start Page. Select Visual C# Projects from the folders on the left. Select Web Control Library from the Templates window. Type a descriptive name into the Name field, something like wclProfileControls. Change the location if you don't like it. Click OK and take a look at all of the files that the Project wizard has created for you. In particular, you will be focusing most of your attention on the .cs file that contains the code for the web control.
3. Web Control
The Project Wizard has created a template of a Web Control that you will modify and enhance. The name of the .cs file that you start working with is WebCustomControl1.cs.
3.1. Rename .cs File
First things first, WebCustomControl1.cs is not a very good and informative name. Let's change it to something more applicable.
3.1.1. Solution Explorer
In the Solution Explorer, expand the wclProfileControls Project (or whatever you named your project). Right Click on WebCustomControl1.cs and Click Rename. Name it wcCountryCodeDropDownList.cs or something else that you find to be indicative of its purpose. You will notice that the design view tab now shows wcCountryCodeDropDownList.cs.
3.2. Rename the Web Control Class
While the filename has been changed to wcCountryCodeDropDownList, the name of the class is a generic - WebCustomControl1, not descriptive and not helpful, you will change that as well.
3.2.1. Class View
Find the Class View window, usually in the top right window as a tab behind the Solution Explorer. If you cannot see the window anywhere, click the IDE menu item: View=>Class View. Expand the wclProfileControls Project by clicking the plus sign to the left of the name. Expand the wclProfileControls Namespace below the Project. Right Click on the WebCustomControl1 Class. Click Properties. Find the Properties window, usually the bottom right window. If you cannot see the window anywhere, click the IDE menu item: View=>Properties Window. Make sure that WebCustomControl1 CodeClass is showing in the dropdown list at the top of the properties window. Below that, you will see a Misc property. Expand it. Click the text field to the right of (Name). Type in CountryCodeDropDownList or whatever you feel would be indicative of the control. You will see the changes once the focus changes from the text field, i.e.. Press enter, tab, click on another window, whatever.
3.2.2. Code View
The change of name is not complete until you replace the name WebCustomControl1 in the Comments and ToolBoxData prolog and that means that you need to edit the .cs file directly.
Click over to the wcCountryCodeDropDownList.cs Code View. Type Ctrl-H to bring up the Replace dialog, or from the IDE main menu - select Edit=>Find and Replace=>Replace. Type WebCustomControl1 into the 'Find what' edit box. Type CountryCodeDropDownList into the 'Replace with' edit box. Click the Replace All button - should result in 3 occurrence(s) replaced.
- "VS.Net controls, Page 1/5"
- "VS.Net controls, Page 2/5"
- "VS.Net controls, Page 3/5"
- "VS.Net controls, Page 4/5"
- "VS.Net controls, Page 5/5"
