Simple star-level controls for ASP. NET custom controls on the first day

1. Introduction

We often see on the web page that a star pattern is used to represent a software or an article.ArticleGenerally, five stars are used as the highest standard. The specified level is filled with solid, as shown in Figure 1-1. on the first day of the. NET custom control, we will develop such a custom control.

2. Analysis

You can see that a custom control contains two parts: the displayed text and an image containing two patterns (solid and hollow star). to present this result, it is most convenient to put these two parts into a table containing one row and two columns. The next thing to consider is how to display several solid and hollow Stars Based on the score.

The first idea of seeing this pattern may be to first display the solid Image Based on the score, and then determine how many hollow stars need to be displayed (with 5 minus the score). In this way, multiple cycles are required to achieve this, but there are better implementation methods in HTML.

You can set the background-repeat attribute when using CSS to set the background image. This attribute identifies the direction in which the background image is repeated. You can use this attribute to first display an outer Div, this Div always displays five hollow star images. In this layer, another div is nested, and the inner Div shows a solid star pattern.

Background-repeat, background-image, background-color, and background-position constitute the attribute family for setting the background style.

Since the star background can be repeated in the X direction, the answer is displayed for the specified number of stars-we can set the width of the specified layer (DIV) based on the score, and for convenience, place two star patterns in an image file, and then apply background-position to display the specified star.

Based on the above analysis, the custom control must have two attributes:

Attribute	Description
Comment	Rating item comment, string type
Score	Score. The corresponding solid image and number type are displayed based on this attribute.

3. Implementation

1. Create a solution, including the controllibrary class library (custom control class) and Web site.

2. Create an imagevideo in the category library and place the stars.gif image to be referenced on the website.ProgramIn the centralized resource file, you must set the build action attribute of the image to embedded Resource (embedded resource), and in assemblyinfo. declare the resource file to be used in CS as follows:

 
[Assembly: webresource ("controllibrary.image.stars.gif", "image/jpg")]
 

Webresource is used (actually the webresourceattribute class). To use this class, you need to introduce system. web. ui namespace) defines the resources used. The constructor of this class uses two parameters. The first parameter is the name of the web resource, and the second parameter is the MIME type. The Web Resource Name must follow the specific rules: namespace name + directory name + file name, separated by halfwidth characters. MIME types have different representations for different files. For more information about the mime list, see.

The resource name can be viewed using tools such as. Net reflector. After an assembly is loaded, if a resource file is embedded, you can use the resources directory to browse the embedded resources.

3. Create a custom control class star. CS in the class library and introduce the required namespace:

 
Using system; using system. componentmodel; using system. Web. UI; using system. Web. UI. webcontrols; namespace controllibrary {public class star: webcontrol {}}
 

4. next, define the score and comment attributes and store these two attributes in viewstate. If you do not have a design score, set the score to 0, that is, set the default value of the score to 0. Here the defaultvalutattribute class is used to set the default value of the attribute.

[Defaultvalue (0)] public int score {get {object OBJ = viewstate ["score"]; return OBJ = NULL? 0: convert. toint32 (OBJ) ;}set {viewstate ["score"] = value ;}} Public String comment {get {object OBJ = viewstate ["comment"]; return OBJ = NULL? String. Empty: Convert. tostring (OBJ);} set {viewstate ["comment"] = value ;}}
 

After an HTTP request is complete, the connection will be closed. Saving the property to a private variable will not meet our requirements (the custom control class will be generated again when the request is sent back, and the property value may be lost ), therefore, the property value can be restored correctly when the returned value is saved to viewstate.

5. Override the createchildcontrols method, which is defined on the control class. This method is used to create a control level to prepare for sending back and rendering. In this method, the custom createcontrolhierarchy method is called to create a control level:

 
Protected override void createchildcontrols () {base. createchildcontrols (); createcontrolhierarchy ();}
 

6. Create a table with one row and two columns in the createcontrolhierarchy method, and call the createcomment method and createstarts method to create comments and star charts respectively:

 
Protected virtual void createcontrolhierarchy () {Table = new table (); tablerow ROW = new tablerow (); table. rows. add (ROW); tablecell comment = new tablecell (); createcomment (comment); row. cells. add (comment); tablecell stars = new tablecell (); createstars (stars); row. cells. add (stars); this. controls. add (table );}
 

7. Implement the createcomment method. This method receives a tablecell parameter as the container for displaying text and directly sets the text of cells as the comment string:

 
Private void createcomment (tablecell cell) {Cell. Text = comment ;}
 

8. implement the createstarts method. This method also receives a tablecell as a parameter. First, obtain the path of the image resource file, create a nested layer in the cell (the Panel class corresponds to the DIV in the server-side control) and set its corresponding attributes based on the score settings:

Private void createstars (tablecell cell) {string starpath = page. clientscript. getwebresourceurl (this. getType (), "controllibrary.image.stars.gif"); Panel panbg = new Panel (); panbg. style. add (htmltextwriterstyle. width, "80px"); panbg. style. add (htmltextwriterstyle. height, "16px"); panbg. style. add (htmltextwriterstyle. textalign, "Left"); panbg. style. add (htmltextwriterstyle. overflow, "hidden"); panbg. style. add (htmltextwriterstyle. backgroundimage, starpath); panbg. style. add ("background-position", "0px-32px"); panbg. style. add ("background-repeat", "Repeat-X"); cell. controls. add (panbg); Panel pancur = new Panel (); string width = score * 16 + "PX"; pancur. style. add (htmltextwriterstyle. width, width); pancur. style. add (htmltextwriterstyle. height, "16px"); pancur. style. add (htmltextwriterstyle. backgroundimage, starpath); pancur. style. add ("background-position", "0px 0px"); pancur. style. add ("background-repeat", "Repeat-X"); panbg. controls. add (pancur );}

9. Override the render method of the parent class. In this method, pass the content of the server control to the htmltextwriter object to present the content on the client. In this method, the preparecontrolforrender method is called:

 
Protected override void render (htmltextwriter writer) {preparecontrolforreader (); base. Render (writer );}
 

10. Implement the preparecontrolforrender method. This method is used to set other styles before rendering. In this control, the cellspacing and cellpadding attributes of the table are simply set:

 
Private void preparecontrolforreader () {If (this. controls. count <1) return; Table = (table) This. controls [0]; table. cellspacing = 0; table. cellpadding = 0 ;}
 

11. Add a reference to the controllibrary class library on the website, and add the custom control declaration on the default. aspx page:

 
<% @ Register Assembly = "controllibrary" namespace = "controllibrary" tagprefix = "cc" %>
 

12. Define custom controls at the corresponding location on the page:

<% @ Register Assembly =? Controllibrary? Namespace =? Controllibrary? Tagprefix =? CC? %>
 

13. preview the effect.

To use custom controls on multiple pages, you must add declarations to each page. A better alternative is to declare custom controls in the web. config file. Add in configuration section <Pages> <controls> <add tagprefix = "cc" assembly = "controllibrary" namespace = "controllibrary"/> </controls> </pages>

4. Summary

In this task, we created a very simple star-level custom control by inheriting the webcontrol class, as you learn more, you will gradually realize that the control actually contains the basic steps for custom control development-creating custom controls, setting styles, and rendering, by encapsulating the corresponding actions as different methodsCodeIt looks clearer and master how to use resource files in custom controls, which is especially useful when custom controls use a large number of styles or scripts. Finally, it explains how to use the control on the page after development.

ASP. NET Custom Controls

Preface

Simple star control on the first day

Star controls with custom styles the next day

On the third day, use the star widget in the control status.

Fold panel custom controls on the fourth day

Star controls that can be scored on the fifth day

Star controls that can be bound to data sources on the sixth day

Develop list controls with rich features on the seventh day

Metric days: displays the data binding controls for multiple entry star rating

The ninth day custom gridview

Datalist that implements the paging function on the tenth day

Download all source code

Download this series of articles in PDF