In web system development, some functional modules are often repeated in many places, for example, in the news management system, user login/registration, recommendation news, hot news, and some fixed topics on the page. To improveCodeAnd reduce system development and maintenance costs. Generally, these reusable functional modules are written as separate general modules to reduce system development and maintenance costs, for reference.
To implement such a general module in ASPnet, You can encapsulate these functional modules into "User Controls" and then reference these "User Controls" on the required pages ", this achieves the "one-time encapsulation, N-times reuse" effect. This article introduces the ASPNET user control knowledge, and focuses on the user control encapsulation method and programming skills.
User Control details
The ASPnet web control file (. ascx) is similar to the ASPNET web page file (. aspx. A user control consists of a user interface file (. ascx) with page tags, a page script file JS, and a background code CS file.
User Controls can contain all web content, such as static HTML content and ASP. NET controls. At the same time, it also accepts the same events (load and prerender) as the Page Object and exposes a group of identical inherent ASPnet objects such as application, session, request, and response through attributes. Therefore, you can create user controls in a way similar to the ASPNET web page, and then add the required tags and child controls to them.
In general, there are the following differences between user controls and pages:
1The file extension of the user control is ascx, and the page is Aspx. User Controls are inherited from the system. Web. UI. usercontrol class, while web pages are inherited from the system. Web. UI. Page class.
Despite this, they have many similarities, such as system. web. UI. usercontrol and system. web. UI. all pages are inherited from the same system. web. UI. templatecontrol class. Therefore, the attributes and methods of the system. Web. UI. templatecontrol class have common events.
2
The user control has no page command, but is replaced with the @ control command, which defines the configuration and other attributes. The @ control command will be described in detail later.
3
User Controls cannot be run as independent files. You must add them to the ASPNET web page to run them just like any other controls.
4
The user control does not have <HTML>
@ Control command
The @ control command is similar to the @ page command, but is used when the @ control command is used to create an ASP. NET user control. The @ control command allows you to define the attributes that a user control inherits. These attribute values are assigned to the user control when parsing and compiling pages.
<% @ Control Language = "C #" autoeventwireup = "true" codebehind = "webusercontrol1.ascx. cs" inherits = "aspnetteach4.webusercontrol1" %>
The @ control command has fewer available attributes than the @ page command. Its common attributes include
| Autoenentwireup | Indicates whether the events of the control are automatically matched. Set to true if the event is automatically matched. |
| Classname | Specifies the Class Name of the control that needs to be dynamically compiled at request time. It can also include the full qualified name of a class. |
| Codebehind | Specifies the path of the post code file associated with the user control. |
| Enabletheming | Whether to use a topic. |
| Enableviewstate | Enable Status view |
| Inherits | Class name corresponding to the post code |
| Language | Language used by the user control |
Create a simple user control
The concepts and @ control commands of user controls are described above. Let's take a look at how to create a user control and how to use it in a Web page.
Create a simple user control
After the creation is successful, three files will appear.
You will find that it is the same as creating a web form. I will not go into details here.
Let's look at the post code.
In addition to the inherited base class, the page is basically the same as that on the web page.
Add some content to this user control.
User Control front-end code
<% @ Control Language = "C #" autoeventwireup = "true" codebehind = "webusercontrol1.ascx. cs" inherits = "aspnetteach4.webusercontrol1" %>
<Table Style= "Width: 100% ;">
<Tr>
<TD>
<ASP: Calendar ID= "Calendar1" Runat= "Server"
Backcolor= "# Ffffcc"
Bordercolor= "# 0000cc"
Borderstyle= "Ridge"
Onselectionchanged= "Calendar#selectionchanged"
Cellpadding= "0"> </ASP: Calendar> </TD>
</Tr>
<Tr>
<TD>
<ASP: Label ID= "Label1" Runat= "Server" Text= "Label"> </ASP: Label> </TD>
</Tr>
</Table>
Event code
Protected VoidCalendar1_selectionchanged (ObjectSender, eventargs E)
{
Label1.text ="The date you selected is :"+ Calendar1.selecteddate. tolongdatestring ();
}
Page reference code
<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "webform1.aspx. cs" inherits = "aspnetteach4.webform1" %>
<% @ Register src = "~ /Webusercontrol1.ascx "tagprefix =" uc1 "tagname =" webusercontrol1 "%>
<!Doctype Html Public "-// W3C // dtd xhtml 1.0 transitional // en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html Xmlns= "Http://www.w3.org/1999/xhtml">
<Head Runat= "Server">
<Title> </Title>
</Head>
<Body>
<Form ID= "Form1" Runat= "Server">
<Div>
<Uc1: webusercontrol1 Runat= "Server" ID= "Webusercontrol1" />
</Div>
</Form>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
