Shulou(Shulou.com)06/02 Report--

This article mainly shows you "ASP.NET how to customize control development", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "ASP.NET how to customize control development" this article.

The functions of the control are as follows:

1. Displays the server time and keeps updating

two。 Obtain the server * time from AJAX by manually clicking the refresh button.

3. Can drag

4. Can remember the position on the page, and the position will not change after the page is sent back.

5. Can configure a timing time, at which time, automatic backhaul triggers user-defined events

First create a new class library project HampWebControl, and then create a new class called TipTime1, which inherits the WebControl class. If you do not inherit from existing controls, you generally inherit the WebControl class, which is the base class for all ASP.NET server-side controls.

We compile the project, create a new website project, reference the HampWebControl project, create a new page, and drag a TipTime1 control to the page in the toolbox.

When we run this page, we will find that the HTML code is as follows:

This means that the default is to render as a span tag, which can be changed by overloading the TagKey property of the WebControl base class.

This is a DIV when rendered on the page. HtmlTextWriterTag is an enumeration that contains many HTML tags.

The Render of the WebControl base class is used to render the content, and overloading it can render any custom tag to the page.

This displays an a tag on the page, as shown in the following figure:

Note that at this time, the a tag is outside the DIV, how to put it into the DIV? This requires overloading the RenderContents method of the WebControl base class

So the a tag is in div, as shown in the following figure:

Next, add some styles to the outermost DIV, overloading the AddAttributesToRender method of the base class

There are two ways to write it, either using the HtmlTextWriterStyle enumeration or writing the CSS property name directly.

Here you have learned how custom controls are rendered on the page. Let's create a new class TipTime2, overload TagKey as DIV, and then reload RenderContents to display a span tag and an input tag.

The current server time and a button are displayed on the page, as shown in the figure:

Next, let's let the user configure the text on the button to add a Text attribute to the class TipTime2:

At the same time, change the code of the render button to:

The Text property appears in the properties window of the design view.

Change the value of Text, and so does the text on the button on the page. Note that the Text attribute is stored in ViewState, which ensures that the value is not lost after a postback.

The problem now is that the time will not change, we have to use javascript to change its value. Create a new JS file TipTime2.js.

The first thing to note here is that there is already a JS file _ _ WebControlBase.js in the project, which contains some common JS methods, such as binding events, obtaining control coordinates, etc., all of which are

The extension of this method: var HampWebControl=function () {}

/ / stop event bubbling HampWebControl.prototype.StopBubble = function (e) {if (e & & e.stopPropagation) {e.stopPropagation ();} else {window.event.cancelBubble = true;}}

This reduces global variables and avoids duplicates with variables in other js code as much as possible. I exist each control as an extension of the HampWebControl method, and each control sets the

An array should be used to store all the js objects for the control on the page. Each control corresponds to a Refresh method that is used to rebind the event to solve the problem after the postback.

Now that the control is rendered as a HTML structure, there are three tags, and we need to use three variables to store their DOM objects for later operation.

When the HTML tag is named in the background, it starts with the ClientID of the current control, followed by a suffix as needed, which prevents the tag from repeating its name to some extent. The ClientID of the control is passed in the background so that all DOM objects can be obtained. Drag the effect of the use of off-the-shelf js method, is a pure javascript effect, there is no discussion here, interested children's shoes can see the source code of the sample project.

This method is called by the background registration script to fetch the object if it already exists in the array, otherwise re-new one. And call the initialization and binding event methods.

You need to register the js file in the background at this point. The key operation is to set the file's "build operation" property to "embedded resources" so that the js file will be compiled as part of the DLL file.

Next, you need to declare the required resource files, naming them strictly according to the structure of the folder. Two JS files are registered here: the public JS file _ _ WebControlBase.js and the control-specific JS file TipTime2.js.

Then register the script in the code.

In the book "in-depth Analysis of ASP.NET2.0 Control Development", the code to register the script file is put in the OnPreRender method, but in practical application I found that if you put the custom control in the UpdatePanel control, it will cause some problems, so I put it in the OnLoad method to register the script file.

Note that there are two different ways to register the script file.

The first is whether there is a script in the circular Head tag, and if not, insert a tag.

The second registration method that calls .NET directly.

/ register the public jacascript file with the page / Control object internal static void RegisterCommonJSFile (Control control) {/ / register the jacascript file String jslink = "; Register (jslink,control) } / register resource / resource string private static void Register (string strLink, Control control) {/ / to ensure that the resource is registered only once, circular comparison, do not add Boolean flag = false if it already exists For (Int32 I = 0; I < control.Page.Header.Controls.Count; iTunes +) {LiteralControl lc = control.Page.Header.Controls [I] as LiteralControl; if (lc! = null) {if (lc.Text = = strLink) {flag = true Break;} if (! flag) {LiteralControl include = new LiteralControl (strLink); control.Page.Header.Controls.Add (include);}}

The first is used to register public resource files, and the second is used to register resource files specific to the control. Because the second method can only guarantee that multiple control objects can register only one script, but there is no guarantee that other controls will also

The script is registered repeatedly, so in order to ensure that the common resource file is registered only once, use the first way.

The next step is to register the script code to be executed:

Here, if the control is hidden, it is not registered. In fact, if the control is placed in other container controls, such as Panel, and the parent container control is set to hidden, then the control is not visible, but it still executes the code to register the above script, so there is no more judgment here to determine whether the corresponding DOM object exists in the foreground Init method.

* set the style to make it float, and the control can be dragged on the page.

The above is all the content of the article "how to customize the Development of controls in ASP.NET". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.