If there is no application in the existing ASP.NET server control, you can create custom controls by derived from a base control class. These classes provide all the basic features of the server control, so you can focus on the desired function program.
In this walkthrough, you will use the code for custom Label controls, which includes this control in the Web Control Library template. The control is derived from the WebControl class, its behavior is the same as the standard Label control, and the added attribute is presented as a hyperlink. In order to complete this drill, you will perform these processes:
Create two items in the same solution, a Label control for customization, a web form page for use and testing the control. Add this control to the toolbox. Use the control by adding custom controls to the web form page. Create a custom designer for this control. Test the control in your browser.
Note that the standard version of Visual Basic and Visual C # .NET does not provide the "Web Control Library" template. For more information, see
Visual Basic Standard Edition features or
Visual C # Standard Edition features.
The focus of this drill is not the code to write the control, but how to generate controls after writing the code.
Create a project
The first step is to start a new project and generate controls using the custom control template.
Create a custom control
Point "New" on the File menu, and then click Project. The New Project dialog will appear. Select "Visual Basic Project" or "Visual C # item" in the Project Type pane. Select "WEB Control Library" in the Template pane. Change the Name to CustomLabel and click OK. Created a new project, WebcustomControl1 opens in the code editor. By default, the code for custom Label controls is included in the WEB Control Library template. This is the control you will use in this exercise. On the Generate menu, click Generate CustomLabel to compile the control. Compile CustomLabel.dll. By default, it is created in the Bin folder of the CustomLabel project folder. Save the file.
This control has created the control, you add a web form page to the same solution so that the page can be tested for the control.
Create a web form page
Point "Add Item" on the File menu, and then click New Project. The Add New Project dialog box appears. Select "Visual Basic Project" or "Visual C # item" in the Project Type pane. Select "ASP.NET Web Application" in the Template pane. In the Location box, enter a complete URL for your application (including http: // and server names). The last part of the URL is the name of the project; for this drill, the project is named Labelwebform. IIS 5 (or higher) and .NET Framework must be installed on the web server .NET Framework. If IIS has already installed on your computer, you can specify http: // localhost for the server. (If you have access to the Internet normally, in order to use the local host, you may need to configure Internet Explorer to bypass the proxy server.) Click OK. Created a new project, WebForm1 is open in the designer. Save the project.
Add controls to Toolbox
The controls have been compiled and have a web form page that can be used to test the control, where you can add this control to the toolbox so that it is ready for use.
Add controls to Toolbox
On the Tools menu, click Add / Remove Toolbox Item. On the ".NET Framework Component" tab of the Custom Toolbox dialog box, click the "Browse" button. Find CustomLabel.dll, select it, and then click Open WebCustomControl1 to a list of components in the Custom Toolbox dialog. Select WebcustomControl1 in the .NET Framework component list, and then click OK. WebcustomControl1 is added to the toolbox. Once you have finished, you should see an icon on the toolbar as follows:
The next step is to test the control in the page.
Add controls to the web form page and test the control
Open WebForm1 in the Design view and drag WebcustomControl1 from the toolbox to this page. The default presence of the control (just the name of the control and the following control ID) appears on the Design view. Switch to the HTML view, then verify that the @ Register instruction of the Control Settings has been added to the html of the page, its tagprefix is "CC1". Set the TEXT property of the control to Hello. The appearance of the control in the "Design" view is updated to display new text.
You then customize the control, so you need to remove it from the toolbox.
Remove control from the toolbox
Right click on WebCustomControl1 in the toolbox and click Delete "on the shortcut menu. This operation will not remove the control from the project, and only the control is deleted from the toolbox. Close the web form page and not saved.
Now the custom Label control can work, but it is not very beautiful, and the tag cannot be distinguished in the code. The next step is to personalize the control.
Personalized control
This control is using the default icon in the toolbox, the default tag prefix is "CC1". To make the control more easy to identify, change the tag prefix and create a new icon.
Change the tag prefix
Under the CustomLabel project in the Solution Explorer, double-click "AssemblyInfo" to open the AssemblyInfo file in the designer. Add an Imports statement (in Visual Basic) or Using statement (in Visual C #): 'Visual Basic
Imports System.Web.ui
// C #
Using System.Web.ui; adds the assembly: tagprefix attribute to a list of assembly properties. This will specify the new TagPrefix of the CustomLabel control, in this case. 'Visual Basic
// C #
[Assembly: TagPrefix ("CustomLabel", "XXX")]]]
Create a new icon
Select the "CustomLabel" project in the Solution Explorer. Click Add New Item on the Project menu. The Add New Item dialog box appears. Select "Bitmap File" in the Template pane, change the Name to WebCustomControl1.bmp, and then click Open. The new bitmap file appears in the Solution Explorer and opens in the designer.
Note For this drill, the name of the icon file must be fully matched with the name of the control class (webcuStomControl1), including case.
In the Properties window, change the height and width properties of the bitmap to 16. The size of the icon must be 16 multipliers. Draw a unique pattern on the bitmap, use multiple colors so that you can identify the icon. Save and close bitmap files. Select WebcustomControl1.bmp in Solution Explorer. In the Properties window, change the Generate Operations property to "Embedded Resources". Select the "CustomLabel" project in the Solution Explorer. On the Generate menu, click "Recreate CustomLabel". Save all work. If the control is now added to the toolbox, the icon you created will be displayed next to the name of the control. When using this control on a web form page, the HTML tag of the control will contain the identity prefix you specify.
Use custom controls
Add WebCustomControl1 to the toolbox again. Display control with icons you created. Depending on your settings, it may be displayed below the Toolbox "General" tab. Re-open the web form page named WebForm1 and drag the control to it.
Note that because you have previously closed the web form page and not saved,
The Text property has been restored to the default value.
Switch to the HTML view and verify that the TagPRefix property of the @ register directive is XXX. Because you will modify the control, remove WebCustomControl1 from the web form page, but retain it in the toolbox.
Your custom control is now available and complete, but it is not very beautiful on the design map. To make the control better, you will add a custom designer to it.
Create a custom designer
Designer is a class that allows you to modify the design and behavior of components and controls. Although all of the WYSIWYG formators are usually targeted to minimize the differences between appearance and running appearance when design, there are also special design tips. For more information, see Custom Designers.
In this walkthrough, you will implement a custom designer that makes custom controls in a hyperlink.
Create a custom designer for control
Select the "CustomLabel" project in the Solution Explorer. On the Projects menu, click Add References and add the reference to System.Design.dll. Click Add New Item on the Project menu. The Add New Item dialog box appears. Select "Class" in the Template pane, change the Name to SampleDesigner, and then click Open. The new class file is displayed in the Solution Explorer and opens in the designer. Add code that rewrites the getDesigntimehtml method for the base class. This method is called to get the representation of the control. In the way of rewriting, do the following:
Get the Text property of the custom control. If a text property has been set (that is, it is not an empty string), create a new HyperLink control, set its properties to match the original control, then call the Render method of the HyperLink control. The final result is that the HyperLink control uses the value of the Text property displayed in the designer. The code to perform these steps is as follows, which lists the SampleDesigner file: 'Visual Basic
Imports system
Imports system.io
Imports system.Web
Imports System.Web.ui
Imports System.Web.ui.WebControls
Imports system.web.ui.design
Public Class Sampledesigner
Inherits System.Web.ui.Design.ControlDesignerpublic overrides function getdesigntimehtml () AS STRING
'Component Is The Control Instance, Defined in The Base
'Designer
DIM CTL AS WebcustomControl1 = CType (me.component, _
WebcustomControl1)
IF (CTL.Text <> "").
DIM SW as new stringwriter ()
DIM TW AS New HtmlTextWriter (SW)
Dim PlaceHolderLink As new hyperlink ()
'Put Control Text Into the Link's Text
PlaceHolderLink.Text = CTL.Text
PlaceHolderLink.navigateURL = CTL.Text
PlaceHolderLink.RenderControl (TW)
Return sw.toString ()
Else
Return me.getemptydesigntimehtml ()
END IF
END FUNCTION
END CLASS
// C #
Using system;
Using system.io;
Using system.Web;
Using system.Web.ui;
Using system.Web.ui.webcontrols;
Using system.Web.ui.design;
Namespace CustomLabel
{
Public class sampledesigner: system.web.ui.design.controlDesigner
{
Public override string getdesigntimehtml ()
{
// Component Is The Control Instance, Defined in The Base
// designer
WebcustomControl1 CTL = (WebcustomControl1) Component;
IF (CTL.Text! = "&& ctl.text! = null)
{
StringWriter SW = new stringwriter ();
HtmlTextWriter TW = New HtmlTextWriter (SW);
HyperLink PlaceHolderLink = New HyperLink ();
// Put Control Text Into the Link's Text
PlaceHolderLink.Text = CTL.Text;
PlaceHolderLink.navigateURL = CTL.Text;
PlaceHolderLink.RenderControl (TW);
Return sw.toString ();
}
Else
Return getemptyDesigntimehtml ();
}
}
} (According to the language you are using) is opened in the designer WebCustomControl1.vb or WebCustomControl1.cs, then immediately add the property to the Properties list before WebCustomControl1 class declaration: Designer ( "CustomLabel.SampleDesigner, CustomLabel") WebCustomControl1 Class declarations should be as follows: 'Visual Basic DefaultProperty ("Text"), ToolboxData ("<{0}: WebcustomControl1 _ Runat = Server> ")> Public Class WebcustomControl1 // C # [Designer ("CustomLabel.SampleDesigner, CustomLabel"), DefaultProperty ("Text"), ToolboxData ("<{0}: WebcustomTomControl1 Runat = Server> ")] Public class webcustomControl1: system.web.ui.webControls.WebControl On the Generation menu, click Generate Solutions, which generates two items. Save and close all open files. Test control Test if the text property is working properly Open WebForm1 in the designer. Drag WebCustomControl1 from the toolbox to this page. Set the Text property of the web custom control to Hello. This text control should be displayed as a hyperlink on the web form page. Save WebForm1. Test control in your browser Select WebForm1 in the Solution Explorer. On the File menu, click "View in your browser". Verify that hello is displayed in the browser. Text looks like a label instead of a hyperlink. Note that in Visual Studio, your code is always fully ruled when designing, even if the code is finally in a fully trusted project. This means that when you test custom controls on your computer, it may run correctly, but in deployed applications, the custom control may fail because of insufficient permissions. Be sure to test your control in the security context (ie, the context in the actual application is running in the actual application). See Developing ASP.NET Server Controls | Recommendations for Web User Controls and Web Custom Controls | Web Application Security Threat Overview
